Sub navbar IS not responsive
Question
I'm coding a navbar with sub nav using jQuery but met lots of issues:
First the sub nav can't scale with the nav;
Second when the mouse is on the sub nav,sub nav won't stay ,just display in seconds;
Third.I hope the sub nav can also have hover css.
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}
.nav li{float:left}
.nav li a{color:#333;text-decoration:none;display:block; height:30px;text-align:center; line-height:30px;
width:80px; background:#efefef; margin-left:1px;}
.nav li a.on, .nav li a:hover{background:#F60;color:#fff;}
.subNav{ width:100%;height:0; overflow:hidden}
.subNav li {clear: both;}
.subNav li a{ background:#ddd }
.subNav li a:hover{ background:#efefef}
</style>
</head>
<body>
<ul class="nav">
<li><a class="on a-first" href="#">首 页</a>
<ul class="subNav">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a class="a-first" href="#">关于我们</a>
</li>
<li><a class="a-first" href="#">产品展示</a>
</li>
<li><a class="a-first" href="#">售后服务</a>
</li>
<li><a class="a-first" href="#">联系我们</a>
</li>
</ul>
</body>
</html>
I have tried several times,but failed.It seems very complicated for me. This is the JS Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>$(function () {
$('a').hover(
function () {
$(this).stop().animate({"width":"160px"},200)
},
function () {
$(this).stop().animate({"width":"120px"},200)
}
)
})
$(function () {
$('.on').hover(
function () {
$('.subNav').stop().animate({"height":"190px"},300)
}
)
})</script>
1 answers
solution1
1 ACCPTED 2018-01-07 16:31:23
In response to the individual issues mentioned.
First the sub nav can't scale with the nav;
The width of the subNav list items is being set by the selector .nav li a which applies to both the nav and the subNav. The width should be removed from here and applied just to the nav list items using a selector like .nav > li . For example:
.nav > li{
width: 80px;
}
The width of list items within the subNav should be set to 100%, this could be completed in the existing .subNav li selector in the CSS. This ensures they match the width of the navbar as it expands / shrinks. For example:
.subNav li {
clear: both;
/* Set width of list items to 100% */
width: 100%;
}
Second when the mouse is on the sub nav,sub nav won't stay ,just display in seconds;
The code snippets provided in the question didn't replicate the behaviour you described for me. The subNav was displayed and never hidden as there is no event to reduce its height back to zero.
However the selector being used in the JavaScript $('a').hover(... will not apply when hovering over the subNav as the subNav is not a child of the a tag. Placing the hover on the list item (li) tag using a selector like $('.nav li').hover(... ensures it continues to apply when hovering over the subNav.
The code to display and hide the hovered over subNav can also additionally be included here rather than its current location where only applies to nav list item with an 'on' class.
$(function() {
$('.nav > li').hover(
function() {
//Increase width
$(this).stop().animate({
"width": "160px"
}, 200);
//Display subNav
$(this).children('.subNav').stop().animate({
"height": "190px"
}, 200);
},
function() {
//Reduce width
$(this).stop().animate({
"width": "80px"
}, 200);
//Hide subNav
$(this).children('.subNav').stop().animate({
"height": "0px"
}, 200);
}
)
})
Amending the CSS selector .nav li a:hover to .nav > li:hover > a ensures that the nav items remain highlighted when hovering over the subNav. For example:
.nav li a.on,
.nav > li:hover > a {
background: #F60;
color: #fff;
}
Third.I hope the sub nav can also have hover css.
The hover over CSS you have provided in the example to colour the subnav items appears to work as you intended.
JavaScript Example
This example code snippet has the amendments mentioned above (plus a few new subNav items for testing).
$(function() { $('.nav > li').hover( function() { //Increase width $(this).stop().animate({ "width": "160px" }, 200); //Display subNav $(this).children('.subNav').stop().animate({ "height": "190px" }, 200); }, function() { //Reduce width $(this).stop().animate({ "width": "80px" }, 200); //Hide subNav $(this).children('.subNav').stop().animate({ "height": "0px" }, 200); } ) })
* { margin: 0; padding: 0; font-size: 14px; } .nav { list-style: none; height: 30px; border-bottom: 10px solid #F60; margin-top: 20px; padding-left: 50px; } .nav li { float: left } .nav li a { color: #333; text-decoration: none; display: block; height: 30px; text-align: center; line-height: 30px; /* Remove width from '.nav li a' selector width: 80px; */ background: #efefef; margin-left: 1px; } /* Add new selector for setting width on nav list item subNav will inherit width */ .nav>li { width: 80px; } /* Amend second selector to cover hover over list item */ .nav li a.on, .nav > li:hover > a { background: #F60; color: #fff; } .subNav { width: 100%; height: 0; overflow: hidden } .subNav li { clear: both; /* Set width of list items to 100% */ width: 100%; } .subNav li a { background: #ddd } .subNav li a:hover { background: #efefef }
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <ul class="nav"> <li><a class="on a-first" href="#">Test 1</a> <ul class="subNav"> <li><a href="#">Test 1.1</a></li> <li><a href="#">Test 1.2 </a></li> </ul> </li> <li><a class="a-first" href="#">Test 2</a> </li> <li><a class="a-first" href="#">Test 3</a> <ul class="subNav"> <li><a href="#">Test 3.1</a></li> <li><a href="#">Test 3.2</a></li> <li><a href="#">Test 3.3</a></li> <li><a href="#">Test 3.4</a></li> </ul> </li> <li><a class="a-first" href="#">Test 4</a> </li> <li><a class="a-first" href="#">Test 5</a> </li> </ul> </body> </html>
CSS Example (No JavaScript)
My preferred approach for this would be to use just CSS without any JavaScript. This can also be achieved without JavaScript as shown in the code snippet below. This would need to be tested to ensure it meets your browser compatibility requirements. In this code snippet all JavaScript code has been removed, the HTML remains unchanged (except a few new subNav items for testing) and the CSS has a number of additions/amendments which are described with relevant comments.
* { margin: 0; padding: 0; font-size: 14px; } .nav { list-style: none; height: 30px; border-bottom: 10px solid #F60; margin-top: 20px; padding-left: 50px; } .nav li { float: left } .nav li a { color: #333; text-decoration: none; display: block; height: 30px; text-align: center; line-height: 30px; /* Remove setting of width as this will be set on the list item (li) tag rather than the a tag width: 80px; */ background: #efefef; margin-left: 1px; } /* Adjust second selector for hover over list item (li) tag '.nav li:hover > a' rather than hover over the a tag '.nav li a:hover'. This ensures the item remains highlighted whilst hovering over the subNav */ .nav li a.on, .nav li:hover>a { background: #F60; color: #fff; } /* Define initial width and width transition for the nav bar list items */ .nav>li { width: 80px; transition: width .2s } /* When hovering over a nav bar list item increase its width, the transition defined by the '.nav > li' selector will apply */ .nav>li:hover { width: 160px; } /* When hovering over a nav bar list item display its subNav by increasing the subNavs max-height from 0 to a number higher than will be used. The transition defined by the '.subNav' selector will apply */ .nav>li:hover .subNav { max-height: 200px; } .subNav { width: 100%; /* Max-height is used instead of height as the height of all subNav list items is not known. This may not be desirable as it gives a consistent transition time regardless of the number of subNav list items. Instead of defining height as 0 defined max-height as 0. height: 0; */ max-height: 0px; /* Add transition for height */ transition: max-height .2s; overflow: hidden } .subNav li { clear: both; /* Set width of list items to 100% */ width: 100%; } .subNav li a { background: #ddd } .subNav li a:hover { background: #efefef }
<html> <body> <ul class="nav"> <li> <a class="on a-first" href="#">Test 1</a> <ul class="subNav"> <li><a href="#">Test 1.1</a></li> <li><a href="#">Test 1.2</a></li> </ul> </li> <li><a class="a-first" href="#">Test 2</a> </li> <li><a class="a-first" href="#">Test 3</a> <ul class="subNav"> <li><a href="#">Test 3.1</a></li> <li><a href="#">Test 3.2</a></li> <li><a href="#">Test 3.3</a></li> <li><a href="#">Test 3.4</a></li> </ul> </li> <li><a class="a-first" href="#">Test 4</a> </li> <li><a class="a-first" href="#">Test 5</a> </li> </ul> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.