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

Dold meny – liten slideout från sidan

I dagens video visar Sanna hur du kan göra en dold meny som glider ut från sidan, en så kallad slideout.

Stilmallskod:


.description{
background: #ffffff;
width:300px;
margin-top:40px;
margin-left:-300px;
position:absolute;
padding:12px;
opacity:0.8;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 1px rgba(0,0,0,0);
-moz-box-shadow: 0px 0 1px rgba(0,0,0,0);
box-shadow: 0px 0 1px rgba(0,0,0,0);
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-ms-transition: 1s ease-in-out;
padding-top: 20px;
font-family: verdana;
font-size: 8px;
letter-spacing: 0.2em;
color: #948F8F;
text-transform: uppercase;

}

.description a{
font-family: verdana;
font-size: 8px;
letter-spacing: 0.2em;
color: #948F8F;
text-decoration: none;

}
.description:hover{
margin-left: -14px;
opacity: 1;
}

#description{
background-color:transparent;
margin-top:6px;
margin-left:273px;
position:absolute;
padding:12px;
}

Kodmallskod:


<div class="description">
<div id="description"><img src="bild"></div>
<div style="overflow:auto; width: 265px; height: 60px; border: 1px solid transparent; background-color: transparent; text-align: justify;">TEXTEN SOM SKA VARA I DIN SLIDEOUT SKRIVER DU HÄR (du kan givetvis använda html och länkar osv..)</div>
</div>

Transkribering av film:

Liten Slideout

 

Hej hörni!

Idag så tänkte jag visa mina slideouts som jag har lagt här. Det är inget script eller nånting utan jag har en kod som ligger i kodmallarna och sen så har jag en kod i stilmallen som styr de här koderna helt enkelt.

 

Så vi kan ju gå in och titta då. Ska vi se här. Här längst ner i min kodmall, stilmall förlåt, stilmall så har jag lagt in stilmallskoden. Här är det bara att ändra som du vill. Vad ska det vara för bakgrund på den, vad ska det vara för teckenstorlek, vilket teckensnitt, vilken färg osv. Sen när du är färdig och tycker att det ser bra ut så är det bara att spara det.

 

När vi sedan går in i kodmallen, det här ska göras i alla kodmallar om du vill att det ska synas i alla kodmallar, så kan vi lägga, ska vi se här, jag har lagt det precis efter body. Så ni ska inte lägga det efter wrapper utan ni lägger det precis efter body. Då ser ni också att där finns i det här, vad heter det, i den här koden jag har lagt här nere som heter kodmallskod så finns det en bild här. Vad är då en bild här? Jo det är den här som jag har gjort alltså själva den här gråa grejen här. Det är inte det här, det vita, utan det är bara den här gråa. Här kan du ju göra precis som du vill. Vill du göra bara så att det ser ut som ingenting eller, alltså man kan göra precis som man vill eller istället för att ha en img src där överhuvudtaget så kan man till exempel skriva någonting. Man kan göra precis som man vill. Jag gjorde i alla fall en bild och bilden är då bara det här gråa och jag gjorde givetvis med png så att det är verkligen genomskinligt här så att man får igenom det.

 

Hur som haver, sedan så går vi ner till div style som ligger här under precis. Där är det hur brett, hur högt, alltså där kan ni också hålla på. Även om ni har ändrat en massa grejer i själva stilmallen så måste ni också ändra grejer här. Alltså hur bred ska den vara när den väl hoppar ut härifrån eller hur hög ska den vara. Ska det vara någon border runt. Ska det bara någon bakgrund eller vad som helst. Jag har lagt transparens på både border och bakgrund därför att vill inte ha med det.

 

Sen nedanför här så har jag också skrivit, nu ska vi se vad jag skrev exakt. Texten som ska vara i din slideout skriver du här. Du kan givetvis använda html och länkar osv. Här har jag då valt att använda, vi kan se hur den se hur först lite snabbt här. Då står det ju ny design 130420 klick. Då betyder att jag har använt först och främst en helt vanlig text där det står ny design. Sen så har jag lagt in en färg och det är fontcolor och alla såna här grunder i html, det kan ni hitta här på min bloggtips-sida. Jag förklarar liksom inte såna grejer i det här tipset utan det får ni kolla på den grundsidan istället. Sen då så står det ju klick vilket betyder att om man klickar där så kommer man in och kan se det här inlägget där jag har visat min gamla design och min nya design. Då har jag använt en helt vanlig länk och sen därefter så är det ju givetvis </br>, jag byter rad.

 

Det här får man testa sig fram litegrann och är det så att man tycker, jag gjorde som så till exempel, jag tyckte att det här började lite för långt in mot kanten här, alltså själva kanten på sidan så jag la ett mellanrum i html vilket är &nbsp; och det har jag också bland mina grunder här och det kan man göra. Annars kan man hålla på och testa med margin och padding och allting sånt men jag orkade inte göra det så jag gjorde det lätt för mig istället. Här nedanför så har jag gjort alla mina länkar, alla bloggar som jag läser och tycker om. Då har jag inte gjort så att efter varje person så är det liksom </br> utan jag har testat mig fram så att hur många får det plats på den här raden sen efter David så har jag satt ett </br> och efter Lilla G så har jag satt ett </br>.Där kan man också testa sig fram och greja hur man vill liksom.

 

Det var egentligen det som jag skulle visa er idag. Alltså det här är faktiskt väldigt lätt, man kan nog tänka sig att det är förvånansvärt lätt, men det är också för att det finns inga script i den här koden utan när vi går in i stilmallen här så ska jag visa lite lite snabbt bara. Då kan ni se här att det står webkit-transition och det betyder alltså att den slidar ut. Alltså när man håller musen över så glider den ut. Det är inte så att den hoppar ut som med en mouse over eller nåt sånt där utan den glider ut. Det är det som gör då att det inte behövs några script. Vilket också är väldigt positivt för din blogg i sig i och med att bloggen blir väldigt mycket tyngre om du har en massa script och då blir det också svårare att ladda sidan. Så sitter man på en lite sämre dator eller med sämre internetuppkoppling eller så kan det bli svårt att komma in på din blogg och du tappar läsare osv. så jag rekommenderar verkligen det här tipset, det är skitbra. Men som sagt, man får leka sig fram med de här. Jag har ju skapat de här precis som jag vill ha dem så det är bara att testa sig fram och se vad vill jag ha. Vad gillar jag och vill jag att det ska vara liksom fixerat så att det följer med ner på sidan här eller vill jag att det ska sitta fast häruppe. Jag valde att de satt fast. Så det är bara att testa sig fram i stilmallarna och kodmallarna och ändra mina koder så mycket ni vill och gör dem till era egna.

 

Ha det så bra. Tack. 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. SvaraOlivia

    Hej, jag skulle vilja göra så att hela min sidomeny fungerar på samma sätt som flikarna i denna. Alltså att hela menyn med kategorier, arkiv osv är gömd längs sidan och går att klicka fram. Skulle vara jätte tacksam för svar då jag länge försökt men aldrig lyckats.

Kommentera

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