We can design menu button in an interactive way like displaying different shapes with animation . Observe the below diagram for shapes with user actions.

HTML Markup 

<div class="side-nav">
  <button class="navbar-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar top"></span>
    <span class="icon-bar middle"></span>
    <span class="icon-bar bottom"></span>
  </button>
  <div class="menuPanel">
  </div>
</div>

CSS 

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 9px 10px;
    margin-top: 23px;
    margin-bottom: 23px;
    border: 1px solid transparent;
    border-radius: 1px;
    cursor:pointer;
    z-index:1;
}

.navbar-toggle:focus {
    outline: none
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px
}

.navbar-toggle {
    display: block;
    background: #2fc7f7;
    float: none;
    width: 75px;
    height: 75px;
    border-radius: 0;
    margin-right: 15px;
    padding: 10px 15px;
    margin-top: 8px;
    margin-bottom: 8px
}

.navbar-toggle:hover {
    -webkit-transition: margin-bottom 500ms ease-in-out;
    transition: margin-bottom 500ms ease-in-out
}

.navbar-toggle:hover span.icon-bar {
    position: relative
}

.navbar-toggle:hover span.icon-bar.top {
    top: 7.5px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.navbar-toggle:hover span.icon-bar.middle {
    left: 0px;
    position: relative
}

.navbar-toggle:hover span.icon-bar.bottom {
    bottom: 7.5px;
    position: relative;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.navbar-toggle span.icon-bar {
    background: #fff;
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 1px;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out
}

.navbar-toggle.active {
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out
}

.navbar-toggle.active span.icon-bar {
    position: relative;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out
}

.navbar-toggle.active span.icon-bar.top {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 0px
}

.navbar-toggle.active span.icon-bar.middle {
    width: 0;
    height: 0;
    margin: 0 auto
}

.navbar-toggle.active span.icon-bar.bottom {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 0;
    top: -4px;
}
.menuPanel {
    background: #2fc7f7;
    font-size:40px;
    padding:60px 40px 40px 80px;
    display:none;
    position:absolute;
    top:0px;
    color:#fff;
    line-height:60px;
}

.side-nav {
    position:relative;
    margin:auto;
    width:500px;
}

.side-nav a{
    color:#fff;
    text-decoration:none;
}

jQuery Code

$(function(){
    $(".navbar-toggle").click(function(){
        $(this).toggleClass("active");
        $(this).next(".menuPanel").slideToggle();
    });
});

5 comments:

  1. You are very good at that.
    คาสิโนออนไลน์ที่น่าเชื่อถือและมีความเป็นมืออาชีพที่สุดในตอนนี้
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร สล็อตออนไลน์ กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> Goldenslot
    สนใจร่วมสนุกกับ คาสิโนออนไลน์ คลิ๊กได้เลย
    มีทั้งคาสิโนออนไลน์ หวยออนไลน์ ฟุตบอลออนไลน์ สล็อตออนไลน์ และอื่นๆอีกมากมาย

    ReplyDelete
    Replies
    1. Great Article
      Cloud Computing Projects


      Networking Projects

      Final Year Projects for CSE


      JavaScript Training in Chennai

      JavaScript Training in Chennai

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  2. I read your articles very excellent and the i agree our all points because all is very good information provided this through in the post.

    Ecommerce Website Design

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts