Kazooz - Creativity and Life - Dropdown meny ovanför headern

23 Oct

21:20

Dropdown meny ovanför headern

6kommentarer

Det är jätte många som frågar hur man gör en dropdown meny som ligger ovanför headern...så jag tänkte göra en liten guide här om det nu.

1. Denna koden ska läggas in längst ner i din stilmall.

#navbar { 	margin: 0; 	padding: 0; 	height: 1em; } #navbar li { 	list-style: none; 	float: left; } /* Ändra till right om du vill ha menyn till höger istället*/ #navbar li a { 	display: block; 	padding: 3px 8px; 	background-color: #cccccc; /*Ändra färgen på menyflikarna här*/ 	color: #fff; /*Ändra färgen på texten här*/ 	text-decoration: none;         font-family: verdana; /*Ändra typsnittet här*/         font-size: 10px; } /*Ändra storleken på texten här*/ #navbar li ul { 	display: none;  	width: 10em; /* Ändra bredden på undermenyn här */ 	background-color: #69f;} #navbar li:hover ul, #navbar li.hover ul { 	display: block; 	position: absolute; 	margin: 0; 	padding: 0;         z-index: 1; } #navbar li:hover li, #navbar li.hover li { 	float: none; } #navbar li:hover li a, #navbar li.hover li a { 	background-color: #889988; /*Ändra färgen på undermenyn*/ 	border-bottom: 1px solid #fff; 	color: #ffffff; } /*ändra textfärgen på undermenyn här*/ #navbar li li a:hover { 	background-color: #000000; } /*Ändra färgen när man håller musen över undermenyn*/

2. Denna koden ska in i kodmallen inom <div id="header"></div>
eftersom det är där vi vill placera menyn.

<ul id="navbar">   <li><a href="#" mce_href="#">Kategori 1</a>     <ul>       <li><a href="#" mce_href="#">Länk 1</a></li>       <li><a href="#" mce_href="#">Länk 2</a></li>       <li><a href="#" mce_href="#">Länk 3</a></li>     </ul> </li> <li><a href="#" mce_href="#">Kategori 2</a>    <ul>       <li><a href="#" mce_href="#">Länk 4</a></li>    </ul> </li> <li><a href="#" mce_href="#">Länk 5</a></li> <li><a href="#" mce_href="#">Kategori 3</a>    <ul>       <li><a href="#" mce_href="#">Länk 6</a></li>       <li><a href="#" mce_href="#">Länk 7</a></li>       <li><a href="#" mce_href="#">Länk 8</a></li>       <li><a href="#" mce_href="#">Länk 9</a></li>    </ul>			 </li> </ul>

3. Så nu har du placerat alla koder där dom ska vara, så nu är det dags att
gå tillbaka in i stilmallen och ner till koden du lade in där.
Och det du behöver göra nu är att ändra alla färger och storlekar till
ditt eget val.

Det du också behöver göra är att ändra och lägga till en liten kod snutt till,
eftersom du vill ju få den placerad ovanför headern och inte inuti.
På margin: 0; som finns längst upp i koden ska du nu ändra så du får en
negativ margin och att du säger till att det är från toppen,detta gör att du
trycker upp menyn i den höjd du vill ha den.
margin-top: -nummertal;
Du ska också lägga till margin-left: -nummertal;
andledningen till varför du ska göra det är för att du vill putta menyn till den plats du vill ha den.

UP DATE: Har fått frågor om hur man gör dropdownen transparent och
tänkte därför lägga in det här nu.
När det gäller att göra den transparent så måste man tänka på att texten också blir det
så det gäller att inte ha för mycket styrka på den, 70% brukar vara lagom.

#navbar ul { 	filter:alpha(opacity=70); 	-moz-opacity:0.7; 	-khtml-opacity: 0.7; 	opacity: 0.7; }

Det finns även en annan som gör att man får lite mer synlig text och det är därför man gör det transparenta lite på snedden.

Svårare än så här är det inte att få en dropdown meny ovanför headern :)

dropdown

Kommentera

6 kommentarer

Therese

25 Oct 2009 11:02

Hejsan jag undrar var och hur man ska sätta in koden om man vill ha den lite genomskinlig. Jag va inne och kollade på webdesignskolan.se och såg att man kunde göra den genomskinlig och sånt men jag fattade ingen av deras beskrivningar så jag undra om du kunde hjälpa mej lite ^^,

Ippa

18 Dec 2010 13:07

Hej! efter att ha letat så länge hittade jag äntligen den sorts menu jag ville ha, men jag undrade om du kunde hjälpa mig med en sak? jag har kategorier, och när jag klickar på dom i menyn så kommer bara senaste inlägget i den kategorin upp, om jag vill att alla inlägg jag någonsin skrivit i den kategorin ska komma upp, hur gör jag då? :) tacksam för svar :)

Kazooz - Creativity and Life

Dropdown meny ovanför headern

6 kommentarer

Therese

Ippa

emma

emma

Malin

Malin

Kommentera

Karin

Senaste inläggen

Arkiv

Länkar