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

Få sidomenyn på bloggen att sitta fast vid scrollning

Om en vill ha en fixerad meny, alltså en meny som följer med ner på sidan så gäller det att leta upp vad selektorn för menyn heter. Oftast heter den #side, men den kan också bara heter aside. På WordPress och Blogger kan det skilja och till exempel kallas #tertiary eller något liknande. Ett tips är att använda Google Web Developer Tools för att se vad din meny kallas. Du får helt enkelt kolla upp vad din meny kallas i din egna blogg.

I stilmallen/style.css eller vad din CSS-fil heter, leta upp din meny (#side, aside, #tertiary eller något liknande) och lägg till detta under:

position: fixed;

Tänk på att en fixerad meny kan leda till problem, i till exempel mobilen. Då är det viktigt att också göra så att menyn inte är fixerad i din mobilversion, och det kan du göra med hjälp av Media Queries. Det kan också leda till problem om personen som kikar på din blogg inte har en lika stor skärm som du har när du designar din blogg. Så viktigt att tänka på att i så fall ha väldigt lite information i din meny så att de med mindre skärm inte missar något viktigt!

 

Transkribering av filmen:

Sidomenyn sitter fast när man scrollar

Idag så ska jag visa er lite snabbt hur jag gjort min sidomeny. Om ni kollar så sitter den fast trots att jag rullar ner på sidan.

Då har jag gjort så att jag har gått in i min kodmall och i alla de här så har jag tagit bort allting som ligger inom side. Nu har inte jag det på min blogg i och med att jag tagit bort det. Ni kan gå in på en vanlig testblogg här så ser ni. Ni kan trycka control-F eller command-F om ni har Mac och så söker ni på side och då kommer det upp där. Då har jag helt enkelt tagit bort hela det ner till de här tre div:en som ligger här. </div> </div> </div>. Då har jag bara tagit bort det.

Då ser ni att då kommer det inte ligga någon meny här utan då försvinner den. Ska vi se, jag gjorde det på index-sidan. Nej det gjorde jag inte, jag gjorde det på framsidan. Så ser ni att då försvinner den här. Då finns det ingenting där.

Istället så har jag lagt till en ny grej i min stilmall, som jag har lagt här under, som börjar med #sidemenu. Alltså sidmeny fast på engelska. Man kan ju döpa den till sidmeny också, det gör man som man vill. Om jag går in här på min stilmall och så söker jag på sidemenu, så ser ni att då har jag den här. Då har jag bestämt hur stor den ska vara, alltså hur bred, hur lång, vad det ska vara för bakgrund. Så har jag lagt till det här lilla stycket som heter position: fixed. Det betyder att den sitter fast. Den kommer inte att flytta på sig. Sen har jag också lagt till margin: left bara för att jag vill ju då att den bara skulle vara, ska vi se, så att ni ser att den är rundad här men här så är den inte rundat. Så det har jag lagt till där. Sen så har jag också gjort så att jag har lagt till en padding så att mina grejer börjar ändå inåt på sidan. De börjar liksom inte lika långt från vänster som de börjar från höger utan jag har gjort så att den börjar lite längre in. I och med att jag har lagt den här margin att den ska ligga, själva menyn ska liksom tryckas in och inte synas.

Så om ni kopierar den här lilla stilmallskoden, lägger in den längst ner i stilmallen till exempel. Så trycker ni på kodmallar. Ska vi se så jag gör det rätt här. Så tar ni bilder, nej inte bilder förlåt. Skit i det jag just sa. Gå in på design och  kodmallar. Så här då så lägger ni in det som heter kodmallskod alltså <div id=”sidemenu”> och så </div>. Då sparar vi. Nu har jag gjort det här på en testblogg så jag måste bara hämta den lilla stilmallskoden också, ska vi se. Sidemenu, lägger vi in den där. Så, och den skulle jag alltså lägga ner längst ner i min kodmall. Stilmall menar jag. Så sparas den med.

Då går vi in här. Det syns ingenting, och varför det? Jo, för att jag har inte lagt någonting i koden. Nu skriver jag till exempel HEJ HEJ HEJ. Trycker vi upp igen och kollar vad som händer. Spara kodmallen och uppdatera här. Det ska ha löst det. Jo då ser ni, då hamnar den här och när jag då om jag skulle haft inlägg här och rullat ner då skulle den fastna. Så det man då gör för att, nu hamnade ju den där. Kanske man inte vill ha. Då går man in i stilmallen, går ner till stilmallskoden och så kollar man helt enkelt på de här margin till exempel. Det har jag satt på -50. Kan vi sätta på 200 kanske. Då hamnar den i mitten. Men om jag sätter på 500 då, ska vi se hur det går. Då hamnar den lite längre bort där. Men då får man helt enkelt med den här margin: left och se var den hamnar.

Se dock till att när du använder den här koden så får det inte finnas några auto alltså margin = auto i din stilmall. Då kan du bara trycka på control-F och så söker du på auto. Då ser ni att min wrapper ligger på auto. Det får den inte göra. Så då får jag helt enkelt göra en margin. Då så skriver jag margin-left så bestämmer jag att det ska vara 100px, 100 pixlar, och margin-top. Det ska vara 100 pixlar säger vi. Då blir hela den här sidan, den blir liksom, vad heter det? Den hamnar rätt.

Så det ni gör det är ni klistrar in stilmallskoden i er stilmall, ni tar bort auto och ni fixar till och lägger in alla koder ni vill ha i eran sidmeny. Och det var det jag skulle visa er idag. Då får ni ha det så bra. Hejdå.

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

3 comments

  1. SvaraMaja

    Jag har problem med att den fixerade sidobaren ihop med wrappern osv skjuts ned i samband med att en reklambit satts in. Är det möjligt att få menyn att börja där nere den gör nu för att sedan börja flyta först när den när översta delen av skärmen? Och är det möjligt att se till att wrappern hamnar bakom annonsen så inte det blir sånt stort hopp i designen typ? Ni kommer förstå direkt vad jag menar när ni går in och kollar på min blogg. Lite dålig på att förklara men lyckas iallafall verkligen inte lösa problemet.

  2. SvaraKristina

    Min Side har fastnat i content och jag kan inte hitta felet. När jag har designen på min testblogg ser det bra ut, men när jag för över designen till min egentliga blogg så fastnar Side i content (eller wrapper?)
    Markerat den svart för att jag ska kunna se den, men förstår verkligen inte vad som är fel!
    Kan det ha att göra med att jag inte har annonser på min domän men skapade designen i en blogg där de är annonser? HJÄLP! Jag blir gråhårig!

  3. SvaraDiana

    Hej! Jag har designen “Sweet Vanilla” på blogg.se och har då en slidedown meny precis under min header. Jag skulle dock vilja ha en sidomeny också till höger om bloggen där jag vill ha en sökruta för bloggen, samt “senaste inlägg”. Hur gör jag?

Lämna ett svar

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