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(); }); });
You are very good at that.
ReplyDeleteคาสิโนออนไลน์ที่น่าเชื่อถือและมีความเป็นมืออาชีพที่สุดในตอนนี้
โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
เพียงแค่คุณสมัคร สล็อตออนไลน์ กับทางทีมงานของเราเพียงเท่านั้น
ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
สมัครสล็อตออนไลน์ >>> Goldenslot
สนใจร่วมสนุกกับ คาสิโนออนไลน์ คลิ๊กได้เลย
มีทั้งคาสิโนออนไลน์ หวยออนไลน์ ฟุตบอลออนไลน์ สล็อตออนไลน์ และอื่นๆอีกมากมาย
Great Article
DeleteCloud 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
Thank you for making me aware of this news.
ReplyDeleteหางานราชการ
You are very good at that.
ReplyDeleteงานราชการ
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.
ReplyDeleteEcommerce Website Design
Good blog. Keep sharing. I love them Are you also searching for Cheap assignment writers? we are the best solution for you. We are best known for delivering writing services to students without having to break the bank
ReplyDeleteGood blog. Keep sharing. I love them Are you also searching for Spanish writing help? we are the best solution for you. We are best known for delivering Spanish writing services to students without having to break the bank
ReplyDeleteGet all of the verb Stocktwits Updates you need to succeed in investing and trading on the Live, Real-Time Stock Market Overview. Be one of the first to know if verb Stocktwits has increased in value or if other stocks are trending up or down. Live notifications will tell you about all of these things in a clear and concise manner so that you can make the right decisions on your next investment in verb Stocktwits.
ReplyDeleteSimply Log Into Your Vo Colorstreet Com Login Account From Your Device Or Computer Browser To Manage Your Account. Doing So Will Allow You To Review Your Account Balance, Add A Refill Card, Make A Payment, And Much More.
ReplyDelete