html - Responsive Dropdown Navigation Using Jquery -
i m new jquery. m trying build responsive website, started navigation part. written sort of code navigation , works , navigation having nested items.but problem whenever window resized , navigation collapsed 'menu' nav-button, when click on nav-item overlapping other nav-items. selected nav-item not getting closed, whenever select different nav-item.
fiddle - https://jsfiddle.net/8h8q7y8z/
here code
html
<div class="navbar"> <span class="nav-btn"></span> <div class="container"> <div id="brand"> <img src="img/logo1.png" class="visible" /> <img src="img/smalllogo.png" class="hidden" /> </div> <nav> <ul> <li> <a href="#"> <img src="img/home2.png" height="20" /></a> </li> <li><a href="#">hotel</a></li> <li><a href="#">tours</a></li> <li class="dropdown"><a href="#">europe mail</a><img src="img/arrowdown.png" /> <ul class="dditems"> <li><a href="europerail.html">europe rail</a></li> <li><a href="europerailworld.html">europe rail world</a></li> </ul> </li> <li class="dropdown"><a href="#">vacations</a><img src="img/arrowdown.png" /> <ul class="dditems"> <li><a href="vocation.html">cheap caribbean</a></li> <li><a href="hurtigruten.html">hurtigruten</a></li> <li><a href="contiki.html">contiki</a></li> <li><a href="sandals.html">sandals</a></li> </ul> </li> <li class="dropdown"><a href="#">home rentals</a><img src="img/arrowdown.png" /> <ul class="dditems"> <li><a href="homerental.html">vacation home rentals</a></li> <li><a href="homeexchange.html">home exchange</a></li> <li><a href="homeaway.html">home away europe</a></li> </ul> </li> <li><a href="#">cruise</a></li> <li><a href="#">insurance</a></li> <li class="dropdown"><a href="#">attraction</a><img src="img/arrowdown.png" /> <ul class="dditems"> <li><a href="citypass.html">city pass</a></li> <li><a href="starlinetours.html">starline tours</a></li> <li><a href="dublinpass.html">dublin pass</a></li> <li><a href="newyorkpass.html">new york pass</a></li> <li><a href="trustedtours.html">trusted tours</a></li> <li><a href="pariscityvision.html">paris city vision</a></li> <li><a href="londonpass.html">london pass</a></li> <li><a href="grayline.html">gray line</a></li> <li><a href="smartdestinations.html">smart destinations</a></li> <li><a href="cityexperts.html">city experts ny</a></li> <li><a href="conciergerie.html">conciergerie</a></li> <li><a href="isango.html">isango</a></li> </ul> </li> </ul> </nav> </div> </div> css
html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } * { margin: 0px; padding: 0px; } .container { padding-right: 25px; padding-left: 100px; margin-right: auto; margin-left: auto; text-align: center; } .navbar { background: #333333; height: 50px; position: fixed; width: 100%; margin: 0 auto; } #brand { float: left; padding-right: 30px; padding-top: 10px; } .hidden { display: none; } .visible { display: block; } nav { width: 100%; text-align: center; } nav ul { float: left; line-height: 50px; padding: 0px; margin: 0px; position: relative; } nav ul li { display: inline-block; list-style-type: none; } nav ul li { text-decoration: none; padding: 10px; color: #9d9d9d; font-size: 14px; } nav ul li:hover { background-color: #333; } nav ul li a:hover { color: #fff; } nav ul li:hover ul { display: block; } nav ul ul { display: none; position: absolute; background-color: #333; min-width: 150px; } nav ul ul li { display: block; line-height: 25px; text-align: left; } .dropdown img { display: none; } @media screen , (max-width: 985px) { .container { padding-left: 10px; } .nav-btn { position: relative; float: right; padding: 4px 5px; margin-top: 12px; margin-right: 15px; margin-bottom: 8px; background-color: #fff; border: 1px solid #fff; border-radius: 4px; cursor: pointer; } .nav-btn:hover { color: #9d9d9d; background-color: #fff; } .nav-btn:before { content: "menu"; } .hidden { display: block; } .visible { display: none; } nav { float: right; display: none; background-color: #fff; } nav ul { text-align: left; float: right; line-height: 25px; padding: 5px; } nav ul li { display: block; border-bottom: 1px solid #968a8a; cursor: pointer; } nav ul li:hover { background-color: #968a8a; } nav ul li { color: rgb(0,0,0); } nav ul li:hover ul { display: none; } .dropdown img { display: block; float: right; margin-top: 4px; margin-right: 4px; } ul .dditems { width: 100%; background-color: #968a8a; } } @media screen , (max-width: 1094px) { .container { padding-left: 10px; } #brand { padding-right: 10px; } /*.hidden { display: block; } .visible { display: none; }*/ } js
$(document).ready(function () { $("span.nav-btn").click(function () { $("nav").slidetoggle(); }); }); $(document).ready(function () { var mainmenu = $(this).next('ul'); $(".dropdown").click(function () { $(this).children(".dditems").slidetoggle(); }); });
change css - i've done change absolute position relative , given menu fixed width, can of course change:
html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } * { margin: 0px; padding: 0px; } .container { padding-right: 25px; padding-left: 100px; margin-right: auto; margin-left: auto; text-align: center; } .navbar { background: #333333; height: 50px; position: fixed; width: 100%; margin: 0 auto; } #brand { float: left; padding-right: 30px; padding-top: 10px; } .hidden { display: none; } .visible { display: block; } nav { width: 100%; text-align: center; } nav ul { float: left; line-height: 50px; padding: 0px; margin: 0px; position: relative; } nav ul li { display: inline-block; list-style-type: none; } nav ul li { text-decoration: none; padding: 10px; color: #9d9d9d; font-size: 14px; } nav ul li:hover { background-color: #333; } nav ul li a:hover { color: #fff; } nav ul li:hover ul { display: block; } nav ul ul { display: none; position: relative; background-color: #333; /*min-width: 150px;*/; } nav ul ul li { display: block; line-height: 25px; text-align: left; } .dropdown img { display: none; } @media screen , (max-width: 985px) { .container { padding-left: 10px; } .nav-btn { position: relative; float: right; padding: 4px 5px; margin-top: 12px; margin-right: 15px; margin-bottom: 8px; background-color: #fff; border: 1px solid #fff; border-radius: 4px; cursor: pointer; } .nav-btn:hover { color: #9d9d9d; background-color: #fff; } .nav-btn:before { content: "menu"; } .hidden { display: block; } .visible { display: none; } nav { float: right; display: none; background-color: #fff; } nav ul { text-align: left; float: right; line-height: 25px; padding: 5px; width: 150px; } nav ul li { display: block; border-bottom: 1px solid #968a8a; cursor: pointer; } nav ul li:hover { background-color: #968a8a; } nav ul li { color: rgb(0,0,0); } nav ul li:hover ul { display: none; } .dropdown img { display: block; float: right; margin-top: 4px; margin-right: 4px; } ul .dditems { width: 100%; background-color: #968a8a; } } @media screen , (max-width: 1094px) { .container { padding-left: 10px; } #brand { padding-right: 10px; } }
Comments
Post a Comment