How to Add A Responsive Mobile Menu In Blogger Blogging How to Add A Responsive Mobile Menu In Blogger
HOW TO ADD A MOBILE REACTIVE MENU IN YOUR BLOGGER EASILY?
Today in following article, I will show you how to add a mobile reactive menu in blogger easily. These day’s menus have changed into reactive menu that provide elasticity for mobile users to navigate through their site easily. If you want to add a mobile, reactive menu to your blogger hopefully after reading this article you will be able to add such a menu in your blogger blog.
WHAT DOES A REACTIVE MENU DO?
These navigated menus are flexible and easy to use as well as they provide a lot of experience for both desktop and mobile users. On a desktop they appear as usual, on the other hand on mobile they appear just like a mobile application with adjusted width, height and well arranged.
HOW TO ADD A REACTIVE MENU IN YOUR BLOGGER EASILY?
There are a number of possible ways and techniques when we are talking about how we can add reactive menu in our blogger. We can handle our reactive menus for small screen devices like mobile phones, smart phones and Tablets etc. to achieve this goal we have got endless resources. In this article, in the following I am going to show a main technique to implement these menus which is easy to use and have less disadvantages than advantages.
The first step you have to take is to go to Blogger.com > Template > Edit HTML and then paste the following code anywhere after opening body <body> tag. Remember paste the code to the place where exactly you want the menu in your blogger.
<!---Menu--> <nav>
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
<li><a href=''>Gallery</a></li>
<li><a href=''>Tutorials</a></li>
<li><a href=''>Contact</a></li>
</ul>
</nav>
<div>
<span>Menu <i/></span>
</div>
<nav/>
</div>
In second step you have to style the menu, for this you have to add the CSS to your blogger template. For this search for
}}]]></b:skin>tag in your template and below this tag just paste the following code
#nav-trigger { display: none; text-align: center; } #nav-trigger span { display: block; background-color: #279CEB; cursor: pointer; text-transform: uppercase; padding: 0 25px; color: #EEE; line-height: 67px; } nav#nav-mobile { margin: 0px; } nav { margin-bottom: 30px; } nav#nav-main { background-color: #279CEB; margin: 0px; float: left; } nav#nav-main ul { list-style-type: none; margin: 0; padding: 0; text-align: center; } nav#nav-main li { display: inline-block; float: left; ont-family: 'Open Sans', sans-serif; } nav#nav-main li:last-child { border-right: none; } nav#nav-main a { padding: 0 25px; color: #EEE; line-height: 67px; display: block; } nav#nav-main a:hover { background-color: #3AB0FF; text-decoration: none; color: #fff; } nav#nav-mobile { position: relatifve; display: none; } nav#nav-mobile ul { display: none; list-style-type: none; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; background-color: #ddf0f9; z-index: 10; padding: 0px; border-bottom: solid 1px #cc0028; } nav#nav-mobile li:last-child { border-bottom: none; } nav#nav-mobile a { display: block; color: #29a7e1; padding: 10px 30px; text-decoration: none; border-bottom: 1px solid #00aeef; } nav#nav-mobile a:hover { background-color: #e6002d; color: #fff; }/* =Media Queries ---------------------------------------------------- */ @media all and (max-width: 900px) { #nav-trigger { display: block; } nav#nav-main { display: none; } nav#nav-mobile { display: block; } }
In third step you have to add the following JavaScript code in your blogger otherwise your menu will not work properly. finally, add the following code just above the </head> tag.
<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $("#nav-mobile").html($("#nav-main").html()); $("#nav-trigger span").click(function(){ if ($("nav#nav-mobile ul").hasClass("expanded")) { $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250); $(this).removeClass("open"); } else { $("nav#nav-mobile ul").addClass("expanded").slideDown(250); $(this).addClass("open"); } }); }); //]]> </script>
When you have gone through the above three steps in your template, save it by pressing "Save Template".
Now test your site from desktop and mobile to experience the difference.Congratulations, you have successfully added mobile reactive menu in blogger.
0 Response to "How to Add A Responsive Mobile Menu In Blogger"
Posting Komentar