Few Things About Me
Though I am not that well in design, but yeah after spending all of my 4-5 months in studying about web-design, it's trends and it's techniques one thing I have learnt for sure that Blogger really needs a make up.
Yeah! you got it right, I said make up! There's no doubt that Blogger is the only platform which gives you flexibility of 200%. You have complete freedom to reshape it into any type of site you want, whether be it Portfolio, magazine, minimal, responsive or fluid.
But the major thing where Blogger lags behind is design i.e. D-E-S-I-G-N. But thanks to all the design freaks out there like Raj and many who are consistently redesigning Blogger, I guess that due to this reason workers at Bloggers office are very dull because more than half of their work is being done by the bloggers like us... Yeah it's true just think on it :D
So Let's Start Out
Friends you are aware of the fact that the emergence of smartphones, tablets and other small screen devices has brought a revolution of responsiveness among the designers. If you are wondering what responsiveness is then to clear your confusion let me tell you:
Responsiveness is the term used for responsive design which means that the design of the website will automatically adjust itself according to the width of device's screen size!
Responsiveness is the term used for responsive design which means that the design of the website will automatically adjust itself according to the width of device's screen size!
for e.g.
Take the design of Techsperia for example. Device screen width of iPhone is360px whereas width of a normal desktop ranges from 1280px to 1600px. Hence, when you open Techsperia from an iPhone, the design will automatically adjust itself according to iPhone's width i.e. 360px! The same applies if you open it from a desktop...
Today in this tutorial I am going to share my experience on how I created my first responsive menu-bar!
A menu-bar is a little bar which is normally placed at the top of a website/blog. It contains navigation links like Home, About, Contact, etc...
A menu-bar is a little bar which is normally placed at the top of a website/blog. It contains navigation links like Home, About, Contact, etc...
Step 1 : Basic HTML coding of the menu-bar
For this you will have to open your Blogger dashboard → Template → Edit HTML and then search for the
Now copy paste the following code and paste it just below/after the
<body> tag which is just below the closing </head> tag.Now copy paste the following code and paste it just below/after the
<body> tag<div class='sticky-menu'>
<div class='wrap1'>
<nav class='clearfix'>
<ul class='clearfix'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Technology</a></li>
<li><a href='#'>Reviews</a></li>
<li><a href='#'>Gadget</a></li>
<li><a href='#'>Smartphones</a></li>
<li><a href='#'>Lifestyle</a></li>
</ul>
<a href='#' id='pull'>Menu</a></nav>
</div><!-- /wrap1 -->
</div><!-- /sub-nav-menu -->
Step 2 : Adding the CSS
After finding it, paste the following CSS code exactly before/above it.
/* ---------- Responsive Menu-bar ------ */1. #55AFDA is the background color of the menu, you can search it in your template by pressing Ctrl+F and change it according to your taste.
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
.sticky-menu {
background: #55AFDA;
padding: 0;
margin: 0 auto;
width: 100%;
position: fixed;
z-index: 99999;
top: 0;
}
.sticky-menu nav {
height: 40px;
width: 100%;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
}
.sticky-menu nav ul {
padding: 0;
margin: 0 auto;
height: 40px;
max-width:1060px;
}
.sticky-menu nav li {
list-style: none;
float: left;
padding: 0;
margin: 0 0 0 1.5%;
}
.sticky-menu nav a {
color: #FFF;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
padding: 8px 10px 6px 10px;
}
.sticky-menu nav li:last-child a {
border-right: 0;
}
.sticky-menu nav a:hover, nav a:active {
background-color: rgba(54, 119, 163, 0.55);
color: #FFF;
}
.sticky-menu nav a#pull {
display: none;
}
/* Styles for Desktop and Laptop */
@media screen and (min-width:1024px)
{
.sticky-menu nav a{
padding:8px 10px 6px 10px;
width:auto;
}
.sticky-menu nav li{margin:0 10px 0 0}
}
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
.sticky-menu nav { height: auto;}
.sticky-menu nav ul {
width: 100%;
display: block;
height: auto;}
.sticky-menu nav li {
width: 50%;
float: left;
position: relative;
padding: 0;
margin: 0;
}
.sticky-menu nav li a {
border-bottom: 1px solid #585858;
border-right: 1px solid #585858;
padding: .51em 0;
margin: 0;
}
.sticky-menu nav a {
text-align: left;
width: 100%;
text-indent: 25px;}
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
.sticky-menu nav {
border-bottom: 0;
}
.sticky-menu nav ul {
display: none;
height: auto;
}
.sticky-menu nav li {
display: block;
float: none;
width: 100%;
}
.stikcy-menu nav li a {
border-bottom: 1px solid #585858;
}
.sticky-menu nav a:hover, .sticky-emnu nav a:active {text-shadow:none}
.sticky-menu nav a#pull {
display: block;
background-color: rgba(48, 129, 204, 0.93);
width: 100%;
position: relative;
color:white;
text-shadow:none
}
.sticky-menu nav a#pull:after {
content:"";
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQsvV17fo3s-p7G60js_sRyS9P_baDcpp_wzn8fhi1N-feGXHP1vi0hI8aPE1S4T0gELR3RuyNtvSbxTH9l7Rh3IWLICHuEO8vA3rrFNiBIs3Y_pTtyMRohimNoakSth8o7R-OBR2asE/s1600/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
}
}
2. rgba(54, 119, 163, 0.55) is the background color of menu-links.
3. rgba(48, 129, 204, 0.93) is the background color for the pull button which becomes visible in phone screens.
Step 3 : Adding jQuery code
After Step 2, search for the closing </head> tag and add the following code just above/before it.
<script type='text/javascript'>
/*<![CDATA[*/
//Responsive Menu
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
/*]]>*/</script>
What Now?
After adding all the codes properly in your Blogger template, click on Save template.
Now to view the responsive menu-bar in action, open your blog in a new tab. Once your blog is opened completely, keep on reducing the size of the browser window and see the menu-bar getting auto-resized!
0 comments:
Post a Comment