Navbar med drop-down - hvordan endre bredde på drop-down?

edgarh · 4. august 2013

God dag, alle sammen!

Jeg prøver å lage en rimelig enkel navbar, som skal være 400px bred totalt med drop-down på mouse-over. Jeg sliter da litt med js-delen av den(tror jeg), da jeg ønsker at drop-down skal være like bred som hele navbaren ved mouse-over - og at denne drop-down skal være delt inn i tre div-er.

PHP-koden:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>EDGARS FANTASTISKE NAVBAR</title>

<link rel="stylesheet" href="css/style.css"/>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="js/jquery-easing.1.3.js" type="text/javascript"></script>
<script src="js/navbar.js" type="text/javascript"></script>
</head>
<body>
<p>EDGARS FANTASTISKE NAVBAR</p>
<ul>
	<li class="blue">
		<p><a href="#">Mat & Butikk</a></p>
		<p class="subtext">HEIM</p>
		<!-- # Fane1, Boks1 osv... # -->
		<div id="box1.1">
		 TESTING3
		</div>
		<div id="box1.2">
		 TESTING2
		</div>
		<div id="box1.3">
		 TESTING3
		</div>
	</li>
	<li class="blue">
		<p><a href="#">Næringsliv</a></p>
		<p class="subtext">BESKRIVELSE</p>
	</li>
	<li class="blue">
		<p><a href="#">Hva skjer?</a></p>
		<p class="subtext">KONTAKT</p>
	</li>
	<li class="blue">
		<p><a href="#">Rutetider</a></p>
		<p class="subtext">RUTE</p>
	</li>  
</ul>
</body>
</html>

CSS-koden:

body{
font-family:"Lucida Grande", arial, sans-serif;
background:#F3F3F3;
float-left:auto;
float-right:auto;
}

ul{
margin:0;
padding:0;
float-left:auto;
float-right:auto;
}

li{
width:110px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
#boks1.1
{
width:133,3333333333333px;
float-left;
}
#box1.2
{
width:133,3333333333333px;
float-right;
}

#box1.3
{
width:133,3333333333333px;
float-right;
}
a{
color:#FFF;
text-decoration:none;
}

p{
padding:0px 5px;
}

.subtext{
	padding-top:15px;
	padding-bottom:15px;
}

/*Menu Color Classes*/
.gul{background:#FBC700;}
.blue{background:#0000FF;}

Og til slutt javascripten:

$(document).ready(function(){

//When mouse rolls over
$("li").mouseover(function(){
	$(this).stop().animate({height:'200px'},{queue:false, duration:600})
});

//When mouse is removed
$("li").mouseout(function(){
	$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

});

Noen som veldig raskt ser hva jeg mangler eller har gjort feil? Får ikke endra på annet enn høyde/bredde på hver <li>...

På forhånd takk for all assistanse!

The Stig · 5. august 2013

Uten at jeg er helt sikker på at det er problemet ditt; er det generelt en dårlig idé med noe annet enn tall og bokstaver i identifikatorer og klassenavn. I tillegg anbefaler jeg at du i tillegg legger opp koden din på jsfiddle.net, da blir det mye lettere å hjelpe.

Redigert: Ser forresten en enkel fiks, ettersom det er litt rot med block- og inline elementer om en annen, sett bredden på klassen du kaller "blue" i stedet for hvordan du har gjort det nå.

Endret 5. august 2013 av The Stig

Insula · 5. august 2013

http://jsfiddle.net/F2PRs/

Er det noe sånn du er ute etter? Fjernet jQuery triggeren fordi menyen kan fint åpnes med CSS.

Logg inn

Navbar med drop-down - hvordan endre bredde på drop-down?

Anbefalte innlegg

edgarh

Lenke til kommentar

Videoannonse

The Stig

Lenke til kommentar

Insula

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer