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>

 

Hanna heter jag och är en riktigt glad och positiv tjej född år 00 med intresse för webbdesign, fotografi och mode. Bloggat på min egna server sedan juli 2015 och pysslar med gratisdesigner vid sidan om.

Läs mina andra inlägg

14 comments

  1. SvaraSara-Karolina

    Åh, detta har jag undrat länge!! Dock verkar det vara något fel på koden man ska klistra in i kodmallarna, de har liksom blivit som flikar så det går inte att kopiera :/


    1. Author
      SvaraHanna Sahlqvist

      Har du lagt in allt på rätt ställen samt fått med hela koderna? Vore bra att se hur det ser ut på din blogg också så jag kan försöka se vad felet är så länka gärna 🙂

  2. SvaraLisa @ Duttis

    Åh som jag letat efter detta! Dock verkar jag göra något fel för det blir ingen meny av det, bara en massa länkar i text, vad gör jag för fel?

  3. SvaraSandra

    Hej jag fattar inte steg 2, vad menar du med att jag ska lägga in den efter wrappern? Vad är wrappern ens för något?

  4. SvaraEmmelina

    Hej!
    Jag använder mig av en sån här meny men mitt problem är att går man in på en länk så blir man tvungen att gå tillbaka till startsidan för att kunna välja en ny länk. Man kan liksom inte gå först till “om mig” och sedan där ifrån gå till “kontakt” ex. vis… Jag har endast undersidor i den menyn men jag tänker att det borde kunna fungera ändå? vad är det jag gör för fel?
    Otroligt tacksam för svar! 🙂

    1. SvaraFredrik Le Falk

      Hej Emmelina,

      ändra webbadressen i dina länkar (Dvs som står efter ahref…

    2. < a href=”Länk till din blogg ”>HEM < /a>.
      Så som du har nu ärver länken den befintliga sidans adress och lägger bara till på slutet.

      Tex www.minblogg.se och så har du ahref=hastar då blir länken www.minblogg.se/hastar, men om du står på en annan sida tex www.minblogg.se/om-mig och har ahref=hastar så blir länken www.minblogg.se/om-mig/hastar, dvs fel.

      Skriv ut hela länken ahref="http://www.minblogg.se/hastar ” så blir det rätt överallt

  5. SvaraSofie

    Det funkar inte för mig? Jag gör exakt som det står men länkarna blir på höjden med en punkt framför. Jag har provat på en testblogg också. Vad kan detta bero på? Jättetacksam för svar 🙂

  6. SvaraLinda

    Hej är detta något du skulle vilja hjälpa mig med? Jag har provat men får inte till det, eller rättare sagt jag fattar nog inte riktigt vad ja håller på med 🙂

  7. SvaraEdie

    Hej! Jag lade in allt och det funkar fint, dock lägger sig reklamen över, går det att göra något åt detta? mvh Edie

Kommentera

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