Bloggdesign - horisontell meny med dropdown.
Horisontell meny med dropdown. (förslagsvis över eller under headern)
I det här inlägget tipsar jag om hur man kan göra en dropdown meny på enklaste sätt.
1. Gå in i din stilmall och lägg till följande kod längst ner i stilmallen.
2. Spara din stilmall och gå in på din kodmall. Lägg till koden nedan i din kodmall där du vill ha den.
Förslagsvis under :
<div id="wrapper">
3. Spara kodmallen, och kolla på din blogg att menyn funkar bra. Sen är det dags att lägga till länkarna.
4. Börja med att lägga in adressen till de länkar du vill använda. Det gör du i den här koden: <li><a
href="#">Länk1</a></li>
Byt ut # mot adressen och Länk1 mot namnet du vill att din länk ska ha.
5. Spara din kodmall, och gå nu in i din stilmall.
Längst ner i stilmallen där du la till en kod, kan du nu modifiera texten och utseéndet på länkarna osvosv.
OBS: Koder blir annorlunda när den ligger i en box, så du får göra mellanslag i texten (#navbar) så som jag gjort nedan!
#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: #EAE2E2; /*Ändra färgen på menyflikarna här*/
color: #010101; /*Ändra färgen på texten här*/
text-decoration: none;
font-family: ARIAL; /*Ä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: #FFFFFF; /*Ändra färgen på undermenyn*/
border-bottom: 1px solid #fff;
color: #010101; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
background-color: #EAE2E2; } /*Ändra färgen när man håller musen över undermenyn*/
#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: #EAE2E2; /*Ändra färgen på menyflikarna här*/
color: #010101; /*Ändra färgen på texten här*/
text-decoration: none;
font-family: ARIAL; /*Ä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: #FFFFFF; /*Ändra färgen på undermenyn*/
border-bottom: 1px solid #fff;
color: #010101; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
background-color: #EAE2E2; } /*Ändra färgen när man håller musen över undermenyn*/
Kommentarer
Trackback
