This menu is what I used to design my ObhiabaCyrack blogger template. The menu is fast loading and does not affect the loading speed of your blog because it is built on pure HTML, CSS, and Javascript.
Main Feature Of The Menu
Float on Scroll
This menu has javascript file, that makes it float while your users are scrolling down your blog. This kind of widget increase your blog's clear navigation and also let the users easily move around your blog without having to scroll back up again for menu items.Responsive On Mobile
My major concern while building this menu was responsiveness. I kind of love responsive designs because they are mobile user-friendly and SEO optimized.Schema Tag
I have never done this before, except on my mind blog. Schema tags are specified tags which google and other search engines use to identify the different section of the page. Using these tags increase your blog SEO as search engines find your blog very easy to crawl.
Simple Design
Easy to set up and also comes with a simple design. I know many persons love drop-down menus. Am no fan of it, I believe you should stop hiding items on drop-downs this is why I didn't include any drop-down menu.Info: If you wish to create responsive themes, read this post - Make Blogger Blog Fully Responsive And Mobile Friendly
See Demo
Live Preview
Add Mobile Responsive Blogger Navigation
We are going to be making use of the template HTML section to add CSS and JavaScript while we will go to layout to add the HTML.Go to themes >> Edit HTML.
The CSS
I defined the look and styles of the menu using pure CSS. below is the CSS code, simply copy and paste it below ]]></b:skin>
.topnav{overflow:hidden;background-color:#fff;z-index:9999;width:100%;height:50px;margin-bottom:0;box-shadow:2px 2px 3px rgba(0,0,0,.05);padding-top:0;border-top:1px solid #eee;background:#fff}
.topnav a{float:left;display:block;color:#303030;text-align:center;padding:14px 16px;text-decoration:none;font-size:16px}
.topnav a:hover{background-color:#ddd;color:black}
.topnav .icon{display:none}
@media screen and (max-width:600px){.topnav a:not(:first-child){display:none}.topnav a.icon{float:right;display:block}}
@media screen and (max-width:600px){.topnav.responsive{position:relative}.topnav.responsive .icon{position:absolute;right:0;top:0}.topnav.responsive a{float:none;display:block;text-align:left}}
The JavaScript.
Like I said early, the functionality of this menu which includes its ability to float on a scroll and also become responsive on mobile is built purely on JavaScript.Copy and paste the below codes above </body> in your theme body.
<!--Blogger Floating Menu by Obhiaba Blog-->
<script type='text/javascript'>
//<![CDATA[
$(function() {
var nav = $('.topnav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
//]]>
</script>
<script type='text/javascript'>
var nav = $('#menu > ul > li');
nav.find('li').hide();
nav.click(function () {
nav.not(this).find('li').hide();
$(this).find('li').slideToggle();
});
$(function() {
$('#menu input').click(function () {
$('#menu ul').slideToggle()
});
});
</script>
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
The HTML
Using HTML I have defined the tags and Schema, all you need to do is add the below code inside an HTML/JavaScript box. Either above your blog header or below blog header.
<div class="topnav" id="myTopnav" itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
You can add more menu items by adding <a href="#contact">Contact</a> below Home item.
Rounding Up
This menu navigation is simple and unique. Its functions are both of proper functionality and amazing design. It's is customizable since you can simply change the background colors and text colors. Enjoy this blogger widget and leave your comments below.Share with your friends on social media if this post was worth a read!.
the demo link is redirecting to 404 error page....
ReplyDelete