Kazooz - Creativity and Life

23 Oct

21:20

Twitter Facebook

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

0Gilla

Kazooz - Creativity and Life

Dropdown meny ovanför headern

Karin

Senaste inläggen

Arkiv

Länkar