Flytande meny på sidan av bloggen

7936 0 50

Ett sätt att piffa upp sin bloggdesign och göra den lite mer lättnavigerad är att lägga in en flytande meny som hänger flyter uppe på allt och stannar kvar på samma plats även om man scrollar neråt.

Här kan du se ett exempel: Flytande meny

Att skapa en sådan meny är inte speciellt svårt, och det finns massor av sätt att modifiera och välja vad man vill ha för innehåll.

Jag kommer att visa hur man skapar en meny som ser ut precis som den i exemplet ovan, dvs med runda hörn. Sen så är det upp till dig själv att modifiera utseendet på rutan och likaså innehållet.

Gör så här:

1. Kopiera följande kod.


.floating-menu {
position:fixed;
background:#fff4c8;
border:1px solid #ffcc00;
width:150px;z-index:100;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 3px;
margin-top: 20px;
margin-left: 10px;
}

.floating-menu a, .floating-menu h3 {
display:block;
margin:0 0.5em;
}

2. Klistra in koden längst ner i din stilmall.

3. Om du vill ändra på utseendet så är det i stilmallen du skall ändra.
Det enda du inte kan ändra är position: fixed; men allt annat kan du ändra bäst du vill.

4. Kopiera följande kod:

<div class="floating-menu">
<h3>Flytande meny</h3>
<a href="https://www.designadinblogg.se/gratisdesign">Gratisdesign</a>
<a href="http://www.facebook.com/pages/Designa-Din-Blogg/187430627709">Facebook</a>
<a href="http://www.bloglovin.com/sv/blog/1812/-designa-din-blogg-/follow">Bloglovin</a>
<a href="https://www.designadinblogg.se/category/bloggdesign/blogg-esse/videoinstruktioner/">Videoinstruktioner</a>
<a href="https://www.designadinblogg.se/tjana-pengar-pa-din-blogg-lagg-in-reklam/">Tjäna pengar</a></div>

5. Gå in i dina kodmallar.

6. Klistra in koden precis nedanför <body>

7. Ändra nu länkarna till de länkar som du själv vill ha. Sen är det bara att spara allt och tycka att bloggen blev kanonsnygg.

Lari Salminen

Grundare av Designa Din Blogg. Drev den här sidan som ett hobbyprojekt under åtta år, numera har jag lämnat över ansvaret för DDB. Är pappa till Ludvig och make till Elin.

Läs mina andra inlägg

50 comments

SvaraJessica 20 december, 2011 at 12:48

Hej!
Detta har ingen koppling till inlägget ovan men jag undrar hur man får till att lägga in “Nästa sida” på bloggen (som de flesta bloggar har, men inte min;P) så att besökare lätt kan komma vidare till äldre inlägg?
1. Author
  SvaraLari 20 december, 2011 at 13:39
  
  Om du bloggar på blogg.se så går det inte att få till en sådan funktion. Då skall du istället blogga på wordpress eller blogger typ.
  1. Cornelia 1 januari, 2012 at 12:48
    
    Hej!
    Men det ska väl gå att ha på blogg.se?
    Jag vet flera som bloggar på blogg.se som har en “tidigare inlägg”. Det har inte jag på kategorisidan… Hur får jag en sådan…?
  2. Author
    Lari 2 januari, 2012 at 20:14
    
    Nej, det går inte att få det på framsidan… utan det är bara under kategorierna som man kan få det på blogg.se än så länge.
SvaraSanna 21 december, 2011 at 18:12

Hej!
Skrev i kommentarsfältet till ditt inlägg “kontakta mig” men vet inte om du såg det, så skriver samma sak här.

Har placerat två svarta boxar med länkar under min header, och skulle nu vilja att resten av raden även den blir svart i storlek med länkboxarna, alltså inte enbart 2 ensamma boxar till vänster utan att hela raden under headern ska bli svart.

La först in en storleksanpassad svart smal bild i kodmallen som blev jättebra, förutom att eftersom den är storleksanpassad till hur bloggen ser ut på min skärm, blir den för kort/för lång om man kollar på en dator med större/mindre skärm.

Finns det ett enklare sätt att gå tillväga här för att få hela menyraden svart och inte bara själva länkboxarna? Svara gärna i bloggen/mail om det finns en lösning!

Enormt tack på förhand

Sanna
1. SvaraStranger 9 januari, 2012 at 04:33
  
  Jag svarade på din blogg. Kolla om det hjälper.
  1. Sanna 12 januari, 2012 at 15:50
    
    Har tyvärr inte dykt upp någon kommentar, men skulle verkligen uppskatta hjälp för detta.
  2. Strangerz 12 januari, 2012 at 18:04
    Sanna:
    
    Byt ut denna kod:
    
    .mattblacktabs ul{ margin: 0; padding: 0; padding-left: 0px; /*offset of tabs relative to browser left edge*/ font: normal 10px arial; list-style-type: none; }
    
    till den koden jag gjorde här:
    
    .mattblacktabs ul{ margin: 0; padding: 0; padding-left: 0px; /*offset of tabs relative to browser left edge*/ font: normal 10px arial; list-style-type: none; width:100%; background:black; height:33px; }
  3. Sanna 13 januari, 2012 at 11:58
    
    Jag måste säga tusen tack till Stranger, du är en klippa!
SvaraLinnea 21 december, 2011 at 21:16

hej:)
Jag fixade lite med min blogg och märkte nu att hela sidomenyn har försvunnit och jag vet INTE hur jag ska få tillbaka den 🙁
1. SvaraAlex 4 januari, 2012 at 13:11
  
  Bredda bloggen!
  1. Fredrika 4 januari, 2012 at 15:12
    
    Hej, Jag har försökt leta mig fram men hittar verkligen inte hur man breddar bloggen! Snälla, snälla kan du hjälpa mig??
SvaraFilippa 22 december, 2011 at 16:55

Om man istället för att ha länkarna nedanför varandra vill ha dom bredvid varandra, vad ändrar man? 🙂
1. SvaraJulia Lemon 12 maj, 2012 at 15:57
  
  Du ändrar width till mer än 150px; , ungefär 200px blir bra. ^^
SvaraEmelie 25 december, 2011 at 21:59

Om man har laddat ner en “header” till sin blogg som har ändrat alla sina koder, hur gör man då för att få saker som t.ex klocka på sin blogg? Eftersom dom sakerna som du skriver att man ska leta efter inte finns 🙁
Svarafrida 26 december, 2011 at 20:03

varför blir det såhär? http://norrlandsbruden.blogg.se/2011/december/
Svarapaulina 27 december, 2011 at 15:51

Hej hej,
jag orkade inte hålla på att bygga en egen bloggdesign från grunden så jag valde en av gratisdesignerna på blogg.se, och tänkte då göra den lite mer personlig.

Men när jag valt en av designerna (dusty rose), så märkte jag att det blir så här: http://photosbypaulina.blogg.se/images/2011/namnls_181097135.png

varför?
Jag hittar inte koden där man kan flytta på den. Jag har ändrat lite margin, align och sånt där för att kunna se skillnader men jag lyckas ändå inte få upp den. Please help?
1. SvaraAlice 8 januari, 2012 at 22:50
  
  KAN NÅGON SNÄLLA SVARA PÅ DET HÄR, har exakt samma problem!
2. SvaraStranger 9 januari, 2012 at 05:19
  
  Det finns massor av anledningar till detta. För det första så antar jag att du egentligen inte har så stor kunskap när det gäller att koda bloggar. Men det kan vara vad som helst. Det kan vara någonting ivägen (som inte syns). För mycket margin. Padding. Eller whatever. Lättare om man ser koden.
3. SvaraStranger 9 januari, 2012 at 05:22
  Okej, nu såg jag din källkod och jag kan direkt säga att du inte är vidare värst bra på att koda. Du säger till här:
```
#side {
    margin-right:0;
    margin-top: 150px;
    padding: 0px 0px 0px;
    float: left;
    width: 259px;
}
```
  …att den ska samtidigt vara till höger och vänster. Det går ju inte.
  
  Prova att ändra på “float:left;”.till “float:right;”.
SvaraLena 28 december, 2011 at 22:33

Är det inte bara att lägga till
position: fixed;
I ‘side’ spalten istället (eller lägga till ‘fixed’ om man redan skulle ha position)? Eller är det något jag missat? D:
SvaraDilba 29 december, 2011 at 14:39

men hur lägger men bilder på sig själv där uppe ??
har inte fattat än <3
SvaraS a n n a 29 december, 2011 at 20:24

Har en fråga om designen, hur man ändrar en sak:
Har frågat på bloggen här:

Du kan ju kolla, det är om kommentarsrutan, bakom kommentarsrutan, hur byter man färg :S hoppas ni, du seer detta
SvaraJulia 30 december, 2011 at 21:25

Om jag vill att menyn inte stannar då? Om jag vill att den scrollas upp tillsammans med resten av bloggen, hur gör jag då?
1. SvaraStranger 9 januari, 2012 at 05:16
```
.floating-menu {
position:absolute;
background:#fff4c8;
border:1px solid #ffcc00;
width:150px;z-index:100;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 3px;
margin-top: 20px;
margin-left: 10px;
}
.floating-menu a, .floating-menu h3 {
display:block;
margin:0 0.5em;
}
@media screen {
body>.floating-menu {
position:fixed;
}
}
```
  Klistra in i din stilmall. Html koden behöver du inte ändra.
  
  Prova med denna kod om du vill att menyn ska följa med om man skrollar.
  1. Julia 7 september, 2012 at 21:49
    
    Glömde visst att jag hade en gammal kommentar här och postade en ny längst ner, haha!
    
    Hur som helst, tyvärr fungerade inte koden du gav mig. Menyn sitter fortfarande still!
SvaraTORNY 31 december, 2011 at 01:13

fan vad svårt det är att designa sin blogg borde vara lika lätt som att välja tema.. djupt besviken
1. SvaraTea 31 december, 2011 at 16:55
  
  Håller med! Det är jättesvårt, har fått göra om flera gånger, hehe
SvaraVictoria Pettersson 1 januari, 2012 at 13:27

Hej! min blogg har blivit super konstig! (Inte pga dina koder mm) Men jag kan inte få in bilder på bloggen på datorn när jag skaffade blogg.se till min iphone.
Behöver verkligen hjälp! Vore skit tacksam om du skulle kunna kontakta mig och försöka hjälpa!.
1. SvaraStranger 9 januari, 2012 at 05:12
  
  Jag kan kanske kan hjälpa?
  
  Maila mig på: strangerz@live.se
  
  Gäller andra också ifall ni vill ha hjälp.

SvaraSunny 2 januari, 2012 at 20:04

Hej Lari! Jag har en fråga som det vore awesome att få svar på! Jo, jag undrar hur man få såna här “länkar” på sin blogg, alltså såna som man håller musen på och så “fälls” det ner nånting där man t.ex kan välja kategori. Haha, jag är sämst på att förklara vad jag menar, men du har en sån funktion på din hemsida. Om man håller musen på “Bloggdesign” så fälls en sån grej ner. Skulle jättegärna vilja veta hur man gör! 🙂

SvaraStranger 9 januari, 2012 at 05:09

Det svåra med ditt inlägg är att jag vet inte om allt får plats, men men… Jag kör på ändå.
Det är bara att klippa o klistra in detta i CSS-mallen:

#dropdown {
 float: left;
 margin: 0;
 padding: 0;
}
#dropdown li {
 background: #F7F0E0;
 border:1px solid #666;
 float: left;
 list-style: none;
 margin: 0;
 padding:0 0 0 10px;
 position: relative;
 height:20px;
 width:100px;
}
#dropdown li:hover {
 background: #FF2828;
}
#dropdown li a {
 text-decoration:none;
}
#dropdown ul {
 background: #F7F0E0;
 display: none;
 margin: 0;
 padding: 0;
 position: absolute;
 top: 20px;
 left: -1px;
 z-index: 500;
}
#dropdown ul {
 position: absolute;
}
#dropdown li:hover ul {
 display: block;
}

Här är html koden:

<ul id="dropdown">
  <li><a href="#">Lank 1</a>
    <ul>
      <li><a href="#">Lank 1 - 1</a></li>
      <li><a href="#">Lank 1 - 2</a></li>
      <li><a href="#">Lank 1 - 3</a></li>
   </ul>
 </li>
 <li><a href="#">Lank 2</a>
    <ul>
      <li><a href="#">Lank 2 - 1</a></li>
      <li><a href="#">Lank 2 - 2</a></li>
      <li><a href="#">Lank 2 - 3</a></li>
    </ul>
  </li>
  <li><a href="#">Lank 3</a></li>
  <li><a href="#">Lank 4</a></li>
</ul>

Jag orkar inte hålla på att gå in i din källkod på bloggen och fixa så att menyn ser ut så som din gör. Jag har bara skrivit ner ett exempel på hur man gör en “drop down” meny.

SvaraCamilla 3 januari, 2012 at 20:47

Hej! Jag undrar hur man får bort ovilliga röda prickar som dyker upp i menyn som punkter framför varje ord. Mycket tacksam för svar!
SvaraMira 4 januari, 2012 at 00:52

Hej är det någon som vet hur man får mellanrum mellan inläggen? Exempel finns att se på
SvaraIda 5 januari, 2012 at 18:37

Jag har nyss gjort en ny design till min blogg. Gjorde blandannat om menyn lite. Nu fungerar allt som det ska, förutom att menyn krånglar lite…När man går in på min blogg ser man den nya menyn. Sedan när man går in på en annan kategori kommer den gamla menyn fram istället. Hur ska jag göra? Snälla hjälp mig!
1. SvaraLinn 6 januari, 2012 at 17:25
  
  Om du har ändrat något i kodmallarna måste du göra det i alla kodmallarna och inte bara i kodmallen “Framsida”. Om du har ändrat samma sak i alla kodmallarna så kan jag inte hjälpa dig..:(

SvaraStranger 9 januari, 2012 at 04:38

Jag skulle aldrig göra såhär om det är så att ni vill att menyn ska hänga med.

Jag hade gjort såhär:

.floating-menu {
position:absolute;
background:#fff4c8;
border:1px solid #ffcc00;
width:150px;z-index:100;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 3px;
margin-top: 20px;
margin-left: 10px;
}

@media screen {
     body>.floating-menu {
           position:fixed;
     }
}

SvaraLinnea 12 januari, 2012 at 11:20

Hej!
Jag har en fråga, och är vore väldigt tacksam för svar; det funkade jättebra att lägga in koden. Men hur ändrar man det som står högst upp i ruten/menyn “FLYTANDE MENY”? 🙂
1. SvaraStrangerz 12 januari, 2012 at 14:30
```
<h3>Flytande meny</h3>
```
  Du byter ut “Flytande meny” till den text du vill att det ska stå.
Svaraamanda 27 januari, 2012 at 20:14

obs inte min blogg utan bara testar med desigter osv!

hur gör man om man vill ha länkarna brevid varandra istället för uppepå varandra? tacksam för svar!
SvaraNora 28 januari, 2012 at 20:36

det funkar ju inte. la in koden längst ner och gjorde allt som du skrev, men ändå ser det precis likadant ut. vad gör jag för fel?
1. SvaraNora 28 januari, 2012 at 20:49
  
  En sak till! Längst ner på min blogg så är det massa text som jag inte har nån aning om hur det kom dit – hur får man bort det???
SvaraSANNA 5 april, 2012 at 16:29

HEJSAN!

Jag behöver hjälp!

Min blogg meny har hamnat jätte långt ner! Jag vet inte hur jag ska göra för att få den den att sitta där jag vaill att den ska!!!

snälla om någon vet hur man gör HJÄLP MIG!
1. SvaraElin 8 april, 2012 at 18:24
  
  Hejsan!! Hänt samma sak med mig på min test blogg, ändrar jag designen testar jag alltid på den först. Jag ville att mina inlägg skulle bli bredare vilket jag lätt fixade, men då åkte menyn under alla inlägg. Även fast jag har bredare inlägg vill jag ju fortfarande att menyn ska vara bredvid! Hur gör jag?
SvaraSussi 11 april, 2012 at 16:01

Hej Lari. Hur gör jag för att få en egen bild som flytande länk till toppen av bloggen istället för en ruta med länkar?
1. SvaraSussi 13 april, 2012 at 19:33
  
  Fixade det själv. Men vet någon hur man får bilden liiite längre ner och “gungande”, som figuren längst till höger på denna siten: ? Skulle bli väldigt glad om någon hjälpte mig :).
Svaraanonym 16 maj, 2012 at 09:34

Kan man ändra “textstilen” på den flytande menyn? Och färg på texten? Tacksam för svar!! 🙂
SvaraRosanna 12 juni, 2012 at 17:25

Hej! Skulle bli jättetacksam mot den som kunde svara på hur man kan ändra färgen på texten (i denna flytande meny). Somsagt- tacksam för svar :'(
SvaraELLI 8 augusti, 2012 at 13:05

Jag kan inte hitta någonstans om detta:

Om jag har en menyrad/flikrad under headern som jag vill ska vara still i början och när man sedan scrollat ner så “fastnar den kvar” längst upp på sidan och hänger med när man går nedåt sen. Någon som förstår hur jag menar? Att den liksom först ligger kvar under headern och sedan när man rullar ner så hänger den med som en smal menyrad längst upp på skärmen? 🙂
SvaraJulia 7 september, 2012 at 21:40

Hejsan!

Hittade ingen tidigare kommentar om detta, så jag får väl fråga själv!
Jo, om man inte vill att den flytande menyn “sitter fast” utan följer med resten av bloggens design ifall webbläsarens storlek ändras, hur gör man då? Jag kan lite om HTML och CSS själv, så jag har även försökt att lösa det själv, men till ingen nytta.

Tacksam för svar,
Julia

Flytande meny på sidan av bloggen

50 comments

Lämna ett svar Avbryt svar