Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Dropdown där överkategorierna är i olika färger

För att göra detta använder du dig alltså utav en stilmallskod & en kodmallskod per överkategori. Du stylar och döper om dem till vad din överkategori heter varje gång du lägger till en ny.

Stilmallskod:

#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: none; /*Ändra färgen på menyflikarna här*/ 	
color: #000000; /*Ändra färgen på texten här*/ 	
text-decoration: none;         
font-family: tahoma; /*Ä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 */ 	
} 
#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*/ 
opacity: 0.6; 	
border-bottom: 1px dotted #B3B3B3; 
border-left: 1px solid #fff; 
border-right: 1px solid #fff; 	
color: #000000; } /*ändra textfärgen på undermenyn här*/ 
#navbar li li a:hover { 	
background-color: #574948; } /*Ändra färgen när man håller musen över undermenyn*/
<ul id="navbar">
<li><a href="#">Överkategori</a>    
<ul> 
<li><a href="http://adresshär" rel="nofollow">Länk1</a></li>       
<li><a href="http://adresshär" rel="nofollow">Länk2</a></li> 
<li><a href="http://adresshär" rel="nofollow">Länk3</a></li> 
<li><a href="http://adresshär" rel="nofollow">Länk4</a></li>     
</ul> </li>  

<li><a href="#">Överkategori</a>    
<ul> 
<li><a href="http://adresshär" rel="nofollow">Länk1</a></li>       
<li><a href="http://adresshär" rel="nofollow">Länk2</a></li>     
</ul> </li>  

<li><a href="#">Överkategori</a>    
<ul> 
<li><a href="http://adresshär" rel="nofollow">Länk1</a></li>       
<li><a href="http://adresshär" rel="nofollow">Länk2</a></li> 
<li><a href="http://adresshär" rel="nofollow">Länk3</a></li> 
<li><a href="http://adresshär" rel="nofollow">Länk4</a></li> 
<li><a href="http://adresshär" rel="nofollow">Länk5</a></li>     
</ul> </li>
</ul>

Sanna tipsar:
Detta är absolut lättast om du gör en sak i taget. Gör en överskrift åt gången så att du inte blandar ihop koderna. Döp om stilmallskoden och ul id=”navbar” till det du vill (alltså ordet navbar ska bytas ut till det egna ord/namn på koden överallt). Styla det stycket och när du är färdig och nöjd; gå vidare med nästa.

Från filmen:

Olika färger på de olika länkarna i dropdownen

Hej.

Jag tänkte visa er idag hur man kan göra en dropdownmeny som har olika färger i sig. Jag vet inte om ni minns min förrförra bloggdesign, som jag hade i våras, där jag hade olika färger som streck under varje kategori och när man höll musen över en kategori så föll det ner, vad heter det, länkar som var med samma färg. Om man höll musen över länken så var det samma färg som det var på strecket under. På grafik till exempel så var det grönt och på portfolio, det var i och för sig bara en länk, men på photoshop så var det gult och shop så var det rosa osv.

Det finns säkert något mycket mycket bättre tips att göra detta eller något mycket bättre sätt att göra detta på, men jag är ju självlärd och kokar gärna ihop mina egna små idéer. Så det jag gjorde det var att jag skapade egna, vad heter det, dropdownkoder. Jag döpte helt enkelt om dem, så om vi går in och kollar min bloggtipsblogg här och så kollar vi på dropdown. Så går vi in i dropdownmenyn. Här finns ju då de här länkarna och då kallas den för navbar. Om vi klistrar in en sådan i stilmallen en gång så ska vi se, så att ni ser lite bättre.

Då ser ni att då står det #navbar på i princip alla här, men det jag gjorde, det var att jag döpte om de här till sina respektive länknamn. Den första då, den hette bloggdesign, då döpte jag om alla här till bloggdesign. Ni fattar vinken liksom. Allting ner hit, alla navbars döpte jag om till bloggdesign.

Så klistrade jag in det en gång till och så skrev jag istället då, vad heter det, vad hade jag där efter? Jo jag hade shop, så då döpte jag den till shop istället. Shop shop shop. Så jag gjorde så här på varje liksom att jag gjorde en kod för varje. Så allt som allt så hade jag en, två, tre, fyr, fem sex, sju, åtta. Åtta stycken såna här koder i min stilmall, som hette olika saker. Så istället för ordet navbar i varje sån här kod, som jag hämtade på min bloggtipsblogg, så döpte jag dem till vad länken skulle heta så att jag skulle hålla koll på dem.

Sedan så stylade jag helt enkelt det här så att de hade olika färger. Jag la en border-bottom på dem på 3 pixlar och så la jag olika färger på alla och sen så la jag också då på de här ul-länkarna, alltså de som hoppar ner, de ska vara, vad heter det, de ska vara i samma färg som den här border-bottom då. Jag stylade dem helt enkelt så att de såg olika ut allihopa.

Sedan när jag gick in i min kodmall så la jag in det som vanligt, men istället för att jag, jag tog ju den här kodmallskoden och så la jag den så och så hade jag en överkategori. Jag hade bara en överkategori per ul så i den här koden så finns det ju tre överkategori så jag bort de andra två. Så döpte jag alltså den här första då som hette bloggdesign, där ska ju ul id vara bloggdesign också. Som ni minns så döpte jag ju om alla mina #navbar till #bloggdesign och sen så hade jag ju ett avsnitt där jag döpte om alla till #shop och sen så hade jag ett avsnitt där jag döpte om alla till photoshop, ni fattar vinken liksom.

Sen så la jag helt enkelt alla mina länkar där under. Så jag hade liksom ett avsnitt per färg så jag hade åtta stycken såna här koder och åtta stycken såna här koder. Alla hade olika färger men till stor del så såg de exakt likadana ut men det var bara färgerna som skilde dem åt. När jag sedan la in kodmallskoden så döpte jag liksom ul id till de olika grejerna som jag hade döpt om min navbar till. Det var helt enkelt så jag gjorde. Jag har fått lite frågor på hur jag gjorde det så jag tänkte att jag kan besvara dem även om det är lite sent att göra det nu. Jag vet ju att det var flera som undrade när jag väl gjorde det.

Det var det som jag hade tänkt visa er idag. Får ni ha det så gott. Hej hej.

24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

2 comments

  1. SvaraLinnea

    Den korrekta koden för kodmallen verkar vara:

     
    <ul id="navbar">
    <li><a href="#">Överkategori</a> 
    <ul>
    <li><a href="http://adresshär" rel="nofollow">Länk1</a></li> 
    <li><a href="http://adresshär" rel="nofollow">Länk2</a></li>
    <li><a href="http://adresshär" rel="nofollow">Länk3</a></li>
    <li><a href="http://adresshär" rel="nofollow">Länk4</a></li>
    </ul> 
    </li>
    

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *