Recommanded Articles:
- How to Enable a Responsive Mobile Template inwards Blogger
- How To Make Your Website Responsive to Mobile Devices
What is Responsive Menu?
Responsive menus are such navigation menus, which are flexible as well as user-friendly at the really same time. They render a character sense for both desktop users to mobile users. When on the desktop they appear the traditional way, but on mobile they appear simply similar a mobile application width, tiptop as well as good arranged. In the next screenshot, yous tin clearly run into the same carte appearing dissimilar on the desktop as well as on a smartphone.Live preview of this carte tin live seen at this site http://movieismdemo.blogspot.com//
How to easily add together a Responsive carte inwards Blogger?
When it comes to creating a responsive carte inwards blogger nosotros convey a diversity of techniques on how to nosotros tin grip our navigation menus for pocket-size covert devices similar mobile phones, smartphones as well as etc. The resources nosotros convey got to hit this finish are endless. In this article, nosotros volition demo a principal concept that is easier to implement as well as convey to a greater extent than advantages than disadvantages.The really kickoff matter yous take to create is to become to Blogger.com > Template > Edit HTML as well as glue the next code anywhere later on <body> tag. (Keep inwards heed glue this code just where yous would similar to your carte to appear).
<!---Menu--> <nav id='nav-main'>
<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 id='nav-trigger'>
<span>Menu <i class='fa fa-list'/></span>
</div>
<nav id='nav-mobile'/>
Now yous to mode the menu, yous take to add together the CSS to your template. To create thence over again inwards the template, search for }}]]></b:skin> tag as well as simply below it glue the next code
#nav-trigger {
display: none;
text-align: center;
}
#nav-trigger bridge {
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-main {
background-color: #279CEB;
margin: 0px;
float: left;
}
#nav-main ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
#nav-main li {
display: inline-block;
float: left;
ont-family: '
Open Sans'
, sans-serif;
}
#nav-main li:last-child {
border-right: none;
}
#nav-main a {
padding: 0 25px;
color: #EEE;
line-height: 67px;
display: block;
}
#nav-main a:hover {
background-color: #3AB0FF;
text-decoration: none;
color: #fff;
}
#nav-mobile {
position: relatifve;
display: none;
}
#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: company 1px #cc0028;
}
nav#nav-mobile li:last-child {
border-bottom: none;
}
nav#nav-mobile ul {
padding: 0;
margin: 0;
}
nav#nav-mobile a {
display: block;
color: #29a7e1;
padding: 10px 0px;
text-decoration: none;
border-bottom: 1px company #00aeef;
text-align: center;
}
nav#nav-mobile a:hover {
background-color: #111;
color: #fff;
}
nav#nav-mobile li {
display: block;
}
nav#nav-mobile {
display: none;
}
/* =Media Queries
-------------------------------------------------------------- */
@media all as well as (max-width: 900px) {
#nav-trigger {
display: block;
}
#nav-main {
display: none!important;
}
nav#nav-mobile {
display: block;
}
}
After adding HTML as well as CSS centre coding, without adding the next JavaScript code the carte would non piece of occupation correctly. Therefore, add together the next code simply higher upwards 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>
Frequently Asked Questions:
Why when I click the Menu it doesn't open?Answer: Make certain yous convey followed the instructions mentioned higher upwards correctly. In illustration yous are certain yous convey followed the steps correctly yous mightiness live missing a jquery.min.js file, piece is must to trigger the carte on mobile. Go to Blogger >> Template >> Edit HTML >> search for <head> as well as simply below it glue the next code:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>
We promise this tutorial volition assistance everyone inwards learning how to easily add together a responsive carte inwards blogger without facing much of worries. If yous similar this article, create part it amongst your friends.
No comments:
Post a Comment