Search engines also like when the site has navigation elements because it greatly simplifies the movement on it. So use this widget right now.
How to add a horizontal dropdown menu in Blogger
It's not so easy to find a dropdown menu which will work fine for each Blogger Themes (Templates), because every different theme has its own markup. But there is one good menu, which I fink, can handle by this task perfectly. The main advantages of this menu are that it has a dropdown buttons, it's responsive, and will look great on mobile devices. Also, it's partially sticky. DEMO
So, go to your Blogger dashboard, open Theme - Edit HTML, find there closing tag
Save Theme and check the result. If Mobile version of this menu will not work, add into your Theme just before the closing tag
</body> and paste above it this HTML code:
<div class='nav_wrapper'>
<!--<a class="menu-link" href="#menu"></a>-->
<div class='spinner-master'>
<input id='spinner-form' type='checkbox'/>
<label class='spinner-spin' for='spinner-form'>
<div class='spinner diagonal part-1'/>
<div class='spinner horizontal'/>
<div class='spinner diagonal part-2'/>
</label>
</div>
<a class='btn' href='#search_box' id='search'>☌</a>
<nav class='menu' id='menu'>
<ul class='dropdown'>
<li><a href='#' title='Link'>Home</a></li>
<li><a href='#' title='Link'>Category</a>
<ul>
<li><a href='#' title='Link '>Link</a></li>
<li><a href='#' title='Link'>Link</a></li>
</ul>
</li>
<li><a href='#' title='Link'>Portfolio</a>
<ul>
<li><a href='#' title='Link'>Link</a></li>
<li><a href='#' title='Link'>Link</a></li>
<li><a href='#' title='Link'>Link</a></li>
</ul>
</li>
<li><a href='#' title='Link'>Work</a>
<ul>
<li><a href='#' title='Link'>Link</a></li>
<li><a href='#' title='Link'>Link</a></li>
<li><a href='#' title='Link'>Link</a></li>
<li><a href='#' title=' Link'> Link</a></li>
</ul>
</li>
<li><a href='#' title='Link'>Playground</a>
<ul>
<li><a href='#' title='Link'>Link </a></li>
<li><a href='#' title='Link'>Link</a></li>
<li><a href='#' title='Link'>Link</a></li>
</ul>
</li>
<li><a href='#' title='Link'>Sitemap</a></li>
</ul>
</nav>
<form action='/search/' class='search_box' id='search_box'>
<input name='search_criteria' placeholder='Search' type='text' value=''/>
<input class='search_icon' type='submit' value='Search'/>
</form>
</div>
<style>
.centered-top-container.sticky {position: absolute;}
.centered-top-container {top: 20px;
position: relative;}
nav { width: 100%; } .nav_wrapper { position: fixed; left: 0; top: 0; width: 100%; transition: top .5s ease-out; background: #2f3b3f;z-index:9999999 } .scroll { top: -90px; } .no-scroll { top: 0; z-index: 9999; } .btn { padding: 10px 1%; margin: 5px; color: #fff; text-decoration: none; font-family: sans-serif; transition: all 0.1s ease; } .btn:hover { transition: all 0.1s ease; } #search { float: right; font-size: 30px; padding: 2px 15px; line-height: 40px; color: #fff; margin: 0; font-weight: 700; -webkit-transform: rotate(181deg); -moz-transform: rotate(181deg); -ms-transform: rotate(181deg); -o-transform: rotate(181deg); transform: rotate(181deg); } #search:hover { color: #25a186; } .search_box { clear: both; width: 100%; background: #e8ebf0; padding: 0; margin: 0; height: 0; overflow: hidden; transition: all 0.1s ease-in-out; } .search_box.active { height: auto; padding: 15px 0; } .search_box input { width: 80%; font-size: 13px; margin: 0 0 0 15px; padding: 10px; border: none; background: #fff; } .search_box input:focus { outline: none; } .search_box input.search_icon { clear: both; width: 10%; height: auto; padding: 10px; margin: 0; margin-left: -5px; border: none; color: #fff; cursor: pointer; background: #8c949d; opacity: 1; transition: all 0.1s ease; } .search_box input.search_icon:hover { background: #25a186; } .menu-link { display: none; } .spinner-master input[type=checkbox] { display: none; } .menu { width: 100%; height: auto; background: #2f3b3f; transition: all 0.3s ease; } .menu ul { padding: 0px; margin: 0px; list-style: none; position: relative; display: inline-block; } .menu > li > ul.sub_menu { min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #fff; } .menu ul li { padding: 0px; } .menu > ul > li { display: inline-block; } .menu ul li a { display: block; text-decoration: none; color: #fff; font-size: 14px; } .menu ul li a:hover { background: #25a186; color: #fff; } .menu ul li.hover > a { background: #25a186; color: #fff; } .menu ul li > a { padding: 15px; } .menu ul ul { display: none; position: absolute; top: 100%; min-width: 160px; background: #39484d; } .menu ul li:hover > ul { display: block; } .menu ul ul > li { position: relative; } .menu ul ul > li a { padding: 10px 15px; height: auto; background: #39484d; } .menu ul ul > li a:hover { background: #25a186; color: #fff; } .menu ul ul ul { position: absolute; left: 100%; top: 0; } @media all and (max-width: 768px) { .example-header .container { width: 100%; } #search { padding: 10px; } .spinner-master * { transition: all 0.3s; box-sizing: border-box; } .spinner-master { position: relative; margin: 15px; height: 30px; width: 30px; float: left; } .spinner-master label { cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 5px; left: 0; } .spinner-master .spinner { position: absolute; height: 4px; width: 100%; padding: 0; background-color: #fff; } .spinner-master .diagonal.part-1 { position: relative; float: left; } .spinner-master .horizontal { position: relative; float: left; margin-top: 4px; } .spinner-master .diagonal.part-2 { position: relative; float: left; margin-top: 4px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal { opacity: 0; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 { transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-top: 10px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-top: -12px; } a.menu-link { display: block; color: #fff; float: left; text-decoration: none; padding: 10px 16px; font-size: 1.5em; } a.menu-link:hover { color: #25a186; } a.menu-link:after { content: "\2630"; font-weight: normal; } a.menu-link.active:after { content: "\2715"; } .menu { clear: both; min-width: inherit; float: none; } .menu, .menu > ul ul { overflow: hidden; max-height: 0; background-color: #39484d; } .menu > li > ul.sub-menu { padding: 0px; border: none; } .menu.active, .menu > ul ul.active { max-height: 55em; } .menu ul { display: inline; } .menu li, .menu > ul > li { display: block; } .menu > ul > li:last-of-type a { border: none; } .menu li a { color: #fff; display: block; padding: 0.8em; position: relative; } .menu li.has-submenu > a:after { content: '+'; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0.55em 0.5em; } .menu li.has-submenu > a.active:after { content: "-"; } .menu ul ul > li a { background-color: #39484d; padding: 10px 18px 10px 30px; } .menu ul li a:hover { background: #4b5f65; color: #fff; } .menu ul li.hover > a { background: #4b5f65; color: #fff; } .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top: auto; border: none; } .search_box { position: absolute; top: 60px; left: 0; z-index: 10; } .search_box input { width: 70%; } .search_box input.search_icon { width: 17%; }; }
</style>
<script type='text/javascript'>
$("ul li:has(ul)").addClass("has-submenu");$("ul li ul").addClass("sub-menu");$("ul.dropdown li").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});var $menu=$("#menu"),$menulink=$("#spinner-form"),$search=$("#search"),$search_box=$(".search_box"),$menuTrigger=$(".has-submenu > a");$menulink.click(function(e){$menulink.toggleClass("active");$menu.toggleClass("active");if($search.hasClass("active")){$(".menu.active").css("padding-top","50px")}});$search.click(function(e){e.preventDefault();$search_box.toggleClass("active")});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass("active").next("ul").toggleClass("active")});$("ul li:has(ul)");$(function(){var e=$(document).scrollTop();var t=$(".nav_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".nav_wrapper").css("position","fixed")}else{$(".nav_wrapper").css("position","fixed")}if(n>t){$(".nav_wrapper").addClass("scroll")}else{$(".nav_wrapper").removeClass("scroll")}if(n>e){$(".nav_wrapper").removeClass("no-scroll")}else{$(".nav_wrapper").addClass("no-scroll")}e=$(document).scrollTop()})})
</script>Save Theme and check the result. If Mobile version of this menu will not work, add into your Theme just before the closing tag
</head> this jquery code:<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>Video instruction:
Now, if you have any questions, write it in the comments below.
Simple CSS Dropdown Menu for Default Blogger Themes
You already know that the Blogger has a standard menu (Pages widget) where you can add not only static pages but also links to any other pages. And by default, there is no way to set dropdown links in it. This is exactly what we are going to fix. First, go to your control panel, Layout section, create a new HTML / Javascript gadget, place the HTML code in it:<div class="section" id="page_list_top" name="Page list (upper)"><div class="widget PageList" data-version="2" id="PageList1">
<div class="widget-content">
<div class="overflowable-container overflowable-3">
<div class="overflowable-contents">
<div class="container">
<ul class="tabs">
<li class="overflowable-item" aria-hidden="false">
<a href="#">Home</a>
</li>
<li class="overflowable-item" aria-hidden="false">
<a href="#">News</a>
</li>
<li class="overflowable-item" aria-hidden="false">
<a href="#">Download games</a>
</li>
<div class="dropdown">
<li class="dropbtn"><a href="#"> Dropdown <i aria-hidden="true" class="fa fa-caret-down"></i></a>
</li>
<div class="dropdown-content">
<a href="#">Sport</a>
<a href="#">Movie</a>
<a href="#">Business</a>
<a href="#">Tech</a>
<a href="#">Music</a>
<a href="#">News</a>
<a href="#">Health</a>
</div>
</div>
</ul>
</div>
</div>
</div></div></div></div>Now go to the Theme - Edit HTML and add after the
]]></b:skin> the following CSS code:
<style>
.tabs-inner {padding: 0;}
.overflowable-container, #page_list_top .widget.PageList .overflowable-contents, .blog-name, .top-nav .PageList, .centered-top-secondline .PageList ul{overflow:visible;}
.tabs-outer{overflow:visible;}
.tabs .widget ul, .tabs .widget ul{overflow:visible;}
.dropdown a:hover {text-decoration:none;}
.dropbtn a{color:#!important}
.dropbtn { border: none; position: relative; color: #cccccc; background: #3330; padding: 0px; float: none!important;} .dropdown { position: relative; cursor: pointer; display:inline-block; margin-right:0px;} .dropdown-content { display: none; position: absolute; min-width: 160px; z-index: 9; margin-top: 0px;} .dropdown-content a { color: #fff!important; padding: 12px 16px; text-decoration: none; display: block; margin-left: 0px; background: #11111175; position: relative; float: left; width: 100%; text-align: left; } .dropdown-content a:hover {background: #!important; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; -webkit-transition: all 0.6s ease-out;} .dropdown:hover .dropdown-content { display: block; } .dropdown-content a:before {content:"";position:absolute;width:0;left:0;right:0;margin:auto; bottom:5px;height:3px;background:#fff;opacity:0;visibility:hidden;transition: all 0.8s ease-in-out;} .dropdown-content a:hover:before {opacity:1;visibility:visible;width:90%;}
@media(max-width:700px) {.overflowable-container{display: inline-block;}}
</style> If you're using the Soho Theme then add another chunk to the CSS:
li.dropbtn:before { color: rgba(0, 0, 0, 0.54); content: '\00b7'; }
.png "Top 16 Blogger Widgets. Free HTML Blogspot Gadgets")
9 Comments
It was successfully run, but when searching the blog, an update is made for the same page only
There is an error code in searching from / input class='search_icon' type='submit' value='Search'/
to me/ input name='q' onblur='if (this.value == '') {this.value = '';}' placeholder='أبحث في AflamHD5' type='text' value=''/
In this case, don't change the code, leave it in the default.
Thank you, this works perfectly! (on my test blog for now)
Welcome!
hi bro its showing error at bskin saying bracket shouldnt be there ,,,hoq to solve
because you need to place the code after closing tag skin, not before.
Just tried out your drop down menu. Fantastic.
Is there a floating menu that moves down the page as you're scrolling?
I am it the setting up stage of my blog at the moment so I am on a steep learning curve.
You can make it by yourself, just remove from CSS this code:
.scroll {top: -90px;}