Create Google Like New Menu With jQuery And CSS

    Rating: ★★★★☆
    View: 161
    Download: 101
    Từ khóa:

     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:

    Google like New Menu with jQuery and CSS - InfoTuts

    More

    Simple CSS code created everything that I needed.

    Below is our CSS code:

    #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;
     }

    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:

    $(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('Even more from Google').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'});
     });
    });

    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.

    loading Đang tải...

    template được ưa chuộng