Google replaced its old menu bar with a new one and this UI change on main page of Google was a big step and was an interesting topic among designers across the world . Earlier there was a black menu bar at the top of page displaying most popular services from Google. The new menu displays all services as icons when you click on menu. I liked this because if we have too many services (menu items) and we don’t want to eat up large space in your header then this type of menu fits best. It is also useful for mobile and tablets devices. We can easily build Google like new menu using jQuery and CSS, thanks to jQuery animate() function for making it so easy to get similar animation effect.
Now we will see how easily we can create Google like menu using jQuery and little bit of simple CSS code. I cropped all images from Google Menu and then created an HTML markup and used CSS to fit them all inside the div.
Below is our simple HTML markup that is used to create this menu:
Simple CSS code created everything that I needed.
</p>
<body>
<div id="mhead"> <h2>Google like New Menu with jQuery and CSS - InfoTuts </h2></div>
<div id="container">
<div id="menu"><img src="images/menu.png"></div>
<div class="arrow"></div>
<div id="gridbox">
<div id="innergrid">
<ul id="icons">
<li><img src="images/googleplus.png"></li>
<li><img src="images/search.png"></li>
<li><img src="images/youtube.png"></li>
<li><img src="images/Maps.png"></li>
<li><img src="images/googleplay.png"></li>
<li><img src="images/googlenews.png"></li>
<li><img src="images/gmail.png"></li>
<li><img src="images/googledrive.png"></li>
<li><img src="images/Gcal.png"></li>
<li><img src="images/gtranslate.png"></li>
<li><img src="images/googlebooks.png"></li>
<li><img src="images/blogger.png"></li>
<li><img src="images/photos.png"></li>
</ul>
</div>
<div id="more">More</div>
</div>
</div>
</body>
<p style="text-align: justify;">
Simple CSS code created everything that I needed.
Below is our CSS code:
Now my HTML CSS part is done and all I have to do is write jQuery code so that I can give some cool animation effects just like Google menu has.
</p>
#mhead{
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
text-align: center;
font-family: georgia;
}
#container{
width:400px;
height:300px;
border:solid #CCC 0px;
padding:5px;
margin:0 auto;
margin-top:60px;
position: relative;
z-index: 1;
}
ul{
list-style:none;
margin:0;
padding:0;
}
li{
float:left;
padding:5px;
border:solid #666 0;
cursor: pointer;
}
#menu{ cursor:pointer;
position: relative;
left: 120px;
}
#gridbox{
width:265px;
height:355px;
background-color:#FFF;
box-shadow:0 0 10px #CCC;
border:solid #CCC 1px;
font-size:18px;
color:#666;
overflow:hidden;
display:none;
}
#innergrid{
width:300px;
height:290px;
overflow:hidden;
margin:15px;
}
.arrow{
margin-left: 118px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 20px 15px;
border-color: transparent transparent #efefef transparent;
display: none;}
#more{
width:100%;
height:30px;
cursor:pointer;
background-color:#efefef;
text-align:center;
vertical-align: middle;
padding:10px 0 0 0;
font-size:16px;
}
#icons img{
width: 68px;
height: 80px;
}
<p style="text-align: justify;">
Now my HTML CSS part is done and all I have to do is write jQuery code so that I can give some cool animation effects just like Google menu has.
Below is our jQuery code:
Note: In above jQuery code we have used event.stopPropagation(); method whenever animation has finished just to stop the events chain.
</p>
$(document).ready(function(){
$('#menu').click(function(event){
$('.arrow').slideToggle('slow');
$('#gridbox').slideToggle('slow',function(){
$('ul').animate({marginTop:'0'});
$('#gridbox').animate({height:'355px'});
$('#more').text('More').animate({marginTop:'0'});});
event.stopPropagation();
});
$('#more').click(function(event){
$('ul').animate({marginTop:'-280px'},200);
$('#gridbox').animate({height:'280px'},200);
$('#more').html('<b>Even more from Google</b>').animate({marginTop:'-80px'},200);
event.stopPropagation();
});
$('body').click(function() {
$('.arrow').hide();
$('#gridbox').hide();
$('ul').animate({marginTop:'0'});
$('#gridbox').animate({height:'355px'});
$('#more').text('More').animate({marginTop:'0'});
});
});
<p style="text-align: justify;">
Note: In above jQuery code we have used event.stopPropagation(); method whenever animation has finished just to stop the events chain.
It almost looks similar to Google’s new menu but still there are some missing things. Like it doesn’t gives you a scroll bar to go up when you click on “more” to see more services. I recommend you to look at jQuery animate() function and how it can be used to create awesome effects. If you like this tutorial please share it with your friends and followers.
Tidak ada komentar:
Posting Komentar
Selamat datang Di Websiteaeria , kami sangat menghargai bagi yang mengunjungi Blog kami .