jquery - hamburger menu should display above the background content -
i have created hamburger menu @ right top corner of html,css, jquery. when click on hamburger menu icon.it sliding down , existing background sliding down. want after clicking on hamburger icon menu should appear above background instead of sliding down existing content.
$(".cross").hide(); $(".menu").hide(); $(".hamburger").click(function() { $(".menu").slidetoggle("slow", function() { $(".hamburger").hide(); $(".cross").show(); }); }); $(".cross").click(function() { $(".menu").slidetoggle("slow", function() { $(".cross").hide(); $(".hamburger").show(); }); });html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* html5 display-role reset older browsers */ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; } body { line-height: 1; } ol,ul { list-style: none; } blockquote,q { quotes: none; } blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .header { background-color: #c1d72f; padding: 40px 5px 40px 5px; } .header img {} .header h2 { color: #fff; padding: 0 5px; font-size: 16px; font-weight: 700; } .social-icon { float: right; } .main-body { padding: 15px; } .main-body h2 { font-size: 40px; color: #3f4906; padding: 10px 10px 20px 0; } .main-body p { font-weight: bold; line-height: 20px; font-size: 17px; padding: 10px 0; } .main-body-info { width: 100%; } .main-body-image { width: 50%; float: left; } .main-body span { font-weight: bold; line-height: 20px; font-size: 17px; padding: 10px 0; } header { width: 100%; height: 50px; line-height: 50px; } .hamburger { background: none; position: absolute; top: 0; right: 0; line-height: 45px; padding: 0px 15px 0px 15px; color: #fff; border: 0; font-size: 1.4em; font-weight: bold; cursor: pointer; outline: none; z-index: 10000000000000; } .cross { background: none; position: absolute; top: 0px; right: 0; padding: 0px 15px 0px 15px; color: #fff; border: 0; font-size: 3em; line-height: 65px; font-weight: bold; cursor: pointer; outline: none; z-index: 10000000000000; } .menu { z-index: 1000000; font-weight: bold; font-size: 0.8em; width: 100%; ; position: #fff; text-align: center; } .menu ul { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } .menu li { display: block; padding: 15px 0 15px 0; border-bottom: #1d1f20 1px solid; } .menu li:hover { display: block; background: #181818; padding: 15px 0 15px 0; border-bottom: #1d1f20 1px solid; } .menu ul li { text-decoration: none; margin: 0px; color: #000; } .menu ul li a:hover { color: #000; text-decoration: none; } .menu { text-decoration: none; color: white; } .menu a:hover { text-decoration: none; color: white; } .glyphicon-home { color: white; font-size: 1.5em; margin-top: 5px; margin: 0 auto; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="header"> <button class="hamburger">☰</button> <button class="cross">˟</button> <div class="menu"> <ul> <a href="#"> <li>bokningsfÖrfrÅgan</li> </a> <a href="#"> <li>konferensadministration</li> </a> <a href="#"> <li>kontaktuppgifter</li> </a> <a href="#"> <li>nyheter</li> </a> </ul> </div> <a href="index.html"> <img src='http://studio.gomogroup.com.s3-eu-west-1.amazonaws.com/original/8162/konferenspoolen_logo.png?1473414803' width="100%" /> </a> <h2>specialister på möten och konferenser sverige</h2> <div class="social-icon"> <a href="https://www.linkedin.com/company/konferenspoolen"> <img src='social-icon/linkedin.png' width="35px" height="35px" /> </a> <a href="index.html"> <img src='social-icon/gmail.jpg' width="35px" height="35px" /> </a> <a href="https://www.facebook.com/konferenspoolen/?fref=ts"> <img src='social-icon/fb.png' width="35px" height="35px" /> </a> </div> </div> </div>
add position: absolute menu class.
you want add background can see more clearly.
Comments
Post a Comment