Jennys Modemix

I min blogg kan ni hitta allt som har med mode och göra - shoppingtips, smycken, väskor och en STOR förkärlek till SKOR. Ni hittar även bloggtips, bloggdesign och mycket mycket mer.

Horisontell dropmeny ovanför headern

Publicerad 2009-12-29 15:56:19 i BloggTips

Jag har fått frågan om hur man gör en sån meny jag har ovanför min header.

Så jag tänkte visa hur man gör.



1. Gå in i din stilmall och lägg till följande kod längst ner.




#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. Gå nu in i dina kodmallar, och lägg in följande kod där du vill ha din meny.
Jag har lagt min precis under  <div id="wrapper">.  Men man kan lägga den var man vill.


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


Börja med att lägga in adressen till de sidor som du länkar till, det gör du i denna kod:

<li><a href="#">Länk1</a></li>

Byt ut "#" mot adressen och byt ut "Länk 1" till det namn du vill att länken ska ha.

Kommentarer

Postat av: Linnea

Publicerad 2009-12-29 18:07:14

Ohh..Tack så jättemycket!!! Jag har pysslat med detta i timmar men de blir fel men kommer snart fixa de. Du är väldigt snäll som tipsar om saker för andra och förlåt om jag frågar igen men jag vill ha en så snygg blogg som du har hur har du gjort boxarna på sidorna av bloggen ?

Postat av: Rita

Publicerad 2009-12-29 20:58:19

Tack för att du delar med dig, det här ska jag försöka mig på, det är ju så snyggt =)

Kram/Rita

Postat av: Anna

Publicerad 2009-12-30 00:24:40

Fett snygg! Jag ndrar bara om du kan göra en header också? Om du vill??

Postat av: GÖZDE;

Publicerad 2009-12-30 10:53:52

Åh tacktacktack :D

förlåt för sent svar!

Postat av: Rita

Publicerad 2010-01-04 20:18:03

Tack för den lättförståeliga instruktionen. Den var superbra, så nu har jag lagt in en sån header. Naturligtvis har jag också talat om var den kommer ifrån =)

Tack återigen!

Kram/Rita

Postat av: Felicia

Publicerad 2010-02-14 18:52:10

Jag gör exakt som det står men det blir fel :( jag får sån punkt lista. Vad ska jag göra ?

Postat av: fanny

Publicerad 2010-02-19 13:49:15

hejhej!

jag har fått upp dom kategorierna där uppe och länkarna men jag kan inte byta namn på dem. jag vet inte hur man gör, hade du kunnat hjälpa mig att ändra namn ?

för jag vill ha andra namn där uppe, så man kan trycka till bilder m.m. men adda mig på msn ': [email protected] , så om du vill, kan du hjälpa mig? :)

Postat av: Linn ♥

Publicerad 2010-12-02 21:46:12

hej :]



Jag får det inte att funka på min blogg?

Det blir bara knas, skulle du kunna hjälpa mig att fixa menyn ovanför headern? :D

Postat av: Simon

Publicerad 2011-01-03 22:11:56

Tack så jätte jätte mycket, det hjälpte mig verkligen..

Postat av: Simon

Publicerad 2011-01-03 22:13:29

Hej!

Tack så jätte jätte mycket för hjälpen!

Har letat efter detta jätte länge, och nu äntlingen.

Haft en bra dag ?

Postat av: Anonym

Publicerad 2011-05-13 20:50:19

Jag får inga menyer utan punkter mera, hur ska jag göra? :(

Postat av: Elin

Publicerad 2011-10-02 11:10:55

Tack så himla mkt ;* Jag blev verkligen glad när jag såg det funka <3

Postat av: Sofie

Publicerad 2012-02-23 19:30:23

Tack så sjukt mkt!!! :D

Men hur får man den att hamna i mitten? För när jag ändrar "float-left" till "float-center" blir allt bara fel.

Help? :)

Kram!

Postat av: Jossan ♥

Publicerad 2012-04-01 22:49:44

det funkar inte för mig :(

Postat av: Linda

Publicerad 2012-07-23 22:43:58

Men om man till exempel vill ha arkivet där uppe som en kategori, hur får man månaderna att uppdateras automatiskt?

Jag har gjort som du visat och lyckats med namn och att den länkar, men om man vill ta bort menyn helt på sidan och få den att uppdatera av sig självt, hur lyckas man med det?

Kommentera inlägget

Publiceras ej

Om

Min profilbild

SweetnCute

I min blogg kan ni hitta allt som har med mode och göra - shoppingtips, smycken , väskor och en STOR förkärlek till SKOR. Ni kan även hitta bloggdesign hjälp & tips, ladda ner gratis bloggdesign, beställa personliga bloggdesign och mycket mycket mer

Senaste inläggen

Kategorier

Arkiv

Prenumerera och dela