Bloggstyle.se - Ändra utseende på horisontell och dropdown meny

HOME VIDEOHJÄLP GRATIS MALLAR TÄVLINGAR PORTFOLIO BANNERS

INFO KONTAKT TRANSLATION

POPULÄRA VIDEOTIPS

Ändra utseende på horisontell och dropdown meny

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 :)

Date: 2010-03-25 Clock: 15:42:09

KOMMENTARER

Postat av: Ann Catrine

Hej!
Tack för dina tydliga tips!!
Hur ändrar man färg på länkar i ett inlägg?
Om jag t ex länkar till en annan blogg skulle jag vilja ha just länkningen lite utmärkande färgmässigt...

2010-03-25 / 17:17:21
URL: http://mormormu.blogg.se/

Postat av: Nadine

vem vann din tävling ?<3

2010-03-25 / 19:02:09

Postat av: ThinkerManda

sv: Tack (för att du skrev det här inlägget)! Men, det blir liksom inte bra till min övriga design, headern hamnar liksom lite konstigt.
So I wonder, vet du något tips på någon gratisdesign där en sådan (horisontell/dropdown) meny liksom funkar?

2010-03-25 / 19:46:15
URL: http://thinkermanda.blogg.se/

Postat av: Licca

Asså jag menar färgen på min meny den som man har på sidan till svart istället för rosa?

2010-03-26 / 19:02:23
URL: http://liccaa.blogg.se/

Postat av: Yasine

Hej, Jag skulle vilja ha en egen bild bakom min dropdown meny, men när jag gör det så händer inget? Finns det nåt annat sätt att göra för att få en annan bild bakom?
Tacksam för svar :)

2010-04-08 / 08:53:31
URL: http://yasine.blogg.se/

Postat av: Linda

Hur justerar man den då? Har provat mig fram, men det verkar inte vilja fungera..

2010-07-13 / 00:42:55
URL: http://lindadoos.blogg.se/

Postat av: linnea

för mig syntes det inte alls, hur mycket jag än ändrade.

2011-03-10 / 15:05:24
URL: http://lilinnea.webblogg.se/

Postat av: Nostariel

hur gör man för att få menyn i mitten? :D

http://nostariel.blogg.se/new

2011-03-10 / 17:10:34
URL: http://nostariel.blogg.se/

Postat av: Nostariel

jag undrar hur man blir av med de vita strecken under,mellan och på sidan?
behöver svar snabbt..

kolla hur jag menar här (kompisars blogg);
http://emmiebeatrice.blogg.se

2011-03-21 / 15:26:42
URL: http://nostariel.blogg.se/

Postat av: Erika

Hej! Jag tänkte höra om du har någon aning om varför hela bloggen flyttar i sidled när jag tar bort sidomenyn och byter ut den mot denna horisontella meny? Det är otroligt irriterande och jag har försökt ändra det på tusen olika sätt, men det går inte :( Har du någon aning om vad jag gör fel och hur jag kan lösa det? :)

2011-04-11 / 17:43:28
URL: http://erikahej.blogg.se/testblogg

Postat av: josephine- tävlingar på bloggen!

när jag ändrar bild blir det bara svart vad gör jag för fel?? :)

2011-04-23 / 09:25:45
URL: http://twinblogg.blogg.se/

Postat av: elin

Hur kan jag flytta min drop down meny som jag vill, alltså placera den där jag vill :)

2011-05-27 / 16:20:54
URL: http://byelin.blogg.se/

Postat av: Vickan & Hedvig

Hej, hur får man bort att på meny under rubrikerna så är de understruket. Hur får man bort det? Tacksam för svar :)
/Vickan

2011-06-30 / 16:47:33
URL: http://cinca.blogg.se/

Postat av: Alice [FOTO]

Kan man ha en bild som bakgrund? typ som en liten ruta elr?

2011-07-02 / 08:36:51
URL: http://bilderbyalice.blogg.se/

Postat av: sarah

Hej! Om du har tid så kan du hjälpa mej med dropdownmenyn? Jag undrar nämligen hur man kan få den ovanpå headern, ungefär som denhär tjejen har fixat --> http://thingsyouremember.blogg.se ? :) tacksam för svar!

2011-08-03 / 19:27:51

Postat av: † Mejva

Jag försöker ändra avståndet mellan flikarna men det vill inte funka som jag vill. Jag vill ha mera avstånd mellan rubrikerna men det blir avstånd på texten i dropdown:en när man har musen över. Vet du hur jag fixar detta?

2011-09-02 / 16:32:25
URL: http://mejva.blogg.se/

Postat av: vendela - fotoblogg

hej! hur gör jag när jag vill ha en annan bakgrund som en flik? Det funkar inte utan min vanliga bakgrund syns!

2011-12-04 / 12:13:18
URL: http://vvanilla.blogg.se/

Postat av: gabriella

hur får man menyn i mitten?:)

2012-02-27 / 21:44:58
URL: http://hgm.blogg.se/

Postat av: Mia Broman

Hur gör jag för att få en smal linje mellan flikarna i headern? Ungefär som Border-bottom fast alltså ungefär såhär : (länk) | (länk)... Tacksam för svar!!

2012-05-19 / 12:35:38
URL: http://miabroman.blogg.se/