Ändra utseende på horisontell och dropdown meny
19 kommentarer /
Kommentera här!
För att ändra färg, teckensnitt och övrigt på horisontell och dropdown meny, gör du detta i stilmallen. För att skapa en dropdown meny [Länk]
Gå in i din stilmall och bläddra ner till denna koden:
#navbar {
margin: 0;
padding: 0;
height: 1em; }/*Hur hög menyn ska vara ändra 1 */
#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-left:0px; /*Hur stort avstånd det är mellan meny flikarna */
padding-right:0px; /*Hur stort avstånd det är mellan meny flikarna */
padding-top:5px; /*Hur hög menyn ska vara*/
padding-bottom:0px; /*Hur hög menyn ska vara */
background-color: none; /*Ändra färgen på menyflikarna här, byt ut none; till #333333; */
color: #000000; /*Ä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: 11em; /* Ändra bredden på undermenyn här */
}
#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å bakgrund på undermenyn*/
border-bottom: 1px dotted #f0abc1; /*Ändra kanten runt om undermenyn */
color: #696969; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
color: #ffffff; /*Färg på texten */
background-color: #898888; } /*Ändra bakgrund när man håller musen över undermenyn*/
För att ändra färg och veta vilken färg du vill ha, kan du antingen använda photoshop eller sök på html färger på google. Ändra sifferkoden till den färg du vill ha exempel: #333333
Om du istället vill lägga in en egen bakgrund, leta upp denna koden:
background-color: none;
Ändra så det ser ut så här:
background-color: url (länk från din bild här);
Har ni några frågor är det bara att skriva :)
Gå in i din stilmall och bläddra ner till denna koden:
#navbar {
margin: 0;
padding: 0;
height: 1em; }/*Hur hög menyn ska vara ändra 1 */
#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-left:0px; /*Hur stort avstånd det är mellan meny flikarna */
padding-right:0px; /*Hur stort avstånd det är mellan meny flikarna */
padding-top:5px; /*Hur hög menyn ska vara*/
padding-bottom:0px; /*Hur hög menyn ska vara */
background-color: none; /*Ändra färgen på menyflikarna här, byt ut none; till #333333; */
color: #000000; /*Ä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: 11em; /* Ändra bredden på undermenyn här */
}
#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å bakgrund på undermenyn*/
border-bottom: 1px dotted #f0abc1; /*Ändra kanten runt om undermenyn */
color: #696969; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
color: #ffffff; /*Färg på texten */
background-color: #898888; } /*Ändra bakgrund när man håller musen över undermenyn*/
För att ändra färg och veta vilken färg du vill ha, kan du antingen använda photoshop eller sök på html färger på google. Ändra sifferkoden till den färg du vill ha exempel: #333333
Om du istället vill lägga in en egen bakgrund, leta upp denna koden:
background-color: none;
Ändra så det ser ut så här:
background-color: url (länk från din bild här);
Har ni några frågor är det bara att skriva :)
♥ Till toppen
Category:
Ändra utseende på horisontell och dropdown meny
Date:
2010-03-25
Clock:
15:42:09
Category:
Ändra utseende på horisontell och dropdown meny
Date:
2010-03-25
Clock:
15:42:09
