Drop down meny - egen

Først limer du denne koden øverst i stilsettet, det kommer ikke noen endringer på bloggen før du har limt inn kodene som skal i malen.

#meny {
float: right;
width: 625px;
padding: 20px 0px 0px 0px;
margin-top: 0px;
}
#navbar {
margin-top: auto;
margin-left: auto;
}
#navbar li {
list-style: none;
float: left;
height: 20px;
}
#navbar li a {
display: block;
padding: 5px 5px 5px 5px; /*mellomrom mellom knappene*/
background-color: #ffffff; /*bakgrunnsfarge på hele menyen*/
color: #695855; /*farge på skriften i menyen*/
text-decoration: none;
font-family: calibri; /*skrifttype*/
font-size: 11px; /*skriftstørrelse*/
font-weight: normal;
text-transform: none;
}
#navbar li ul {
display: none;
width: 173px; /*bredden på menyknappene som kommer ned*/
background-color: #ffffff; /*fargene på menyen som kommer ned*/
}
#navbar li ul li {
margin: 5px 0px 0px 0px;
}
#navbar li a:hover {
font-weight: normal;
}
#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 ul li a{
padding: 4px 21px 4px 15px;
background-color: transparent;
color: #4e4e4e; /*farge på linkene i menyen som kommer ned*/
}
#navbar li ul li a:hover {
background-color: #808080; /*bakgrunnsfarge når man holder over knappene som kommer ned*/
color: #ffffff; /*farge*/
}

 

Denne koden skal i malene, alle sammen! 

<div id="meny">
<ul id="navbar">
<li><a href="#">Navn på knapp</a>
<ul>
<li><a href="URL">LINK</a></li>
<li><a href="URL">LINK</a></li>
<li><a href="URL">LINK</a></li>
<li><a href="URL">LINK</a></li>
</ul></li>
<li><a href="#">Navn på knapp</a>
<ul>
<li><a href="URL">LINK</a></li>
<li><a href="URL">LINK</a></li>
<li><a href="URL">LINK</a></li>
<li><a href="URL">LINK</a></li>
</ul></li>
<li><a href="#">Navn på knapp</a>
<ul>
<li><a href="URL">LINK</a></li>
<li><a href="URL">LINK</a></li>
<li><a href="URL">LINK</a></li>
<li><a href="URL">LINK</a></li>
</ul></li>
<li><a href="#">Navn på knapp</a>
<ul>
<li><a href="URL">LINK</a></li>
<li><a href="URL">LINK</a></li>
<li><a href="URL">LINK</a></li>
<li><a href="URL">LINK</a></li>
</ul></li>
</ul>
</div>

Trykk Ctrl og F samtidig og søk på header så finner du dette, lim den under om du vil ha den under eller lim den over om du vil det.




Bytte ut, legge til eller fjerne linker

<li><a href="#">Navnet som vises i menyen</a>
<ul>
<li><a href="URL"> Navnet på knapp som kommer ned</a></li>
<li><a href="URL"> Navnet på knapp som kommer ned </a></li>
<li><a href="URL"> Navnet på knapp som kommer ned </a></li>
<li><a href="URL"> Navnet på knapp som kommer ned </a></li>
</ul></li>


Om du vil ha mindre, tar du bare bort noen, om du vil ha flere knapper som kommer ned legger du til:

  <li><a href="URL"> Navnet på knapp som kommer ned </a></li>


Om du vil ha færre knapper bortover, tar du bort dette, og vil du ha flere legger du til:

<li><a href="#">Navnet som vises i menyen</a>
<ul>
<li><a href="URL"> Navnet på knapp som kommer ned</a></li>
<li><a href="URL"> Navnet på knapp som kommer ned </a></li>
<li><a href="URL"> Navnet på knapp som kommer ned </a></li>
<li><a href="URL"> Navnet på knapp som kommer ned </a></li>
</ul></li>


Om du vil ha bare en link uten underknapper, som f.eks forsiden og html/css hos meg, tar du bare bort det under, slik:

<li><a href="#">Navnet som vises i menyen</a>


Bare spør om det er noe!
 

Malene

13.05.2011 kl.16:47
Hvor skal disse skrives? :p <3 Kjempe fin blogg ivartfall :)

Malene

13.05.2011 kl.17:29
Jeg fikk det til! :)

Da er det bare en ting jeg lurer på!;)

Hvordan får jeg innleggene på de forskjellige menyene?

Liksom hvordan får jeg skrevet et innlegg på feks. om meg, forsiden osv.

Lill-Marte Sætre Kleppe

13.05.2011 kl.18:44
Malene: her er en guide: http://lmsk91.blogg.no/1301844409_linke_til_en_kategori.html

så bare kopierer du linken til innlegget og limer den inn der den skal :)

Malene

13.05.2011 kl.19:27
Takk (:

Lill-Marte Sætre Kleppe

13.05.2011 kl.19:30
Malene: Bare hyggelig :)

Sigrid Mathea

25.05.2011 kl.15:46
Hvordan ordne menyen sånn fint? Med ikoner og rammer, og hvor store knappene skal være osv?

Lill-Marte Sætre Kleppe

25.05.2011 kl.15:52
Sigrid Mathea: Størrelsen på knappene kommer jo av seg selv, kommer jo an på lengden på ordet :)

#navbar li ul { , under der er det som kommer ned, der kan du legge til border og runde kanter, alle kodene finner du her på bloggen min :) for å få ikoner fremfor , se dette bildet: http://i53.tinypic.com/mb204w.jpg , det går ikke an å legge inn koder i kommentarer så må bruke bilde hehe! Dette limer du forann i malene på de linkene du vil ha det på :)

05.06.2011 kl.13:19
Når man trykker innpå en av kategoriene, så forsvinner menyen :o. Hva må jeg gjøre? :s

Lill-Marte Sætre Kleppe

05.06.2011 kl.15:51
Anonym: Om du hadde lest under kommentarfeltet, så hadde du funnet ut at jeg ikke svarer spørsmål fra Anonyme, men du må lime koden inn i alle malene..

StineCassandraPollen

07.08.2011 kl.04:23
Må jeg lage knapp selv eller kommer det når jeg legger det inn? God hjelp btw :)

StineCassandraPollen

07.08.2011 kl.04:59
Awesome, jeg klarte det :) Men hvordan får jeg det større, litt lengre fra hverandre og under headern? Jeg tok html'n under der det stod header, men fikk den fortsatt over^^

Lill-Marte Sætre Kleppe

07.08.2011 kl.12:28
StineCassandraPollen: Bare å endre på margin-top, - er lengre opp og uten noe fremfor tallet er lenger ned :) For å få den lengre fra hverandre endrer du på padding, det står noe lignende sånn: 0px 5px 0px 5px eller noe, ta på mer der det står 5 :)

Lill-Marte Sætre Kleppe

07.08.2011 kl.12:29
StineCassandraPollen: Det kommer når legger den inn :)

StineCassandraPollen

26.02.2012 kl.06:44
Hvordan får menyen mer på midten? :)





leser bloggen nå!

Norske blogger Blogglisten








Pyntdeg.no



hits