Alternativ meny #1 - dropdown.
Vi kan väl alla komma överens om att den gamla vanliga menyn kan bli lite tråkig - så därför kommer jag att posta tre olika inlägg med guider på hur du kan byta ut den mot alternativa menyer. I det här inlägget kommer jag att förklara hur du lägger till en dropdown meny.
Till den här guiden kommer jag att använda mig av den här gratisdesignen - men ni kan använda eran egen design eller någon annan gratisdesign (Designa din blogg har över 100 designer som ni kan ladda ner gratis och använda på era bloggar!) om ni hellre vill det.
Men nu till guiden!
Börja med att logga in på din blogg och klicka dig vidare till stilmallen.
Klistra in den här koden längst ner i stilmallen: (obs. kopiera med ctr + c)
Lägg den här koden precis under föregående kod:
Klicka dig vidare till kodmallar och klistra in den här koden vars ni vill ha menyn. Jag vill ha den i headern så jag kommer att klistra in den under <div id="header"> </div>
Så här ser det ut nu - ni bör ha något liknande:
Nu när menyn är inlagg ska vi konfigurera den. Vi börjar i kodmallen.
Börja med att ersätta Meny länk, Meny namn 2 och Meny namn 3 mot dina egna menyer. Ersätt även länkadresserna med dina egna länkadresser samt länk namnen med dina egna länknamn.
Ett exempel:
Nu när länkarna är som dom ska - så ska vi gå vidare till stilmallen. Kommer ni ihåg Menu2 koden som vi la in tidigare? Leta fram den. Det ni ska ändra på är det här:
Ni får testa er fram tills menyn är där ni vill att den ska vara.
Gå vidare till Navbar koden som ni la in tidigare.
Sen var det klart! Det här är mitt färdiga resultat:
Till den här guiden kommer jag att använda mig av den här gratisdesignen - men ni kan använda eran egen design eller någon annan gratisdesign (Designa din blogg har över 100 designer som ni kan ladda ner gratis och använda på era bloggar!) om ni hellre vill det.
Men nu till guiden!
Börja med att logga in på din blogg och klicka dig vidare till stilmallen.
Klistra in den här koden längst ner i stilmallen: (obs. kopiera med ctr + c)
#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*/
#navbar {
margin: 0;
padding: 10;
height: 1em;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 2px 5px;
background-color: #;
color: #000;
text-decoration: none;
font-family: arial;
font-size: 10px;
}
#navbar li ul {
display: none;
width: 10em;
}
#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: #fff;
opacity: 1.0;
border-bottom: 0px solid #fff;
border-left: 0px solid #fff;
border-right: 0px solid #fff;
color: #000000;
}
#navbar li li a:hover {
background: #fff;
color: #fff;
border-bottom: 1px dashed #fff;
}
Lägg den här koden precis under föregående kod:
#menu2 {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background: none; no-repeat left bottom;
z-index: 80;
position:absolute;
top:26px;
left:165px;
width: 500px;
border: none;
/* opacitet for IE */
filter:alpha(opacity=85);
/* opacity: 0.85; filter: alpha(opacity=85); */
/* opacitet CSS3 standard */
opacity:0.85;
/* opacitet for Mozilla */
-moz-opacity:0.85;
}Klicka dig vidare till kodmallar och klistra in den här koden vars ni vill ha menyn. Jag vill ha den i headern så jag kommer att klistra in den under <div id="header"> </div>
<div id="menu2">
<ul id="navbar"></br></br>
<li><a href="http://dinlänk.blogg.se">Meny länk</a>
<li><a href="#">Meny namn 2</a>
<ul>
<li><a href="http://dinlänk.blogg.se">Länk namn</a></li>
<li><a href="http://dinlänk.blogg.se">Länk namn</a></li>
<li><a href="http://dinlänk.blogg.se">Länk namn</a></li>
</li>
</ul></li>
<li><a href="#">Meny namn 3</a>
<ul>
<li><a href="http://dinlänk.blogg.se">Länk namn</a></li>
<li><a href="http://dinlänk.blogg.se">Länk namn</a></li>
<li><a href="http://dinlänk.blogg.se">Länk namn</a></li>
</ul></li>
</li></ul></div>
Så här ser det ut nu - ni bör ha något liknande:
Nu när menyn är inlagg ska vi konfigurera den. Vi börjar i kodmallen.
Börja med att ersätta Meny länk, Meny namn 2 och Meny namn 3 mot dina egna menyer. Ersätt även länkadresserna med dina egna länkadresser samt länk namnen med dina egna länknamn.
Ett exempel:
<div id="menu2">
<ul id="navbar"></br></br>
<li><a href="http://bubblewrappedheart.se">Hem</a>
<li><a href="#">Arkiv</a>
<ul>
<li><a href="http://bubblewrappedheart.se/2012/january/">Januari</a></li>
<li><a href="http://bubblewrappedheart.se/2012/february/">Februari</a></li>
<li><a href="http://bubblewrappedheart.se/2012/march/">Mars</a></li>
</li>
</ul></li>
<li><a href="#">Kategorier</a>
<ul>
<li><a href="http://bubblewrappedheart.se/category/bocker.html">Böcker</a></li>
<li><a href="http://bubblewrappedheart.se/category/musik.html">Musik</a></li>
<li><a href="http://bubblewrappedheart.se/category/design.html">Design</a></li>
</ul></li>
</li></ul></div>
Nu när länkarna är som dom ska - så ska vi gå vidare till stilmallen. Kommer ni ihåg Menu2 koden som vi la in tidigare? Leta fram den. Det ni ska ändra på är det här:
top:26px; ‹- talar om hur långt ifrån toppen menyn ska vara.
left:165px; ‹- talar om hur långt ifrån vänster menyn ska vara.
Ni får testa er fram tills menyn är där ni vill att den ska vara.
Gå vidare till Navbar koden som ni la in tidigare.
#navbar {
margin: 0;
padding: 10;
height: 1em;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 2px 5px;
background-color: #;
‹- Ändra färgen på menyflikarna.
color: #000; ‹- Ändra färgen på menylänkarna.
text-decoration: none;
font-family: arial; ‹- Ändra typsnittet på menylänkarna.
font-size: 10px; ‹- Ändra storleken på menylänkarna.
}
#navbar li ul {
display: none;
width: 10em; ‹- Ändra bredden på undermenyn.
}
#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: #fff; ‹- Ändra färgen på undermenyn.
opacity: 1.0;
border-bottom: 0px solid #fff; ‹- Ändra färgen på border.
border-left: 0px solid #fff; ‹- Ändra färgen på border.
border-right: 0px solid #fff; ‹- Ändra färgen på border.
color: #000000; ‹- Ändra färgen på länkarna i undermenyn.
}
#navbar li li a:hover {
background: #fff; ‹- Ändra bakgrunden vid mouseover.
color: #fff; ‹- Ändra färgen vid mouseover.
border-bottom: 1px dashed #fff; ‹- Ändra färgen på border vid mouseover.
}
Att tänka på innan du kommenterar
Allmänt Din kommentar granskas innan den publiceras. Kom ihåg att ditt ip - nummer loggas. Har du ingen blogg så svarar jag här. Design Jag svarar inte på frågor om hur jag gör mina designer. Övriga designfrågor skickas till min mejl. Jag tar emot beställningar av designer. Kontakta mig för mer info. Jag vill inte ha Kommentarer om någon gratissida. Reklam för din blogg, tävlingar, frågestunder osv. Publiceras inte Kommentarer som innehåller personligt påhopp. Kommentarer som innehåller något stötande. Kommentarer som innehåller något rasistiskt.
