jquery - Secondary Menu Drop Down Styling -
i have responsive menu setup, when @ desktop size secondary drop list hidden until hover on main nav lists.
i have added onto fiddle here:https://jsfiddle.net/4ewrrbxb/ secondary menu sit right of main menu, outside main white box.
i know simple, cannot seem working.
any great
lee
my html is:
<div class="nav-wrap"> <nav id="nav-main"> <ul> <li><a href="index.php">home</a></li> <li><a href="products.php">products</a></li> <ul> <li>product one</li> <li>product two</li> <li>product three</li> </ul> <li><a href="trade-processing.php">trade processing</a></li> </ul> </nav> <div id="nav-trigger"> <span>menu</span> </div> <!--close trigger--> <nav id="nav-mobile"></nav> <!--close trigger--> </div> my css:
/* menu wrappers */ .nav-wrap { position:fixed; top:0px; left:0px; width:150px; padding:25px; background: #ffffff; z-index:2; height: 100%; -webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.5); box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.5); } /* =nav -------------------------------------------------------------- */ #nav-trigger { display: none; text-align: center; } #nav-trigger span { display:inline-block; width:auto; height:40px; border:0px; padding:0px 15px; font-family: 'montserratregular'; font-size:16px; line-height:40px; color:#363940; background-color:#e8eaec; cursor:pointer; position:absolute; bottom:23px; right:25px; transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; -webkit-transition: .15s ease-in-out; } #nav-trigger span:before { background-image: url('../images/trigger.svg'); content:""; padding-right: 10px; padding-left: 12px; background-position: left center; background-size: 16px 13px; background-repeat: no-repeat; } nav { height:auto; width:auto; display:inline-block; font-family: 'montserratlight'; font-size:14px; line-height:45px; color:#363940; } nav#nav-main { padding: 0px; height:auto; } nav#nav-main ul { list-style-type: none; margin: 0; padding: 0; margin-bottom:10px; } nav#nav-main li { display: inline-block; width:100%; } nav#nav-main li:last-child { border-right: none; margin-top:20px; } nav#nav-main { display: block; width:100%; height:45px; text-decoration:none; cursor: pointer; color:#363940; display: inline-block; vertical-align: middle; -webkit-transform: translatez(0); transform: translatez(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } nav#nav-main a:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #e5502f; height: 2px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } nav#nav-main a:hover:before, nav#nav-main a:focus:before, nav#nav-main a:active:before { right: 0; } nav#nav-main a:hover { cursor: pointer; color:#363940; } nav#nav-mobile { position: relative; display: none; } nav#nav-mobile ul { display: none; list-style-type: none; position: absolute; top:155px; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; background-color:#e8eaec; overflow:hidden; font-family: 'montserratlight'; font-size:15px; line-height:45px; color:#363940; } nav#nav-mobile li { display: block; border-bottom: solid 1px #ffffff; height:50px; line-height:50px; } nav#nav-mobile li:last-child { border-bottom: none; } nav#nav-mobile { display: block; color:#000000; height:50px; text-decoration:none; } nav#nav-mobile a:hover { background-color:#e5502f; color:#ffffff; } /* =media queries -------------------------------------------------------------- */ @media screen , (max-width: 768px) { .nav-wrap { position:relative; top:auto; left:auto; width:100%; padding:0%; height:155px; } .nav-wrap img { display:inline-block; vertical-align:top; width:150px; height:auto; position:absolute; top:25px; left:25px; } .phone { display:inline-block; position:absolute; top:23px; right:25px; margin-bottom:14px; letter-spacing:1px; text-align:right; font-family: 'montserratregular'; font-size:23px; line-height:30px; color:#e5502f; } .nav-wrap input { height:49px; border-bottom:0px solid #d5d8db; padding-left:15%; background: url(../images/search-icon.svg) no-repeat 15px 15px; background-position:10px 18px; transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; -webkit-transition: .15s ease-in-out; } .nav-wrap input:focus { width:85%; padding-left:15%; background-position:10px 18px; background-color:#ffffff; } #nav-trigger { display: inline-block; } nav#nav-main { display: none; } nav#nav-mobile { display: block; } .stockist-nav, .supplier-nav { display:none; } #search-button { display:none; } #mobile-search { display:inline; position:absolute; bottom:0px; right:0px; width:35%; height:50px; background-color:#c8df55; outline:none; border:0px; font-family: 'montserratlight'; font-size:15px; color:#363940; z-index:9999; } /* =media queries -------------------------------------------------------------- */ @media screen , (max-width: 480px) { .nav-inner { max-width:100%; } .abovenav-wrapper h3 { display:none; } } my js:
$(document).ready(function(){ $("#nav-mobile").html($("#nav-main").html()); $("#nav-trigger span").click(function(){ if ($("nav#nav-mobile ul").hasclass("expanded")) { $("nav#nav-mobile ul.expanded").removeclass("expanded").slideup(400); $(this).removeclass("open"); } else { $("nav#nav-mobile ul").addclass("expanded").slidedown(400); $(this).addclass("open"); } }); });
first of all, second level ul should placed inside first level li. markup should this:
<ul> <li><a href="#">home</a></li> <li><a href="#">products</a> <ul> <li><a href="#">product one</a></li> <li><a href="#">product two</a></li> </ul> </li> <li><a href="#">trade processing</a></li> </ul> then add following css in order display level 2 on hover:
li > ul { display: none; } li:hover > ul { display: block; } to display second level right first, add absolute position it:
li { position: relative; } li > ul { position: absolute; top: 0; left: 100%; } 
Comments
Post a Comment