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å.

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.