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

Snygg slidedown meny

Idag tänkte jag tipsa om en snygg slidedown meny, som Sanna visat tidigare. Den passar väldigt bra på rena bloggar, som ska vara stilrena.

Kopiera koden och lägg till på bloggen:


#box-slidedown {
text-align: center;
font-size: 11px;
position:fixed;
left:5px;
top:-311px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}

#box-slidedown:hover {
top:0px;
}

#header-slidedown {
border-bottom:1px #b5b5b5 solid;
text-align: center;
font-size: 11px;
position:fixed;
left:10px;
top:-108px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
background-color:#eee;
z-index:999;
}

#header-slidedown:hover {
top:0px;
}

#title-slidedown {
font-size:10px;
text-transform:uppercase;
font-family:calibri;
letter-spacing:1px;
border-width:1px;
border-color:#b5b5b5;
text-align: center;
height:8px;
padding: 5px 0 8px 0;
background:#eee;
width: 70px;
}

#text-slidedown {
font-family:calibri;
font-size:10px;
text-transform:uppercase;
letter-spacing:1px;
border-right-style:dashed;
border-left-style:dashed;
border-width:1px;
border-color:#b5b5b5;
padding: 2px 0 5px 0;
background: #fff;
width:160px;
height:100px;
z-index: 9999;
}

 

Kod som du kopierar och klistrar in i kodmallen:

</pre>
<div id="header-slidedown">
<div id="text-slidedown">
<center>

<p>
TEXT HÄR<br><br>

TEXT HÄR<br><br>

TEXT HÄR<br><br>

</center>
</div>

<div id="title-slidedown">länkar</div>
</div>

<div id="box-slidedown"></div>

Transkribering av film:

Liten Slidedown meny

Hej hörni

 

Jag hade tänkt att jag skulle visa er en slidedown idag. Det är bara en liten slidedown så det är ingen meny som sträcker sig över hela bloggen, alltså över hela här. Det är bara en liten sån här. Ni kommer säkert ihåg att jag hade en liknande på min egen blogg förut och den är gjord utefter de här koderna. Men jag väljer att lägga ut originalkoderna istället så att ni får själva liksom fixa hur ni vill att den ska se ut. För själva utseendet på den styrs ju utav css. Ni får jättegärna kolla orderlistan som jag la upp häromdan för att kanske få lite mer förståelse om html och css. Men i alla fall den styrs av css men själva texten lägger vi in i html.

 

Jag tänkte att jag visar er på en exakt likadan blogg här men som inte har den där. Då har vi två koder, vi har kodmallskod och vi har stilmallskod. Det vi kan börja med det är att vi går in i stilmallen, vi tar stilmallskoden och klistrar in den längst ner så att vi håller koll på vart den är nånstans. Publicerar ändringar. Sen tar vi kodmallskoden och så lägger vi in den där. Precis efter <div id=”header”></div>. Så precis efter headern lägger vi in den. Då ser ni att det står text här. Då kan man alltså skriva nånting här, vad man nu vill. Kan skriva, på första raden kan vi skriva hej. På andra raden skriver vi jag och på fjärde raden skriver vi Sanna. Så kan vi lägga in ytterligare en, ska vi se här. Heter, så.

 

Så står det ju updates eller länkar står det. Där kan vi skriva om mig till exempel. Alltså det beror ju helt på vad du vill använda den här slidedownen till, det vet ju inte jag utan det får man hitta på lite själv. Då ser ni att då kommer den där. Hej jag heter Sanna. Men nu har ju jag gjort så att det är ett ord på varje rad och så behöver det ju givetvis inte vara. Så om vi gör så istället att vi tar bort alla de här </br> som jag brukar säga så fint betyder byt rad, men det är ju retur, enter liksom.

 

Då kollar vi, då står det hej jag heter Sanna så istället. Det kan man göra precis som man vill och man kan fylla den här med vad man vill också. Men jag tänkte lite snabbt bara att vi kan gå in och kolla i stilmallskoden, alltså själva css:en och ser lite hur den ser ut. Vi har ju först den här boxslidedown och för att förstå sig på vad alla de här betyder så tror jag att det är bra att man studerar html-koden lite och ser vad ligger var, vad är det som hamnar inom vilket. Om vi går in och kollar på stilmallskoden här så ser vi att först och främst så har vi <div id=”headerslidedown”>. Då kan man ju testa sig fram och se lite vad händer om jag gör som så att jag tar bort det här eller vad händer om jag gör som så att jag tar bort det här.

 

Själva headern den tar vi inte bort nånting på, men däremot title. Då går vi in och kollar här. Jo titleslidedown det är där det står länkar eller som jag skrev här då om mig. Alltså själva det här gråa här. Så om vi går in och kollar på den stilmallskoden då ser vi att det är en bakgrundsfärg och det är ett typsnittsfamilj och det är uppercase och hur stort det är och allting. Här skulle man ju till exempel, vi har ju en background här också, det var det jag skulle komma till. Här skulle man ju till exempel kunna lägga in en bild så att det blir en bild där istället. Ni kommer säkert ihåg att jag hade, att det var lite, vad heter det, som en pil ner liksom, som en liten tagg eller så.

 

Vi kan även ändra hur bred den ska vara, Så om vi lägger 100 där istället ska vi se. Så då blir den lite bredare. Men vi låter den vara kvar på 70 istället. Header här uppe, man kan ju alltid göra som så att man ändrar själva headern, det är ju den själva slidern. Så där har vi en border-bottom till exempel och det är ju den border-bottom som ligger precis där. Så om vi testar att ta bort den en gång, ska vi se. Då finns det ingen border-bottom där så både header och title styr själva det här gråa som är. Man kan ändra lite där men jag tycker inte att man ska ta bort nånting.

 

Sen har vi själva boxen och det är liksom alltihopa så att säga för här ser ni att här ligger även den här transition och det är den som gör att det slidar ner. Att det liksom inte blir den här, att den hoppar liksom, att det är mouse over till exempel utan det är den att den slidar ner. Här kan vi också lägga top då, alltså det är hur långt från toppen den ska vara. Hade jag lagt 0 här till exempel då hade hela den här, vad heter det, då hade hela den här synts. Eller nej, nu sa jag helt fel, jag får be om ursäkt. Nu var jag helt ute och cyklade, jag får be om ursäkt.

 

Här har vi den förlåt, den ligger under header. Om man då tar bort den istället och ser hur, då syns hela den. Det är header som liksom styr själva den här, alltihopa så att säga. Som sagt, box behöver ni inte bry er  så mycket om utan fokusera på header, title och text då. Men vi lägger tillbaka -108px och den här kan man ju behöva ändra om man nu ändrar här nere till exempel, hur hög den här själva titeln ska vara där det står då om mig eller vad man nu vill skriva där. Texten, det kan ni säkert gissa själva vad det är. Det är ju det som är i mitten. Så om vi skulle göra som så att vi lägger 15 på font-size istället så kan vi ju bara demonstrera lite snabbt hur det blir. Då ser ni att då blir det större här istället. Där kan man ju ändra på det också.

 

Är det så att man vill lägga till länkar till exempel, då är det bara att kopiera text slidedown, kopiera den. Lägg in den igen och ta bort all text och lägga till ett a precis innan den första klammern där så att säga. Sen lägger vi color och så lägger vi en färg bara. Så där. Då har vi en färg på dem och om färgen ska vara annorlunda när vi lägger den då lägger vi givetvis en a:hover där och så tar vi en lite annan färg. Nu har jag ju inte gjort någon länk så det kommer inte att synas.

 

Om man nu vill ändra så att det kanske är bredare eller nåt sånt, då är det bara att testa sig fram här. Vi ser att i text slidedown så är det width: 160px så om vi lägger 260 där istället så kan vi kolla vad som händer. Ja, då blir den mycket bredare helt enkelt så där kan man testa sig fram och man får liksom alltså, som jag säger i typ alla videos, ni lär er ingenting på att jag förklarar exakt hur ni ska göra, sen gör ni det och så ser det exakt ut som jag visade. Utan försök göra nånting eget liksom, man kan alltså testa er fram, se vad som händer om man gör på ett visst sätt, om man ändrar ett visst värde, bakgrund osv.

 

Det sista jag tänkte visa också att det är bara det här att det ligger ju en liten border här på kanten som är dashed. Det är den här alltså, border-right-style, border-left-style, border-width. Så om vi sätter en nolla där eller om vi skulle ta bort det här överhuvudtaget, jag menar, ni kanske inte vill ha dashed. Ni kanske vill ha solid istället. Lägger en solid istället, ska vi se här. Då ser ni att då blir den så då och den färgen kan man ju givetvis ändra också för vi har ju border-color där. Det är helt enkelt så man gör så det är bara att testa er fram och använda de här koderna så mycket ni vill så hoppas jag att jag får se era jättefina resultat.

 

Ha det så bra. Hej hej!

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

1 comment

  1. SvaraAlice

    Hej, jag vill göra en meny under header, vilket jag också har gjort (desingbyme.blogg.se) men jag kan inte styra koden jag lagt in som ska styra menyn utan body verkar styra den och jag vill ju inte ändra allt genom den. Kan ni hjälpa mig vad som är fel?

    kodmallen:

    &lt;div id=&quot;navbar&quot;&gt; 
    
    &lt;a href=&quot;http://Aliiceez.se&quot;&gt; Hem&lt;/a&gt; 
    &lt;a href=&quot;#&quot;&gt; Jag &lt;/a&gt;
    &lt;a href=&quot;http://weheartit.com/aliiceez&quot;&gt; We Heart it&lt;/a&gt; 
    &lt;a href=&quot;http://instagram.com/aliiceez&quot;&gt; Instagram &lt;/a&gt; 
    &lt;a href=&quot;https://www.facebook.com/aliicee18&quot;&gt; Facebook &lt;/a&gt; 
    &lt;a href=&quot;https://www.youtube.com/channel/UC8d7ooVRRQTUvW7eyeQp8tg&quot;&gt; Youtube &lt;/a&gt; 
    &lt;a href=&quot;spotify:user:kpap&quot;&gt; Spotify &lt;/a&gt; 
    &lt;/div&gt;
    

    stllmallen:

    #navbar {
    margin-left:200px;
    margin: 0;
    padding: 0;
    height: 25px; }
    
    #navbar li {
    list-style: none;
    float: center;
    height: 25px;
    } /* Ändra till right om du vill ha menyn till höger istället*/*
    
    #navbar li a {
    display: block;
    height: 25px;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:0px;
    border-left: 1px solid #ffffff;
    border-bottom: 0px solid #ffffff;
    background-color: #; /*Ändra färgen på menyflikarna här*/
    color: #3a3a3a; /*Ändra färgen på texten här*/
    text-decoration: none;
    font-family: verdana; /*Ändra typsnittet här*/
    font-size: 15px; } /*Ändra storleken på texten här*/
    
    #navbar li a:hover {
    color:#a5a5a5; /*Ändra färgen på texten vid mouseover*/
    background-color: #; /*Ändra bakgrunden på menyn vid mouseover*/
    }
    

    Snälla hjälp <3 Blir inte riktigt klok 🙁

Lämna ett svar

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