Hur du bloggar med blogger: Lägg till en dropdown meny

För att skapa en dropdown meny kan du följa stegen nedanför. Du kan även kolla på videoklippet för att se hur man gör.

Logga in på din blogg
Välj Tema
Gör en säkerhetskopia på ditt tema
Klicka på ändra HTML
Kopiera koden nedanför och klistra in den i HTML-koden (förslagsvis nedanför "

").När du sparat den inklistrade koden, så kommer du att se din meny som du sedan får jobba med för att få önskade kategorier och länkar.
HTML-kod att kopiera:

<ul class="wc-megamenu" id="nav">
<li class="wcnavlist"><a class="wclink" href="#">Home</a></li>
<li class="wcnavlist"><span class="wclink">Categories</span>
<ul>
<li>
    <ul>
<li><a href="#">Blogger</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Wp plugins</a></li>
<li><a href="#">Wp Themes</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Traffic</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
<li>
    <ul>
<li><a href="#"> JavaScript </a></li>
<li><a href="#"> HTML5 </a></li>
<li><a href="#"> Jquery </a></li>
<li><a href="#"> Responsive </a></li>
<li><a href="#"> Web design </a></li>
<li><a href="#"> Blogging Tips </a></li>
<li><a href="#"> Facebook </a></li>
<li><a href="#"> Twitter </a></li>
<li><a href="#"> Make money </a></li>
<li><a href="#"> Adsense </a></li>
</ul>
</li>
<li>
    <ul>
<li><a href="#"> Services </a></li>
<li><a href="#"> Contact us </a></li>
<li><a href="#"> About us </a></li>
<li><a href="#"> Disclaimer</a></li>
<li><a href="#"> Privacy Policy </a></li>
<li><a href="#"> Terms of use </a></li>
<li><a href="#"> Item 7 </a></li>
<li><a href="#"> Item 8 </a></li>
<li><a href="#"> Item 9 </a></li>
<li><a href="#"> Item 10 </a></li>
</ul>
</li>
</ul>
</li>
<li class="wcnavlist"><a class="wclink" href="#">Guest Post</a></li>
<li class="wcnavlist"><a class="wclink" href="#">Contact Us</a></li>
<li class="wcnavlist"><a class="wclink" href="#">Services</a></li>
<li class="wcnavlist"><a class="wclink" href="#">Privacy Policy</a></li>
</ul>
<style>
 
ul.wc-megamenu li{
font:16px georgia, verdana;
}
ul.wc-megamenu,ul.wc-megamenu li,ul.wc-megamenu ul
{
list-style:none;
margin:0;
padding:0
}
ul.wc-megamenu
{position:relative;z-index:999;float:left;}
ul.wc-megamenu li.hover,ul.wc-megamenu li:hover{position:relative;z-index:9999;color:#111111;text-decoration:none}
ul.wc-megamenu ul li{float:none;font-weight:700}
ul.wc-megamenu li:hover>ul{visibility:visible}
ul.wc-megamenu{width:100%}
ul.wc-megamenu ul li{float:left}
ul.wc-megamenu li.hover,ul.wc-megamenu li:hover{position:static}
ul.wc-megamenu ul ul{display:none!important}
ul.wc-megamenu ul li{position:static;width:180px}
ul.wc-megamenu ul ul{display:block!important;position:static;width:auto!important}
ul.wc-megamenu ul ul li{float:none}
ul.wc-megamenu ul ul ul{display:none}
ul.wc-megamenu li.hover ul,ul.wc-megamenu li:hover ul{visibility:visible!important;color:#fff}
ul.wc-megamenu{background: #111111; font:18px georgia, verdana;}
ul.wc-megamenu a:link,ul.wc-megamenu a:visited{text-decoration:none;color:#2c539e;}
ul.wc-megamenu a:hover{color:#fff}
ul.wc-megamenu a:active{color:#2c539e;}
ul.wc-megamenu li.last ul li{float:right}
ul.wc-megamenu ul ul li{font-weight:400}
ul.wc-megamenu li{float:left;min-height:1px;line-height:1.3em;vertical-align:middle;list-style:none;}
ul.wc-megamenu li a{display:block;}
ul.wc-megamenu ul{list-style:none;visibility:hidden;position:absolute;top:100%;left:0;z-index:99999;width:550px;font-size:14px;letter-spacing:normal;background:#222222; padding:0 0 0 10px}
ul.wc-megamenu ul a{width:180px;padding:5px;color:#222222;}
ul.wc-megamenu ul a:hover{background:#8fc800;}
ul.wc-megamenu ul ul{padding:0;margin-left:-5px;top:1px;left:99%;margin-top:5px;text-transform:none}
ul.wc-megamenu .wcnavlist{padding:4px 10px}
.wclink,.wclink a:link,.wclink a:visited{color:#fff;font-size:18px}
.wclink hover,.wclink a:link,.wclink a:visited.wclink a:active,.wclink a:hover{color:#fff}
ul.wc-megamenu .wcnavlist a:link, ul.wc-megamenu .wcnavlist a:visited,ul.wc-megamenu .wcnavlist a:active{color:#fff}

</style>

Sidor

Hur du bloggar

Populära inlägg

Lägg till en dropdown meny

Inga kommentarer:

Skicka en kommentar