Søg
Avatar billede pnr Nybegynder
15. april 2005 - 13:28 Der er 23 kommentarer og
1 løsning

hjælp til dropdown menu

Jeg har nogle menupunkter i toppen af en hjemmeside, ved et af de menupunkter har jeg brug for at man kan vælge forskellige ting via en dropdownmenu.

Det der skal ske er at når man køre musen over en tabelcelle skal der folde sig en menu ud med 4 menupunkter. Den menu der skal folde ude skal rent designmæssigt ligne den menu der kommer når man her på eksperten trykker på "Kategorioversigt". der skal bare ikke være underpunkter, kun 4 hovedpunkter.

Er der noget der kan hjælpe mig med at lave dette?
Avatar billede Slettet bruger
15. april 2005 - 20:06 #1
Her er en nem en :

<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#cfcfcf}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>
</head>

<body>
<h3>Drop down menu</h3>
<table width="100%">
<tr bgcolor="#FF8080">
  <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
  <a href="/default.asp">Tutorials</a><br />
  <table class="menu" id="tutorials" width="120">
  <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
  <tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr>
  <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
  <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
  <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
  </table>
  </td>
  <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
  <a href="/default.asp">Scripting</a><br />
  <table class="menu" id="scripting" width="120">
  <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
  <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
  <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
  <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
  <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
  </table>
  </td>
  <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
  <a href="/site/site_validate.asp">Validation</a><br />
  <table class="menu" id="validation" width="120">
  <tr><td class="menu"><a href="/site/site_validate.asp">Validate HTML</a></td></tr>
  <tr><td class="menu"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr>
  <tr><td class="menu"><a href="/site/site_validate.asp">Validate CSS</a></td></tr>
  <tr><td class="menu"><a href="/site/site_validate.asp">Validate XML</a></td></tr>
  <tr><td class="menu"><a href="/site/site_validate.asp">Validate WML</a></td></tr>
  </table>
  </td>
</tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>

</html>
Avatar billede pnr Nybegynder
18. april 2005 - 08:05 #2
Det var næsten lige det jeg skulle bruge!

Jeg har bare 2 problemer:

1. Hvis jeg bruger den i NS bliver menuen ikke vist korrekt.

2. Kan rykke menuen så den starter ca 2px under den celle som man "starter" den fra?
Avatar billede Slettet bruger
18. april 2005 - 09:51 #3
Hvad doctypedeclaration bruger du ? - jeg kunne tænke mig at du bruger en forkert. 
Det skal antagelig være denne, såfremt du bruger HTML 4 og CSS, men jeg kender jo ikke hele din code .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
.............................................
Disse 3 typer er de almindeligste:

HTML 4.0 Strict DTD

inkluderer alle koder og attributter der ikke er udgået og ikke indeholder koder der specifikt har at gøre med rammer (frames). For dokumenter der overholder denne standard bør følgende DTD angives:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
.................................................................

når du bruger CSS
HTML 4.0 Transitional DTD

inkluderer de samme koder som i Strict DTD plus de der er udgået. For dokumenter der overholder denne standard bør følgende DTD angives:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
..................................................................

HTML 4.0 Frameset DTD

inkluderer alle HTML-koder, også de der er erklæret for udgået. For dokumenter der overholder denne standard bør følgende DTD angives (dog kun hvis dokumentet inddeler et vindue i rammer, dvs. benytter <FRAMESET>):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">
....................................

Bruger du XHTML, kan jeg ikke hjælpe, det er slet ikke færdigudviklet til web endnu, og derfor vil jeg fraråde dig at spilde tid på det.
Avatar billede pnr Nybegynder
18. april 2005 - 10:18 #4
Jeg bruger følgende doctypedeclaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

Jeg kan bare ikke få  min side til at fungere med andre doctypedeclarations :-(

Men tilbage til din kode, jeg har testet den kode du har skrevet med den doctypedeclaration du forslår, men den viser stadig ikke menuen rigtig i NS.
Avatar billede pnr Nybegynder
18. april 2005 - 10:35 #5
Har du et forslag til hvordan jeg kan få rykket menuen lidt længere ned?
Avatar billede Slettet bruger
18. april 2005 - 12:10 #6
Det kræver at jeg har koden så jeg kan se hvordan, og hvad din side er opbygget:

KAn du lægge den på webhost og angive et link til den ?
Avatar billede pnr Nybegynder
18. april 2005 - 12:29 #7
Koden er den du har smidt den 15/04-2005 20:06:04, det eneste jeg har gjordt er at tilføje følgende i toppen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
Avatar billede Slettet bruger
18. april 2005 - 12:57 #8
Jeg har ikke NS - men denne er testet i IE og FF

This Page Is Valid HTML 4.01 Transitional!
............................................

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>[Ingen titel]</title>

<meta name="Author" content="Ib Bermann">
<style type="text/css" media="screen">
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color: red;}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>
</head>
<body>
<h3>Drop down menu</h3>
<table width="100%">
<tr bgcolor="#FF8080">
  <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
  <a href="/default.asp">Tutorials</a><br />
  <table class="menu" id="tutorials" width="120">
  <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
  <tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr>
  <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
  <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
  <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
  </table>
  </td>
  <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
  <a href="/default.asp">Scripting</a><br />
  <table class="menu" id="scripting" width="120">
  <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
  <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
  <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
  <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
  <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
  </table>
  </td>
  <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
  <a href="/site/site_validate.asp">Validation</a><br />
  <table class="menu" id="validation" width="120">
  <tr><td class="menu"><a href="/site/site_validate.asp">Validate HTML</a></td></tr>
  <tr><td class="menu"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr>
  <tr><td class="menu"><a href="/site/site_validate.asp">Validate CSS</a></td></tr>
  <tr><td class="menu"><a href="/site/site_validate.asp">Validate XML</a></td></tr>
  <tr><td class="menu"><a href="/site/site_validate.asp">Validate WML</a></td></tr>
  </table>
  </td>
</tr>
</table>
<p>Mouse over these options to see the drop down menus</p>




</body>
</html>
Avatar billede pnr Nybegynder
18. april 2005 - 13:05 #9
Den virker ikke i NS.

Nå men hvad så med det spørgsmål om at rykke menuen nogle pixel længere ned, er det noget du kan hjæpe med?
Avatar billede Slettet bruger
18. april 2005 - 14:32 #10
Hvad er det der ikke virker i NS, når koden er:
This Page Is Valid HTML 4.01 Transitional!
kan jeg næsten ikke gøre mere for dig.

Du kan rykke menuen på mange måder, du kan jo bare sætte nogle <br>
<h3>Drop down menu</h3><br><br><br><br>

eller dette i <style type="text/css" media="screen">
#banner{
    position: absolute;
    height: 25px;
    width: 100%;
    background: lime;
    z-index: 1;
}

og dette i <body>
<div id="banner">her er Banner 1</div>
Avatar billede pnr Nybegynder
18. april 2005 - 15:03 #11
1. Det der sker i NS er at menuen bliver vist i øverste venstre hjørne lige meget hvilket link man køre musen over.

2 hvis jeg bruger <br> laver jeg jo også cellen hvor i linket er større og det er ikke meningen. Det sidste kode du har smidt kan jeg ikke helt se hvordan jeg kan bruge.
Avatar billede Slettet bruger
18. april 2005 - 15:09 #12
Jeg tror ikke jeg kan hjælpe dig.

Luk dette spm. - og opret et nyt med problemet i NS
Avatar billede pnr Nybegynder
18. april 2005 - 15:14 #13
Hvad så med problemet med at rykke menuen lidt ned af, kan du hjælpe lidt mere med det?
Avatar billede pnr Nybegynder
19. april 2005 - 14:35 #14
Nå men jeg oprette et nyt spørgsmål.

jbtage du får mange tak for hjælpen, smid et svar så får du nogle point!
Avatar billede Slettet bruger
19. april 2005 - 19:55 #15
Ja tak men jeg troede ikke du kunne bruge min code,det er jo ikke et færdigt project, men det er det efterhånden blevet, meningen med eksperten er at man kan få hjælp til specifik code som man så selv kan arbejde videre med i sit project.

Jeg har fornemmelsen af at du ikke rigtig forstår hvad koden gør, og derfor er du ikke i stand til at tilrette den.

Jeg forstår ikke helt om du bruger hele min code eller har klippet noget til dit eget project.

Er det dropmenuen under menubjælken du vil have flyttet ned skal det gøres ved at ændre i table.menu med top:75 px der giver afstanden fra top til dropdown.

table.menu{
top:75px;
font-size:100%;
position:absolute;
visibility:hidden;
}

Jeg vil ikke have nogle point, læg selv et svar og tag dine point hjem
Avatar billede pnr Nybegynder
20. april 2005 - 06:09 #16
Først vil jeg sige at jeg er super glad for din hjælp, og det vil jeg gerne vise ved at give dig nogle point :-)

Indtil videre har jeg brugt den kode du har posted, når det så spiller implementere jeg det så i mit projekt.

Mit problem er at min løsning gerne skulle kunne fungere i de fleste browsere, og hvis jeg gør som du forslår virker det efter hensigten i IE, men i Mozilla kommer menu nu for langt ned i forhold til menubjælken, og det samme i Opera.
Avatar billede Slettet bruger
20. april 2005 - 09:32 #17
Når du skriver Mozilla - er det ikke Mozilla/Firefox ? Jeg mener at Mozilla og Firefox i dag er identiske

Jeg vil finde browserne og installerer dem så jeg kan se forskellen/hvad du mener.
Avatar billede pnr Nybegynder
20. april 2005 - 10:05 #18
Jo det er Mozilla Firefox.
Avatar billede pnr Nybegynder
27. april 2005 - 14:35 #19
ibtage: Har du fået det testet i Firefox?
Avatar billede pnr Nybegynder
18. maj 2005 - 15:17 #20
ibtage: har du fundet ud af noget?
Avatar billede Slettet bruger
18. maj 2005 - 18:45 #21
Ja selvfølgelig er der en løsning på "problemet", men jeg kan bare ikke løse det.
Avatar billede pnr Nybegynder
18. maj 2005 - 18:59 #22
Nå men så smid et svar så er der point til dig, og mange tak for hjælpen.
Avatar billede Slettet bruger
18. maj 2005 - 22:31 #23
Læg selv svar og accepter det - du kan oprette et spm. med problemet og se om der ikke kommer een der kan løse det, jeg har hørt om forskellen på browserne , hvor der sættes xtra px ind, og også hvordan det elimineres, men kan ikke finde det.
Avatar billede pnr Nybegynder
14. juni 2005 - 08:35 #24
Jamen så lukker jeg selv.....

ibtage: du skal endnu engang have mange tak for din hjælp...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 19:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
10/0821:30 Blokeret på Snapchat? Af LineP i Chat & Messaging
09/0816:05 Samsung Galaxy vil ikke ud af "Sikker tilstand" Af ErikHg i Mobiltelefoner
White papers
Flere white papers »