lager en meny i CSS... HJELP!

Richard87 · 16. mars 2007

Hei, sitter og prøver og lage en meny i CSS, har sett litt rundt forbi, og lest litt tutorials på nettet...

nå har jeg kopiert ett skript fra internett(husker ikkje vor det var fra), men fårstår lita av det:( og så er menyen "vertical", hvordan kan jeg gjøre om denne til en vanlig horisontal meny?

PS. Har prøvd på dette i 3 dager nå, så begynner og bli desperat:(

her er en 'live' versjon av koden:

http://blackhawk.mine.nu/richard2/menu2.html

og koden:

Klikk for å se/fjerne innholdet nedenfor

<script language="JavaScript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
 }
 node.onmouseout=function() {
 this.className=this.className.replace»
(" over", "");
  }
  }
 }
}
}
window.onload=startList;
</script>

<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

li:hover ul { 
   display: block;
}

</style>

<html>
<head>
<title>Test Menu</title>
</head>
<body>
<ul id="nav">
   <li><a href="#">Home</a></li> 
   <li><a href="#">About</a> 
     <ul> 
       <li><a href="#">History</a></li> 
       <li><a href="#">Team</a></li> 
       <li><a href="#">Offices</a></li> 
     </ul> 
   </li> 
   <li><a href="#">Services</a> 
     <ul> 
       <li><a href="#">Web Design</a></li> 
       <li><a href="#">Internet 
           Marketing</a></li> 
       <li><a href="#">Hosting</a></li> 
       <li><a href="#">Domain Names</a></li> 
       <li><a href="#">Broadband</a></li> 
     </ul> 
   </li>
   <li><a href="#">Contact Us</a> 
     <ul> 
       <li><a href="#">United Kingdom</a></li> 
       <li><a href="#">France</a></li> 
       <li><a href="#">USA</a></li> 
       <li><a href="#">Australia</a></li> 
     </ul> 
   </li> 
 </ul>

</body>
</html>

Alle hint og tips er velkomne;D

Anders Moen · 16. mars 2007

Du må i hvertfall starte med å ta bort position: absolute; tror jeg.

Og så kanskje float: left; på li'ene hvis det er valid og er mulig da.

16. mars 2007

Du har funnet den på alistapart.com

Bruker denne selv, uten problemer.

Den menyen du tenker på er nok Suckerfish Drop-Down!

Endret 16. mars 2007 av Slettet-xZFMnIz6

haugsand · 17. mars 2007

Ta en titt på Sons of Suckerfish.

Logg inn

lager en meny i CSS... HJELP!

Anbefalte innlegg

Richard87

Videoannonse

Anders Moen

Gjest Slettet-xZFMnIz6

haugsand

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer