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

Horisontell meny fast i toppen

Hej hej och välkomna till mitt första inlägg här! Nu till mitt första inlägg som kommer handla om hur man gör en meny som sitter fast i toppen, som dessutom inte tar slut eller blir nerputtad av blogg.se’s reklam banner i toppen. Denna fungerar överallt där man kan koda själv.

När jag letade efter hur man gjorde en horisontell meny som faktiskt satt fast överst på sidan och inte blev nerknuffad av blogg.se’s reklam, hittade jag ingenting. Men nu har jag ju en sådan meny så jag tänkte idag dela med mig av hur man gör en horisontell meny som sitter fast i toppen av sidan. Jag har skrivit in hur ni kan ändra lite små, enkla saker i koderna också.

Steg 1: Klistra in följande kod vart du vill i stilmallen

 

#menytop{ /*Själva menyn, som själva dropdown menyn ligger i. Som en wrapper för dropdownen*/
margin-left: 0px;
width: auto;
height: 40px;
padding: 0px;
background-color: #f1f1f1;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
opacity: 1;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#dropdown {
margin-left: 30px;
margin-top: 0px;
padding: 10px;
}

#dropdown li {
font-family: times; /*ändra typsnittet i dropdownen*/
font-weight: normal; /*Du kan göra texten tjock med ex. ”bold” istället för ”normal”*/
font-size: 11px; /*storleken på texten*/
text-transform: none;
background: #f1f1f1; /*Ändra bakgrundsfärgen*/
color: #000; /*Färgen på texten*/
float: left;
letter-spacing: 3px; /*Du kan ta bort denna helt om du inte vill ha större mellanrum mellan bokstäverna samt
göra det större och mindre såklart*/
list-style: none;
margin-right: 40px;
padding:0 0 0 10px;
position: relative;
height:25px;
margin-top: 3px;
}

#dropdown li a {
color: #000; /*Färgen på länkarna först*/
text-decoration:none;
backrgound: #f1f1f1;
}

#dropdown li a:hover {
color: #727272; /*färgen på länkarna när en håller musen över*/
text-decoration:none;
}

#dropdown ul {
background: #f1f1f1; /*bakgrunden på den del som rullar ner*/
display: none;
margin: 0;
padding: 0;
top: 25px;
margin-left: -10px;
z-index: 500;
width: 190px;
opacity: 0.95;
}

#dropdown ul {
position: absolute;
}

#dropdown li:hover ul {
display: block;
}

 

Steg 2: Sätt in följande kod i alla dina kodmallar precis efter wrappern.

<div id=”menytop”>
<ul id=”dropdown”>

<li><a href=”Länk till din blogg”>HEM</a>
</li>

<li><a href=”Länk dit du vill”>LÄNK</a>
</li>

<li><a href=”Länk dit du vill”>LÄNK</a>
</li>
<li><a href=”#”>DROPDOWN</a></font>
<ul>
<li><a href=”Länk dit du vill”>Flik 1</a></li>
<li><a href=”Länk dit du vill”>Flik 2</a></li>
</ul>

<li><a href=”Länk dit du vill” target=”blank”>LÄNK</a>
</li>

<li><a href=”Länk dit du vill” target=”blank”>LÄNK</a>
</li>

</div>

 

Skribent och ansvarig för DDB. Driver Designa din blogg sedan juni 2015. Har bland annat studerat webbdesign, marknadsföring och online strategier både i Sverige och USA. Jobbar inom IT.

Läs mina andra inlägg

Lämna ett svar

Din e-postadress kommer inte publiceras.