[英]How can I add another level to this responsive horizontal nav?
I am trying to build a responsive navigation for a website with an extra level. 我正在尝试为具有更高级别的网站构建响应式导航。 How would I update the following html/css/javascript to achieve this?
我将如何更新以下html / css / javascript以实现此目的? I know this is a big ask but I am hoping someone out there knows the answer.
我知道这是一个很大的问题,但我希望外面有人知道答案。 Here is my code:
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resposive Multi Level Horizontal Nav?</title>
<!--nav styles-->
<style>
.show
{
display: block;
}
nav
{
width: 100%;
float: left;
font-family: 'Oswald', sans-serif;
font-size: 100%;
color: #252525;
border-bottom: 4px solid #0069d4;
border-top: 4px solid #0069d4;
background-color: #fff;
}
ul
{
list-style: none;
margin: 0;
padding: 0;
}
li
{
display: inline;
}
a
{
text-decoration: none;
color: #fff;
}
li a
{
height: 60px;
line-height: 60px;
float: left;
display: block;
background-color: #fff;
padding: 0 20px;
color: #252525;
}
li a:hover
{
background-color: #0069d4;
color: #fff;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#i-nav
{
display: none;
float: right;
padding: 20px 20px;
}
@media (max-width: 1024px)
{
nav
{
width: 100%;
padding: 0;
margin: 0;
}
ul
{
width: 100%;
display: none;
}
li a
{
width: 100%;
padding: 0;
margin: 0;
text-align: center;
}
#i-nav
{
display: block;
}
}
</style>
<!--google fonts-->
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<!--font awesome-->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<div><a id="i-nav" href="#"><i class="fa fa-bars fa-2x" aria-hidden="true" style="color:#0069d4;"></i></a></div>
<ul>
<li><a href="#">HOMEPAGE</a><li>
<li><a href="#">PROGRAMS</a>
<!-- add extra level here
<ul>
<li><a href="#">Program 1</a></li>
<li><a href="#">Program 2</a></li>
<li><a href="#">Program 3</a></li>
<li><a href="#">Program 4</a></li>
<li><a href="#">Program 5</a></li>
</ul>
-->
<li>
<li><a href="#">MEMBERSHIP</a><li>
<li><a href="#">NEWS</a><li>
<li><a href="#">GALLERY</a><li>
<li><a href="#">CONTACT</a><li>
</ul>
</nav>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- script to toggle mobile menu -->
<script>
$(document).ready(function(){
$('#i-nav').click(function(){
$('ul').toggleClass('show');
});
});
</script>
</body>
</html>
i am feeling charitable today ...but in the future please try making a code by yourself and then post here if it doesn't work after a few attempts 我今天感觉很慈善...但是将来,请尝试自己编写代码,如果经过几次尝试仍无法正常工作,请在此处发布
check here jsfiddle 在这里检查jsfiddle
gave a class .submenu
to the second level ul
将课程
.submenu
给第二级ul
in the future i suggest not using float:left
on li a
, but use inline-block
on top level li
and block
on submenu li
在未来我建议不要使用
float:left
上li a
,但使用inline-block
上顶级li
和block
上的子菜单li
css code added : CSS代码添加:
ul.submenu {
position:absolute;
top:100%;
display:none
}
ul.submenu li a {
display:block;
float:none
}
nav li {
display:inline-block;
}
ul.submenu li {
display:block;
}
ul li:hover ul.submenu {
display:block
}
nav li {
position:relative
}
also for mobile menu : jsfiddle 也用于移动菜单: jsfiddle
code added to media query : 添加到媒体查询的代码:
ul.submenu {
position:relative;
top:0%;
display:block;
}
ul.submenu li {
display:block;
}
ul.submenu li a{
float:left;
width:100%;
}
in the future don't use line-height
and also height
on li a
; 在未来不使用
line-height
,也height
上li a
;
and plus. 还有。 in the future .
在将来 。 PROVIDE AN EXAMPLE OF WHAT YOU HAVE TRIED FOR YOUR SPECIFIC PROBLEM !
提供一个示例,说明您已针对特定问题进行了尝试!
otherwise you will get comments like the one from Paulie. 否则,您会收到像Paulie一样的评论。 and you won't get answers.
而且你不会得到答案。
let me know if this code did the trick 让我知道这段代码是否成功
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.