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

Stor Slidedown meny för blogg

En stor slidedown meny visar Sanna i dagens videoklipp. Ett bra sätt att få en lättnavigerad blogg utan att ta för mycket utrymme i anspråk.

 

Stilmallskod:


/*Clearfix - Ändra ej*/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}
#box-slidedown {
text-align: center;
font-size: 11px;
position:fixed;
left:5px;
top:-190px;
-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:-58px;
-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:normal;
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:normal;
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;
}
#slidedown {
text-align: left;
font-size: 9px;
position: fixed;
font-family: verdana;
left: 0px;
width: 100%;
top:-200px;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;z-index:999;
}
#image {
padding: 0px 0px 0px 0px;
background: url();
width: 100%;
z-index: ;
}
#slidedown:hover {
top:0px;
text-align: left;
}

#slidedown a { color: #a0a0a0; text-decoration: none;}
#slidedown a:hover{color: #e1e1e1; text-decoration:none;
}

#slidedowntab {
font-family:century gothic;
width: 100%;
text-align: left;
height: 200px;
margin-left: 50px;
background: url(länktillmenybildhär) no-repeat;
}

#menu {
background: #f5f5f5;
width: 100%;
color: #999;
border-bottom: 4px solid #fff;
margin-top: -24px;
-webkit-box-shadow: 0px 5px 3px -3px rgba(90, 90, 90, 0.3);
box-shadow: 0px 5px 3px -3px rgba(90, 90, 90, 0.3);
}
.ie7 #menu {
position: static;
}

#menu-inner {
width: 1200px;
margin: 0 auto;
padding: 0px 0;
position: relative;
}

#menu-items>div {
float: left;
width: 150px;
margin-right: 70px;

}

#menu-inner a:hover {
color: #a0a0a0;
text-align: left;

}

#menu-inner ul {
list-style: none;
text-align: left;

}

#menu-inner li {
font-family: calibri, sans-serif;
text-transform: normal;
margin-bottom: 0px;
font-weight: 400;
font-size: 11px;

}

#menu-inner h4.navheader {
color: #8b8b8b;
text-align: left;
border-bottom: 0px dashed #eee;
font-family: caviar dreams, sans-serif;
font-size: 16px;
margin-bottom: 5px;
margin-left: 40px;
font-weight: 300;

}
#menu-items {
padding: 20px 0;
margin-left: 30px;

}

#menu-inner #menu-button {
position: absolute;
right: 0;
bottom: 0px;
background: none;
margin-right: 0;
padding: 0px 0px;
width: 490px;
border-radius: 0 0 3px 3px;
cursor: pointer;
text-align: left;
-webkit-box-shadow: 0px 5px 10px -3px rgba(80, 80, 80, 0.1);
box-shadow: 0px 5px 10px -3px rgba(80, 80, 80, 0.1);
font-weight: 400;
}

Kodmallskod:


<div id="slidedown">

Placera koden i kodmallen efter div id = “wrapper”

Transkribering av film:

Stor Slidedown

Hej hörni.

Idag så tänkte jag att jag skulle visa er hur man gör en sådan här meny som hoppar upp så här fint för en. Jag har ju en sådan på min bloggtipsblogg just nu och jag tänkte som sagt visa er hur man gör för det är väldigt många som har efterfrågat hur man gör detta. Det är en ganska komplicerad kod så jag vill, eller jag skulle inte rekommendera någon som kanske är väldigt, väldigt ny på det hela att testa på detta men å andra sidan så lär man ju sig faktiskt inte någonting om man testar så ni gör precis som ni vill.

 

Vi har två koder. Vi har en kodmallskod och en stilmallskod som vanligt. Stilmallskoden styr ju utförandet på koden kodmallskoden styr position och länkar och allting. Så ni kan ju börja med att ni gör så att ni klistrar in stilmallskoden i stilmallen och ni klistrar in kodmallskoden i kodmallen. Det som man ska tänka på här då det är ju att om man vill att det här ska synas på alla sidor så är det ju också viktigt att man klistrar in det på inlägg, arkiv och kategorier, inte bara på startsidan. Vi klistrar in den här koden precis efter div id wrapper och sedan så är det bara att börja modifiera koden precis som man vill.

 

Vi ser att jag har lagt in lite överskrifter, underkategorier. Jag har gjort koden så att ni kommer få fem stycken kolumner och i varje kolumn så finns det fem stycket kategorier men vill ni ha fler kategorier så är det ju bara att markera en kategori och klistra in och göra en till så här kommer ju sexan då. Det som händer när man, när jag väljer att göra på det här sättet eller att man väljer att lägga till en till kategori det är att den kommer att hoppa ner som ni såg där. Den hoppade ner ett litet, litet snäpp.

 

För att justera hur nära toppen den kommer ligga, eller hur långt ner den ska ligga, det gör vi i stilmallskoden och i stilmallskoden så bläddrar ni ner till det som heter slidedown, #slidedown. Där finns det en top-kod, den ligger just nu på -195, lägger vi den på 295, då kommer nästan hela koden att försvinna, då ser ni att det blir så. Lägger vi den på, då ska vi se här vart den tog vägen. Då lägger vi den på bara 95, ja då hoppar den ju ner ännu längre så det får ni justera på pixeln precis som ni vill ha det. Så där någonting kanske eller så kanske man vill ha det som jag har på min bloggtipsblogg, att den inte syns utan att det bara är själva, vad heter det, att det bara är själva den här grejen som visar att här finns en meny.

 

Den här har jag gjort i Photoshop och lagt in så skulle väl kanske uppskatta om man inte gör exakt likadant men ni får väl göra precis som ni vill. Den har en liten, vad heter det, en liten skugga här och den har en grå bakgrund och allt sådant och de här koderna vet ni ju säkert redan sen innan att man får testa sig fram helt enkelt. Man får testa sig fram och se hur man fixar till så att det, som ni ser här till exempel så är det bara stora bokstäver. Vill ni ha små bokstäver ja då är det text-transform som ni måste ändra på så då har vi ju, där har vi den text-transform och så sätter vi den på normal. Normal kommer vara så som jag har skrivit i koden. Har jag skrivit en stor bokstav så blir det en stor bokstav och har jag skrivit en gemen så blir det en gemen. Text-sliden det är ju där som ni troligtvis ska ändra, så. …(Hör inte vad Sanna säger). Hur som haver, det är bara att testa sig fram i koden och se lite vart, vad det är man ändrar och vad det är som man vill ska ändras så att säga. Vi ska ser här, vi har en underlinje här till exempel om vi provat att lägga none på den, kanske det händer någonting. Då blir det ingen, vad heter det, understukning på texten här när jag håller musen, en hover alltså.

 

Den här koden, själva stilmallskoden är ju väldigt lång så därför kan det vara som så att man behöver scrolla ner. Det kan vara så att det finns delar här uppe som styr ytterst i koden och sedan så finns det de som är längre ner som styr det som är innerst i koden och det är alltid den som är innerst som styr, alltså om jag lägger en kod om jag lägger typ, vad ska vi säga, font-color black och sedan innanför det så lägger jag font-color white då är det ju white för den är ju det som är närmast eller den är den som är innerst. Men här till exempel då på menu där hittade jag en sådan här uppercase så då kan vi ju prova att ändra den istället, då ska vi se hör, normal, sådär. Då ser ni, då blev det små bokstäver, stora och små bokstäver.

 

Så man får helt enkelt sätta sig och bara testa sig fram. Alltså jag vet att jag säger det häri varenda video men jag menar det är precis så som jag har lärt mig allting. Jag har liksom hittat en kod, testat den, sett hur kan jag göra den bättre hur kan jag modifiera den så att den blir min. Det kan vara flera månader innan jag får liksom pli på en kod och verkligen förstår den och sen så gäller det också att man gör en liten bild här för i den koden som ni har nedanför filmen här där är inte den bilden med för att jag vill inte att ni använder min bild utan ni får göra en egen. Så det kommer bara stå menyer där eller det kommer stå bilden till din meny så jag kan visa här lite snabbt hur det kommer stå för er. Då ska vi se, så. Menybild här och då tar ni helt enkelt bort det menybild här och sedan så lite längre ner här då så är det. Här har ni slide menu tab eller slidedowntab.

 

Den här koden påminner en del om den lilla slidedownen som jag har gjort för er men det här är en stor slidedown så där har jag den och så tar jag bort den så. Då ser ni att det står där, menybild här. Eller ni kanske inte ser det för det är så dålig kvalitet på de här filmerna. Men i alla fall så ni gör en liten fin, juste bild eller någonting, man kan ju göra precis som man vill alltså. Här finns det ju absolut inga som helst hämningar utan var så kreativa ni bara kan. Man kan ju givetvis ändra bakgrund eller man kan ändra vad det är för, vad heter det, typsnitt och så allt kan ni ju in princip ändra så det är ju bara att testa sig fram som sagt. Det var det jag hade tänkt visa er idag har ni några frågor på detta lämna jättegärna en kommentar så svarar jag så fort jag har möjlighet till det. Ha det gott, 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

Lämna ett svar

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