20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

Home
Blogger Menu
CSS Menu Bar

Add Stylish Mega Menu With Images And Thumbnails

how to Add Stylish Mega Menu With Images And Thumbnails,images thumbnails label display pictures navigation menu bar with jquery,html for blogspot website.

How To Add Mega Menu With Images And Thumbnails

Add Mega Menu With Images or Thumbnails for blogger menu

DEMO

Features:

  • Multi-Level Menu Support:
  • Cross-browser Compatibility
  • Automatic Sub-Menu Display
  • Menu Styling
1. Log in to blogger account
2. Now select Template
3. Now Click EDIT HTML Button
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
 .megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIw1fgjtq4NwRpMT_dpEKKew8V_MOaA_JsdhK5cDC6LuAglAZ4xa21kTyl7UF8ZlnwaJG6H34cbV8P__vh8L620KwuZUzU1MUXK8aPaufYqK9qRv5pTutqaat-sqAfdGWwUt94iEvZhbw/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB9guuBSkSDnCSBm9COsE_RXJuE3iN5iOYDHHqavN_4L-d07fdKHsHQf08aAb-7nCxZpa8XoWdsTX0fdMj3SUpFHx7dQaejh3LtBChep6vdu76PWugsUjSiq1AA8DibkiId77G0HsIE6g/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjewQUIg_j-fdQpOL4nSoH97wb17do6CRZzyRqKCjF-mOvTVtaAHs-uC3y0Aw9VTq6eZyGQaU-QRqCJd2eCLYYY3Msn29Ko7ts1A69QwWrB8qEQ1-fb2_KByTo-RashST2lxLG6pfyauAc/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}
6. Find this by using Ctrl+F </head>
7. Paste below code Before </head>
JAVASCRIPT
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://googledrive.com/host/0B58fhAmOxE7EWVNzSEdubFkwTU0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
 $(&#39;#megamenuid&#39;).megaBloggerMenu({
  postsNumber : 4,
  noThumbnail : &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5vr91muY1rbj119N6b9pKh8fvF-mFrrsrYaVdzwaM8slc7D4Pl1SGjDN3dLadbKVWB8XkH1tPDAMa1IUNPLkbioK2JqmqkCNIb3UeU_Fwjzv3ZZGkZaU7ZXmdlXZ3ssRC8WDuzSEqj6U/s1600/no_image_available.png&#39;
 });
});
$(function(){
  $(&#39;.search-here&#39;).submit(function(e){
    if($(&#39;.search-box .search-field&#39;).val().length==0){
       $(&#39;.search-box .search-alert&#39;).fadeIn().css(&#39;display&#39;,&#39;inline-block&#39;);
      e.preventDefault();
    }
  });
});
</script>
*If Jquery Already Exist,remove Blue Color Highlighted Line.
*To Change The Number of Post,Change postsNumber : 4
*To Add a Different Thumbnail Image When Post Don't have Any Image,Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5vr91muY1rbj119N6b9pKh8fvF-mFrrsrYaVdzwaM8slc7D4Pl1SGjDN3dLadbKVWB8XkH1tPDAMa1IUNPLkbioK2JqmqkCNIb3UeU_Fwjzv3ZZGkZaU7ZXmdlXZ3ssRC8WDuzSEqj6U/s1600/no_image_available.png

HTML

8. There are only three types of URLs that the AJAX Menu accepts and they must be used accordingly.

Label URL:http://yourblogurlblogspot.com/search/label/LABELNAME
Search Query:http://yourblogurl.blogspot.com/search?q=SEARCHQUERY
Label without Search Query:http://yourblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

9.Now Search For The Following Code Using CTRL+F 
<div class='main-outer'>
Just Above This Code Add Following Code
 <ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='URLHERE'>LABEL NAME</a></li>
<li><a href='URLHERE'>LABEL NAME</a></li>
<li><a href='URLHERE'>LABEL NAME</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='URLHERE'>LABEL NAME</a></li>
<li><a href='URLHERE'>LABEL NAME</a></li>
<li><a href='URLHERE'>LABEL NAME</a></li>
</ul></li>
<li><a href='URLHERE'>Normal Link</a></li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/>
*Change URL HERE with your label url And LABEL NAME with Your Text.

10. Now save your HTML/Javascript',Done!

Post a Comment