[英]How can I add another level to this responsive horizontal nav?
我正在嘗試為具有更高級別的網站構建響應式導航。 我將如何更新以下html / css / javascript以實現此目的? 我知道這是一個很大的問題,但我希望外面有人知道答案。 這是我的代碼:
<!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>
我今天感覺很慈善...但是將來,請嘗試自己編寫代碼,如果經過幾次嘗試仍無法正常工作,請在此處發布
在這里檢查jsfiddle
將課程.submenu
給第二級ul
在未來我建議不要使用float:left
上li a
,但使用inline-block
上頂級li
和block
上的子菜單li
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
}
也用於移動菜單: jsfiddle
添加到媒體查詢的代碼:
ul.submenu {
position:relative;
top:0%;
display:block;
}
ul.submenu li {
display:block;
}
ul.submenu li a{
float:left;
width:100%;
}
在未來不使用line-height
,也height
上li a
;
還有。 在將來 。 提供一個示例,說明您已針對特定問題進行了嘗試!
否則,您會收到像Paulie一樣的評論。 而且你不會得到答案。
讓我知道這段代碼是否成功
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.