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

Gömt arkiv som visas vid mouseover

Stilmallskoden (klistra in längst ner i stilmallen):

#container {
height: 30px;
overflow:hidden;
padding-left: 15px;
margin-left: -14px;
}
#container:hover {
height: 2000px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#show {
height: 30px;
}

#hidden {
height: 30px;
margin-left: -15px;
padding-left: 1px;
}

 

Kodmallskoden (i videon förklarar jag hur du använder denna kod):

<div id="container">
<div id="show" class="navheader">
Kategorirubrik
</div>

<div id="hidden">
<ul>
<li>
<a href="#länkhär">
Länkens namn här
</a>
</li>
</ul>

</div> <!-- div id hidden -->
</div> <!-- div id container -->

Tips:
Detta går givetvis att använda till andra delar av bloggen också, som kategorier, senaste inlägg osv. Då klistrar du in det avsnittet för respektive del, inom <div id=”hidden”> & </div> <!– div id hidden –> och tar bort det som ligger där nu (från <ul> </ul>)

arkiv

 

Text från film:

Gömt arkiv som visas vid mouseover

Hej

Idag så ska jag visa er på begäran, hur man ett sånt här arkiv som jag gjorde för Sheima som har modemix.se. Vi kommer bara använda oss av css och html idag. Vi ska alltså bara vara i stilmallar och kodmallar. Det är ingen javascript eller nånting utan det här styrs helt och hållet utav css då när man för musen över ordet arkiv.

Jag har indenterat en fin liten kod till er här och när vi ändå är igång så kan jag säga att indentering det är alltså det här att man flyttar in delar av koden. Så den som är överst här, den wrappar allt liksom och sen så har vi saker som finns inuti den och så det som ligger ännu mer inuti, det ligger i sin föräldra-div då eller vad man ska säga. Men det kan vi, vi kan gå mer in på det i en annan film om ni skulle vilja det.

Vi kan börja med att göra som så att ni tar stilmallskoden som jag har lagt här nedanför och så går ni i er stilmall och förslagsvis kan ni lägga den längst ner i stilmallen så att ni inte förstör någon annan kod. Publicerar vi det. Det kommer inte hända nånting nu i och med att vi inte har nånting i kodmallen som svarar på css:en.

Så vi går in i kodmallen och så bläddrar vi ner till arkivet. Det har vi här. Jag gör som så att jag trycker ut det lite så att ni ser vad jag gör. Det är många som har klagat på att man knappt ser vad som står men jag ska försöka zooma in så att ni ser detta. Då är det som så att det som vi behöver för att skapa det här arkivet, det är ju den här, for month in archive_months. Det är programmering. Samt den här, month.link, month.name och endfor. Men det som är runtomkring här, det är det som vi egentligen ska byta ut då. Man kan om man känner sig hyfsat säker, bara lägga till det som man ser, för man ser ganska lätt på den här html-koden som ligger här att den är likadan.

Så om vi skulle göra så att vi tar den här koden och så kopierar vi den och så lägger vi den precis ovanför. Då ser ni här att kategorirubriken, det är alltså arkiv så vi börjar med att ändra ordet arkiv. Eller ordet kategorirubrik till arkiv. Sen så har vi det som är här, alltså <div id=”hidden”> <ul> <li>, det behöver ni inte bry er om. Det är samma sak som <ul> och <li> här. Men det här, for month in archive_months, det måste vi kopiera och så lägger vi det precis nedanför <ul>. Så att mellan <ul> och <li> så lägger vi, for month in archive_months.

Sen så kan vi ta endfor, för de två hör ihop. Så vi kopierar den och så lägger vi den istället då mellan </ul> och </li> här nere. Så ni ser där är </ul> och där är </li>. Sen har vi bara två saker kvar vi ska göra. Det är att ta month.link, det är viktigt att få med måsvingarna på sidan också. Så lägger vi det här uppe, där det står #länkhär. Lägger vi in month.link där. Sen så tar vi month.name och då är det också viktigt att få med båda måsvingarna på vardera sida och så lägger vi det på länkens namn här.

Sedan är det helt enkelt bara att ta bort det här, alltså från <div class=”navheader”>, det som redan var inne. Sen så kan vi spara. Så kan vi gå in och kolla hur det ser ut. Då har vi en arkiv här och ni ser då att den här blir mycket mycket längre. Då är det helt enkelt så att man får gå in i stilmallen och pilla lite med den här koden och se vad vill jag ändra, vad tycker jag blir bra. Då kan jag förklara lite här då att container, det är alltså hela det här som arkiv ligger i. Så allt det här som rullas ner nu, det är container. Vanlig container, det är hur den är när den är stängd, alltså när man inte har musen över arkiv och container a:hover eller container:hover, den är när vi har musen över så när den är öppen skulle man kunna säga då.

Då kan ni se att jag har lagt 2000 pixlar här och det är alltså hur lång den ska vara så ni ser att den är ganska lång här men det får man ju välja själv. Sen så ser ni också att det står overflow:hidden, pilla inte på det. Sen har vi också den här webkit-transition, den ska ni inte heller pilla på för det är den som gör att det liksom, att det  inte bara dyker upp utan att det faktiskt när man trycker här, eller när man håller musen här så liksom slidar den nästan ner. Man ser liksom att den rör på sig.

Däremot så kan man ändra de här 0.5 sekundrarna till kanske 0.9 och då tar det liksom längre tid för den att hoppa ner. Kan kolla på det också, ja då såg ni att det tog rätt längre tid där. Sen här nere då, hidden, det är det som är inuti alltså det själva alla månaderna så här kan man få greja lite med height och margin och padding och lite sånt där. Och show det är själva den här, för vi har ju lagt ett id på den här navheadern som heter show som ni såg i den här lilla, vad heter det, koden. Där ser ni show på navheader kategorirubrik där så står det show, div id show och så står det class navheader. Alltså det får ni göra som ni vill om ni vill ändra saker där, det bästa är egentligen att testa sig fram och se vad som händer. Det enda som ni inte ska pilla på det är det här overflow:hidden då i och med att det är det gör att det är gömt nu, för hidden betyder ju gömt. Så det är det som gör att det är gömt från början och när man håller musen över så visas det helt enkelt.

Det var det som jag skulle visa er idag så får jag hoppas att ni skapar skitsnygga bloggdesigner och också att ni följer med mig till min nya blogg på wordpress sannasrum.se. Ha en fortsatt trevlig kväll. Hej hej.

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

5 comments

  1. SvaraSara Myrehed

    Jag vill lägga in denna kod i min sidomeny för mobilanpassad blogg men då visas bara alla koder i min meny, det blir liksom ingen koppling…

    &lt;div class=&quot;mobile-menu-btn&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;mobile-menu&quot;&gt;
    	&lt;div class=&quot;inner&quot;&gt;
     
    		&lt;img src=&quot;/img/top-logo-mobile.png&quot; class=&quot;top-logo-mobile&quot;&gt;
    		&lt;ul&gt;
     
    		&lt;li&gt;&lt;a href=&quot;Http://saramyrehed.blogg.se&quot;&gt;Startsida &lt;/a&gt;&lt;/li&gt;
     
    		&lt;li&gt;&lt;a href=&quot;http://saramyrehed.blogg.se/category/om- mig.html&quot;&gt;Om mig&lt;/a&gt;&lt;/li&gt;
     
    		&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Kategorier&lt;/a&gt;&lt;/li&gt;
     
     
     
     &lt;li&gt;&lt;a href=&quot;Http://saramyrehed.blogg.se/category/pr- 
     policy.html&quot;&gt;Pr &amp; policy&lt;/a&gt;&lt;/li&gt;
     
    
     
     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
     
     
     
     &lt;/ul&gt;
     
     
     
    
     
     &amp;lt;div id=&quot;container 2&quot;&amp;gt;
    &amp;lt;div id=&quot;show&quot; class=&quot;navheader&quot;&amp;gt;
    Kategorirubrik
    &amp;lt;/div&amp;gt;
     
     
    &amp;lt;div id=&quot;hidden&quot;&amp;gt;
    &amp;lt;ul&amp;gt;
    {% for month in archive_months %}
    &amp;lt;li&amp;gt;
    &amp;lt;a href=&quot;{{ month.link }}&quot;&amp;gt;
    {{ month.name }}
    &amp;lt;/a&amp;gt;
    &amp;lt;/li&amp;gt;
    {% endfor %}
    &amp;lt;/ul&amp;gt;
     
    &amp;lt;/div&amp;gt; &amp;lt;!-- div id hidden --&amp;gt;
    &amp;lt;/div&amp;gt; &amp;lt;!-- div id container --&amp;gt;
    		

Kommentera

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