Notifikationer

Markér alle som læst Log ud

Slettet bruger

25. maj 2006 - 16:16 Der er 18 kommentarer og
1 løsning

Hjælp til dropdown-menu

Hejsa,

Jeg har fundet en tutorial hvor man kan lave en menu med css og en smule javascript.
Menuen er en venstrestillet menu hvor undermenuerne kommer ud fra venstre mod højre.

Jeg vil dog gerne have alle overmenuer horizontalt, mens undermenu-punkter skal komme under som dropdowns.

Min menu kan ses her sammen med kildekoden: http://afterworld.dk/menutest.htm

Dropdown-effekten virker vidst godt nok, men hvordan sidestilles "Test 1" og "Test 2" overpunkterne?

Synes godt om

foxmulder58 Praktikant

25. maj 2006 - 16:20 #1

Nej den virker ikke korrekt i IE der skal vist et CSS hack til eller saadan noget.

Synes godt om

Slettet bruger

25. maj 2006 - 16:23 #2

Det med IE er jeg ikke nået til endnu. Ved godt den ikke kører der. Men i Firefox virker den, men vises som sagt verticalt i stedet for horizontalt.

Synes godt om

mclemens Nybegynder

25. maj 2006 - 16:36 #3

sådan???

<ul class="nav">
<li><a href="#">Test 1</a></li>
</ul>

<ul class="nav">
<li><a href="#">Test 2</a>
<ul>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
</ul>
</li>
</ul>

og css:
ul.nav{float:left;}

Synes godt om

Slettet bruger

25. maj 2006 - 19:06 #4

Tak for dit forslag. Det virker fint :-)
Ved du så hvordan man får det til at virke i IE?

Jeg har et javascript i toppen af min side, men det virker ikke efter jeg har lavet de ændringer du skrev (virkede vidst også kun halvt før ændringerne).

Men ellers, smid et svar. Du har jo svaret på det jeg spurgte om :-)

Synes godt om

mclemens Nybegynder

25. maj 2006 - 19:19 #5

ok, scriptet virkede heller ikke før
... kigger lige efter et link :)

Synes godt om

mclemens Nybegynder

25. maj 2006 - 19:24 #6

relaterende ... det er fordi IE ikke acceptere :hover på andet end a'tags det gør FF derfor skal der laves en IE workaround ... den workaround som typisk benyttes er et script i css se evt her:
http://www.eksperten.dk/spm/702681

http://www.xs4all.nl/~peterned/ (whatever:hover)
http://webdesign101.dk/www/cssmenu/dropdownmenu.php (bunden)

(det ville p.t. måske være bedre med en javascript menu med et seperat sitemap så man ikke ryger ud af søgemaskinerne ... om ikke andet så indtil IE får implementeret lidt mere css i browseren :/ )

Synes godt om

mclemens Nybegynder

25. maj 2006 - 19:29 #7

Problemet med scriptet er at den benytter sig af class switch for at vise / skjule undermenuer i IE ... og class switch er ikke det bedste at benytte sig af i js - det er bedre at påvirke enkelte elementer via js - .style. attributter der er mindre risiko for at browseren (i dette tilfælde IE da det er et specifikt IE hack) kaster alle js-dom oplysninger i skraldespanden for herefter at genberegne sidens visning... så en js-menu med style ville måske være det bedste lige p.t...

Synes godt om

mclemens Nybegynder

25. maj 2006 - 21:32 #8

fik lige kigget på det script du bruger p.t.:

this.className=this.className.replace»
(" over", "");

skiftes til:

this.className=this.className.replace(" over", "");

dog bruges stadig class skifte ... men hvis
det virker godt nok - så virker det jo godt nok ;)

Synes godt om

Slettet bruger

26. maj 2006 - 11:11 #9

Ok. Jeg prøver med det du skrev. Mange tak for svarene!

:-)

Synes godt om

mclemens Nybegynder

26. maj 2006 - 11:25 #10

- det var så lidt :)
og tak for point :)

Synes godt om

Slettet bruger

26. maj 2006 - 11:29 #11

Det virker stadig ikke i IE...
Jeg har lagt ændringerne op, men undermenuerne fremkommer ikke og der står "der opstod en fejl på siden" i bunden af siden i IE.

Fejlen er noget med "et objekt var ventet"...

Ved du hvad det kan være?

Synes godt om

mclemens Nybegynder

26. maj 2006 - 12:32 #12

hmm, min fejl den validerede på id="nav" - glemte at fjerne den ene id her så de begge kun havde en class... ændret lidt på den så den validerer på className - prøv denne eller check evt. links :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Page</title>

<script type="text/javascript">

function startList(tmptype) {

navRoot=tmptype;

for (i2=0; i2<navRoot.childNodes.length; i2++) {
node = navRoot.childNodes[i2];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}

}

window.onload=function(){

if(document.all&&document.getElementById){
navRoots = document.getElementsByTagName("ul");
for(i=0;i<navRoots.length;i++){
if(navRoots[i].className=="nav")startList(navRoots[i]);
}
}

}

</script>

<link href="123_files/menuTest.css" rel="stylesheet" type="text/css"></head><body>

<ul class="nav">
<li><a href="#">Test 1</a>
<ul>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
</ul>
</li>
</ul>

<ul class="nav">
<li><a href="#">Test 2</a>
<ul>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
</ul>
</li>
</ul>

</body></html>

Synes godt om

Slettet bruger

26. maj 2006 - 15:42 #13

Nu virker det i IE.

En sidste ting.
Kan du fortælle mig hvordan jeg fjerner border på øverste niveau? Uden at fjerne den på undermenuerne.

Evt. hvordan man laver hoover-effekt på under-menuerne.

Synes godt om

Slettet bruger

26. maj 2006 - 15:55 #14

Javascriptet virker heller ikke hvis man indsætter menu-koden i en div.

<div id="menu">

<ul class="nav">
<li><a href="#">Test 1</a>

<ul>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
</ul>
</li>
</ul>

<ul class="nav">
<li><a href="#">Test 2</a>
<ul>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
</ul>

</li>
</ul>

</div>

:-)

Synes godt om

mclemens Nybegynder

26. maj 2006 - 17:36 #15

[ Evt. hvordan man laver hoover-effekt på under-menuerne. ]
- Check evt. links i 25/05-2006 19:24:25 :)

Sidste indlæg: Hvorfor ikke???
- Virker fint nok her ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Page</title>

<script type="text/javascript">

function startList(tmptype) {

navRoot=tmptype;

for (i2=0; i2<navRoot.childNodes.length; i2++) {
node = navRoot.childNodes[i2];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}

}

window.onload=function(){

if(document.all&&document.getElementById){
navRoots = document.getElementsByTagName("ul");
for(i=0;i<navRoots.length;i++){
if(navRoots[i].className=="nav")startList(navRoots[i]);
}
}

}

</script>

<link href="123_files/menuTest.css" rel="stylesheet" type="text/css"></head><body>

<div id="menu">

<ul class="nav">
<li><a href="#">Test 1</a>
<ul>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
</ul>
</li>
</ul>

<ul class="nav">
<li><a href="#">Test 2</a>
<ul>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
</ul>
</li>
</ul>

</div>

</body></html>

Synes godt om

mclemens Nybegynder

26. maj 2006 - 17:44 #16

[ En sidste ting.
Kan du fortælle mig hvordan jeg fjerner border på øverste niveau? Uden at fjerne den på undermenuerne. ]

Sådan her???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Page</title>

<style type="text/css">

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
float : left;
}

ul.nav ul {
width: 148px;
border: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position : relative;
display: none;
}

li:hover ul, li.over ul {
display: block;
}

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;

border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

function startList(tmptype) {

navRoot=tmptype;

for (i2=0; i2<navRoot.childNodes.length; i2++) {
node = navRoot.childNodes[i2];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}

}

window.onload=function(){

if(document.all&&document.getElementById){
navRoots = document.getElementsByTagName("ul");
for(i=0;i<navRoots.length;i++){
if(navRoots[i].className=="nav")startList(navRoots[i]);
}
}

}

</script>

</head>

<body>

<ul class="nav">
<li><a href="#">Test 1</a>
<ul>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
</ul>
</li>
</ul>

<ul class="nav">
<li><a href="#">Test 2</a>
<ul>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
</ul>
</li>
</ul>

</body></html>

Synes godt om

Slettet bruger

28. maj 2006 - 12:40 #17

Tak for svarene :-)
Jeg kigger lige på det du har skrevet lidt senere og ser om jeg kan få det til at virke.

Jeg opretter også lige et spørgsmål til dig med flere point. Du har vidst hjulpet en del mere end hvad de 30 point som jeg oprettede spørgsmålet her med, berettiger til :-)

Synes godt om

Slettet bruger

28. maj 2006 - 12:42 #18

Ny tråd her: http://www.eksperten.dk/spm/712269

Synes godt om

Slettet bruger

28. maj 2006 - 16:45 #19

Hej.

Jeg har 2 spørgsmål som jeg håber du kan besvare.

1. Når jeg nu har lagt menuen ind i en div - kaldet menu, og denne menu har en baggrundsfarve. Så kan man se at mene-div'en strækker sig med så langt som der er elementer i undermenuen.
Hvordan gør jeg sådan at undermenuen bare kører ud over selve menu-div'en?

2. Jeg skulle gerne have lavet det sådan, at alle elementer, der benyttes til menuen - altså alle ul, li osv. Bliver erklæret i min .css-fil sådan at andre ul og li's ikke får samme formattering.
Normalt ville jeg gøre det således:

#nav ul

Men det kan jeg åbenbart ikke her fordi det er klasser.
Jeg får i hvert fald en underlig formattering hvis jeg prøver.

Jeg ville gerne kunne lave en "sektion" i min .css-fil hvor jeg erklærer alle menu-elementerne - ul.nav bla bla.

:-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS