Mega menu Black

Mega menu for blogger απλα

Mega menu στο blogger.

Σημερα σας εχω ενα κωδικο για να μπορεσουμε να βαλετε ενα Mega menu στο blog σας πολυ γρηγορα. Ειναι πολυ χρησιμο γιατι σε μια μονο στηλη μπορουμε να βαλουμε πολλες ετικετες και δε χρειαζεται και ιδιαιτερα σε blog με παρα πολλες ετικετες ειναι πολυ εξυπηρετικο. 

μπορειτε να δειτε και ενα demo εδω

Για να το προσθεσουμε πρεπει να παμε στο προτυπο μας - επεξεργασια html και να βρουμε το </header>

Αμεσως κατω απο αυτο θα κανουμε επικολληση τον παρακατω κωδικο.

<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="#"> Menu for blogger </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"><span class="wclink">Test Column</span>

    <ul>
<li><a href="#"> test1 </a></li><li>

<a href="#"> test2 </a></li><li>

<a href="#"> test3 </a></li><li>

<a href="#"> Responsive </a></li><li>

<a href="#"> Web design </a></li><li>

<a href="#"> Menu for blogger </a></li><li>

<a href="#"> Facebook </a></li><li>

<a href="#"> Twitter </a></li><li>

<a href="#"> Make money </a></li><li>

<a href="#"> testn </a></li>
</ul>
</li>
<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>

Δε χρειαζεται πιστευω να σας πω πως πρεπει να αντικαταστησετε τις ετικετες που ηδη υπαρχουν με τις δικες σας και να προσθεσετε τα link σας σε αυτες.

Στο παραπανω κωδικο υπαρχουν 3 στηλες με κατηγοριες. Αν για καποιο λογο θελετε να βαλετε και τεταρτη τοτε θα πρεπει να αντιγραψετε τη μια στηλη που ηδη υπαρχει στη συγκεκριμενη περιπτωση τα μπλε γραμματα να αφησετε ενα κενο και να την κανετε επικοληση ακριβως απο κατω.
    Επομενο βημα ειναι να αλλαξετε τον αριθμο με τα κοκκινα γραμματα απο 550px σε 750px. Ελπιζω να τα καταφερετε.

https://posftiaxnoblog.blogspot.gr/2015/03/mega-menu-for-blogger.html#more