Gå til innhold

meny som fungerer uansett browser

ilpostino

Anbefalte innlegg

ilpostino

ilpostino

Skrevet
Skrevet (endret)

er det noen som vetom en meny i javascript/css som fungerer i alle browsere uten å lage noe bøll?

 

hadde funnet den perfekte menyen ,men neida... den funker selvfølgelig ikke i IE

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

 

<head>

<title>Suckerfish Dropdowns</title>

 

<style type="text/css">

 

body {

font-family: arial, helvetica, serif;

}

 

ul { /* all lists */

padding: 0;

margin: 0;

list-style: none;

}

 

li { /* all list items */

float: left;

position: relative;

width: 10em;

}

 

li ul { /* second-level lists */

display: none;

position: absolute;

top: 1em;

left: 0;

background-color: #FFFFFF;

}

 

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */

top: auto;

left: auto;

}

 

li:hover ul, li.over ul { /* lists nested under hovered list items */

display: block;

}

 

#content {

clear: left;

}

 

</style>

 

<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes;

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";

}

node.onmouseout=function() {

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

}

}

}

}

}

window.onload=startList;

 

//--><!]]></script>

 

</head>

 

<body>

 

<ul id="nav">

 

<li>Sunfishes

<ul>

<li><a href="">Blackbanded sunfish</a></li>

<li><a href="">Shadow bass</a></li>

<li><a href="">Ozark bass</a></li>

<li><a href="">White crappie</a></li>

</ul>

</li>

 

<li>Grunts

<ul>

<li><a href="">Smallmouth grunt</a></li>

<li><a href="">Burrito</a></li>

<li><a href="">Pigfish</a></li>

</ul>

</li>

 

<li>Remoras

<ul>

<li><a href="">Whalesucker</a></li>

<li><a href="">Marlinsucker</a></li>

<li><a href="">Ceylonese remora</a></li>

<li><a href="">Spearfish remora</a></li>

<li><a href="">Slender suckerfish</a></li>

</ul>

</li>

 

</ul>

 

<div id="content">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p>

</div>

 

</body>

 

</html>

Endret av ilpostino
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
rønning

rønning

Skrevet
Skrevet (endret)

sett opp menyen slik

<ul id="menu">

<li><a href="#">Hjem</a></li>

<li><a href="#">Galleri</a></li>

<li><a href="#">Kontakt</a></li>

</ul>

 

så setter du css sånn:

 

ul#meny li a {

background: #ddd;

color: #fff;

}

 

og en slik

 

ul#meny li a:hover {

background: #666;

}

 

i dette tilfellet skifter bakgrunnsfarge fra #ddd til #666

her er det bare fantasien som begrenser hva du kan gjøre..

Endret av rønning
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...