Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse
Göm och visa menyinnehåll

Göm och visa menyinnehåll

I detta video tutorial så skriver jag koden. Jag rekommenderar att ni kollar och försöker åtminstone skriva av så att ni kan förstå och lära lite från det ni gör. Men det är inget måste. Gör som ni själv vill. 🙂 (Detta handlar om din .nav bar, vilket ni oftast brukar kalla för eran “meny”).

Här är i alla fall länken till Youtube-klippet:

http://youtu.be/3AUTfe-iDIg

CSS koden:

#panel {
 background: #f3f3f3;
 height:auto;
 display: none;
 border:2px solid #000;
 border-top:none;
 border-bottom-right-radius:10px;
 border-bottom-left-radius:10px;
 -moz-border-bottom-right-radius:10px;
 -moz-border-bottom-left-radius:10px;
 -webkit-border-bottom-right-radius:10px;
 -webkit-border-bottom-left-radius:10px;
 text-align:center;
}
.slide {
 margin: 0;
 padding: 0;
 border:2px solid #000;
 background:#f3f3f3;
 box-shadow:0px 0px 10px #000;
 text-align:center;
 height:30px;
 border-top-right-radius:10px;
 border-top-left-radius:10px;
 -moz-border-top-right-radius:10px;
 -moz-border-top-left-radius:10px;
 -webkit-border-top-right-radius:10px;
 -webkit-border-top-left-radius:10px;
 font-weight:900;
}

.slide a:link, .slide a:visited {
 text-decoration:none;
 cursor:default;
}

Javascript koden:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".btn-slide").click(function(){
 $("#panel").slideToggle(1000); //Hur fort det ska gå
 $(this).toggleClass("active"); return false;
 });

});
</script>

HTML koden:


<p class="slide"><a href="#" class="btn-slide">Klicka här!</a></p>

<div id="panel">

HTML koden ska in precis ovanför <div class=”nav”>

Sista diven:


</div>

Den sista div’en ska in ovanför <img src=”http://stats.blogg.se/?id=${BlogID}” border=”0″ width=”0″ height=”0″ alt=”” />

Demo: http://ddbstrangerz.blogg.se/

Hoppas ni förstår! Lycka till! 🙂

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

11 comments

  1. SvaraMaria - Passion for heels and fashion

    Det funkar inte alls för mig.. Hade varit lättare om du hade skrivit en förklaring på vart man ska sätta texterna, för det är inte lätt att se på videon..

  2. SvaraJnnifer

    Hej, tack för att du la upp det! Dock så förstår jag inte riktigt och jag får inte ihop det, har testat på min testblogg som har samma design som min riktiga, http://www.jenniferabb.blogg.se/ggg och det ser jätte konstigt ut. Har kollat på videon men ser inte riktigt, vart ska man placera CSS? Tacksam för hjälp 🙂

    1. SvaraStrangerz

      Okej. Detta kommentar system med att lägga in koder strular till att kunna skriva koder med http:// länkar och jag blir lite trött på det. Men kopiera Javascript koden och klistra in igen! Ta bort den du har nu först och främst och kopiera in den som finns i detta tutorial istället. Det var en grej som fattades för dig.

      1. Jnnifer

        Eller vänta.. Gömmer den här koden hela menyn? 😛 Jag vill bara gömma tex hela arkivet under akriv, så när man klickar på arkiv kommer det fram och när man klickar igen försvinner det. Är lite förvirrad, hehe

  3. SvaraJnnifer

    Nu blev hela designen på jenniferabb.blogg.se/ggg jätte konsigt.. Jag har säkert placerat någonting fel någonstans..

  4. SvaraDaniel

    Den funkar för mig, men när jag uppdaterar sidan så är innehållet redan nerfällt. Om jag sedan stänger igen den och uppdaterar sidan så blir det samma sak. Och varför kan jag inte ha det på ett visst avsnitt, t.ex. Arkiv? När jag gör så så blir hela menyn en rullgardin. Funkar bara om jag har den längst ner på menyn!

  5. SvaraEmelie

    Min meny försvinner när jag klickar på den, men jag vill att den ska komma fram när jag klickar på. Om du förstår vad jag menar. Sen så undrar jag hur man byter färg på länken. Jätte tacksam för svar!

  6. SvaraMaja Svensson

    Hej!
    Jag försöker få det att funka genom att t.ex trycka på “arkiv” så dyker arkiv upp själv och har lyckats med det. Men sedan när jag sak göra samma sak med “kategorier” och “senaste inlägg” så åker bara arkiv upp och ner även om jag trycker på kategorier. Gjorde som på videon fast att jag enbart satte koden över var del för sig. Har du någon idé hur jag ska få det att funka så att var del åker ner och upp så som jag vill och även hur man ändrar utseendet på “klicka här!” som jag i mitt fall då bytt ut mot “arkiv” “kategorier” och “senaste inlägg”. Du får gärna gå in på min blogg och se hur det ser ut eftersom jag inte är så bra på att förklara mitt problem.
    Såhär ser min kod ut nu

     &amp;lt;div id=&amp;quot;side&amp;quot;&amp;gt;
     
     &amp;lt;div class=&amp;quot;nav&amp;quot;&amp;gt;
     &amp;lt;ul&amp;gt;
     &amp;lt;img src=&amp;quot;http://cdn1.cdnme.se/4242183/7-3/1-img_25712_523736f49606ee4712090fe1.jpg&amp;quot;&amp;lt;/a&amp;gt;
     &amp;lt;img src=&amp;quot;http://cdn1.cdnme.se/4242183/7-3/1-img_25712_523736f49606ee4712090fe1.jpg&amp;quot;&amp;gt;
    &amp;lt;!-- www.instget.com --&amp;gt;
    &amp;lt;iframe src=&amp;quot;http://www.instget.com/widget/?w=268243599c5e9da694845816b515cabe&amp;quot; allowTransparency=&amp;quot;true&amp;quot; frameborder=&amp;quot;0&amp;quot; scrolling=&amp;quot;no&amp;quot; style=&amp;quot;border: none; overflow: hidden; width: 200px; height: 200px;&amp;quot;&amp;gt;&amp;lt;/iframe&amp;gt;
    &amp;lt;noscript&amp;gt;&amp;lt;a href=&amp;quot;http://www.instget.com&amp;quot;&amp;gt;instagram widget&amp;lt;/a&amp;gt;&amp;lt;/noscript&amp;gt;
    &amp;lt;/ul&amp;gt;
     &amp;lt;div class=&amp;quot;navheader&amp;quot;&amp;gt;Sök i bloggen&amp;lt;/div&amp;gt;
     &amp;lt;form action=&amp;quot;http://www.google.se/search&amp;quot; name=&amp;quot;search&amp;quot; method=&amp;quot;get&amp;quot;&amp;gt;
     &amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;q&amp;quot; value=&amp;quot;&amp;quot; size=&amp;quot;16&amp;quot; maxlength=&amp;quot;80&amp;quot; /&amp;gt;
     &amp;lt;input type=&amp;quot;hidden&amp;quot; name=&amp;quot;sitesearch&amp;quot; value=&amp;quot;{{ blog.absolute_url }}&amp;quot; /&amp;gt;&amp;lt;input type=&amp;quot;submit&amp;quot; value=&amp;quot;Sök&amp;quot; /&amp;gt;
     &amp;lt;/form&amp;gt;
     
    &amp;lt;p class=&amp;quot;slide&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;btn-slide&amp;quot;&amp;gt;Senaste inläggen&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;
     
    &amp;lt;div id=&amp;quot;panel&amp;quot;&amp;gt;
     &amp;lt;ul&amp;gt;
     {% for entry in entries[:20] %}
     &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;{{ entry.url }}&amp;quot;&amp;gt;{{ entry.title }}&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
     {% endfor %}
     &amp;lt;/ul&amp;gt;
     &amp;lt;/div&amp;gt;
     
    &amp;lt;p class=&amp;quot;slide&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;btn-slide&amp;quot;&amp;gt;Kategorier&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;
     
    &amp;lt;div id=&amp;quot;panel&amp;quot;&amp;gt;
     &amp;lt;ul&amp;gt;
     {% for category in categories %}
     &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;{{ category.url }}&amp;quot;&amp;gt;{{ category.name }}&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
     {% endfor %}
     &amp;lt;/ul&amp;gt;
    &amp;lt;/div&amp;gt;
    
    &amp;lt;p class=&amp;quot;slide&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot; class=&amp;quot;btn-slide&amp;quot;&amp;gt;Arkiv&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;
     
    &amp;lt;div id=&amp;quot;panel&amp;quot;&amp;gt;
     &amp;lt;ul&amp;gt; {% for month in archive_months %}
    &amp;lt;div align=&amp;quot;left&amp;quot;&amp;gt;&amp;lt;strong&amp;gt;2013&amp;lt;/strong&amp;gt;&amp;lt;br /&amp;gt;
    &amp;lt;a href=&amp;quot;/2013/january&amp;quot;&amp;gt;Januari&amp;lt;/a&amp;gt;&amp;lt;br /&amp;gt;
    &amp;lt;a href=&amp;quot;/2013/february&amp;quot;&amp;gt;Februari&amp;lt;/a&amp;gt;&amp;lt;br /&amp;gt;
    &amp;lt;a href=&amp;quot;/2013/march&amp;quot;&amp;gt;Mars&amp;lt;/a&amp;gt;&amp;lt;br /&amp;gt;
    &amp;lt;a href=&amp;quot;/2013/april&amp;quot;&amp;gt;April&amp;lt;/a&amp;gt;&amp;lt;br /&amp;gt;
    &amp;lt;a href=&amp;quot;/2013/may&amp;quot;&amp;gt;Maj&amp;lt;/a&amp;gt;&amp;lt;br /&amp;gt;
    &amp;lt;a href=&amp;quot;/2013/june&amp;quot;&amp;gt;Juni&amp;lt;/a&amp;gt;&amp;lt;br /&amp;gt;
    &amp;lt;a href=&amp;quot;/2013/july&amp;quot;&amp;gt;Juli&amp;lt;/a&amp;gt;&amp;lt;br /&amp;gt;
    &amp;lt;a href=&amp;quot;/2013/august&amp;quot;&amp;gt;Augusti&amp;lt;/a&amp;gt;&amp;lt;br /&amp;gt;
    &amp;lt;a href=&amp;quot;/2013/september&amp;quot;&amp;gt;September&amp;lt;/a&amp;gt;&amp;lt;br /&amp;gt;
    &amp;lt;a href=&amp;quot;/2013/october&amp;quot;&amp;gt;Oktober&amp;lt;/a&amp;gt;&amp;lt;br /&amp;gt;
    &amp;lt;a href=&amp;quot;/2013/november&amp;quot;&amp;gt;November&amp;lt;/a&amp;gt;&amp;lt;br /&amp;gt;
    &amp;lt;a href=&amp;quot;/2013/december&amp;quot;&amp;gt;December&amp;lt;/a&amp;gt;&amp;lt;/div&amp;gt;
    {% endfor%}
     &amp;lt;/ul&amp;gt;
     &amp;lt;/div&amp;gt;
    

Kommentera

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