标签：color li rgb nav secondList basic navigation
navigation is a concerful section for a common website , so make a navigation to a basic and vital task , totaly the ui of navigation is seem accordant , the core of all is layout about left and right , the event of onclick , the on or off for the secondList
using native javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='./reset.css'/>
<link rel='stylesheet' href='./pattern.css'/>
<link rel='stylesheet' href='./iconfont.css'/>
<title>the navigation for using native summary</title>
</head>
<body>
<div id='nav'>
<div id='nav_title'>
<h3><a href='javascript:;'>FutureWorld</a></h3>
</div>
<div id='nav_body'>
<ul>
<li>
<p onclick='showSecond()'><a href='javascript:;'><sapn>mainpag</sapn> <i class='iconfont icon-xiasanjiaoxing'></i></a></p>
<div class='secondList'>
<ul class='childList'>
<li><a href='javascript:;'>make different</a></li>
<li><a href='javascript:;'>choice of jobs</a></li>
<li><a href='javascript:;'>stand up write</a></li>
<li><a href='javascript:;'>about this event</a></li>
</ul>
</div>
</li>
<li>
<p><a href='javascript:;'><sapn>technology</sapn></a></p>
<div>
<ul class='childList'>
<li><a href='javascript:;'>night star shine</a></li>
<li><a href='javascript:;'>silence and cold</a></li>
<li><a href='javascript:;'>foan sing enling </a></li>
<li><a href='javascript:;'>funale ksng lssso</a></li>
</ul>
</div>
</li>
<li>
<p><a href='javascript:;'>social</a></p>
</li>
<li>
<p><a href='javascript:;'>famous</a></p>
</li>
</ul>
</div>
</div>
<div id='contain'>
</div>
<script>
let selcSecond=document.querySelector('#nav_body>ul>li>div')
function showSecond(){
let secondList=selcSecond.getAttribute('class')
if(secondList){
selcSecond.setAttribute('class','')
}else{
selcSecond.setAttribute('class','secondList')
}
}
</script>
</body>
</html>
#nav {
height:56px;
box-sizing:border-box;
padding:0 30px 0 30px;
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
}
#nav>#nav_title {
float:left;
}
#nav>#nav_body>ul>li {
float:left;
margin-left:40px;
position:relative;
}
#nav a {
color:#000;
}
#nav .secondList {
display:none;
}
#nav .childList {
position:absolute;
right:0;
top:28px;
box-sizing:border-box;
padding:10px 20px;
width:200px;
height:180px;
border:1px solid rgb(200,200,200);
background-color:rgb(255, 255, 255);
}
#nav .childList>li {
margin:6px;
padding-bottom:8px;
border-bottom:1px solid rgb(220,220,220)
}
#nav .childList>li>a {
color:rgb(80,80,80)
}
#contain {
height:500px;
background-color:rgb(242,242,242)
}
using jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='./reset.css'/>
<link rel='stylesheet' href='./pattern.css'/>
<link rel='stylesheet' href='./iconfont.css'/>
<script src='./jquery-3.5.1.js'></script>
<script src='./index.js'></script>
<title>the navigation for using jquery</title>
</head>
<body>
<div id='nav'>
<div id='nav_title'>
<h3><a href='javascript:;'>FutureWorld</a></h3>
</div>
<div id='nav_body'>
<ul>
<li>
<p class='body_menu'><a href='javascript:;'><sapn>mainpag</sapn> <i class='iconfont icon-xiasanjiaoxing'></i></a></p>
<div class='secondList'>
<ul class='childList'>
<li><a href='javascript:;'>make different</a></li>
<li><a href='javascript:;'>choice of jobs</a></li>
<li><a href='javascript:;'>stand up write</a></li>
<li><a href='javascript:;'>about this event</a></li>
</ul>
</div>
</li>
<li>
<p class='body_menu'><a href='javascript:;'><sapn>technology</sapn> <i class='iconfont icon-xiasanjiaoxing'></i></a></p>
<div class='secondList'>
<ul class='childList'>
<li><a href='javascript:;'>night star shine</a></li>
<li><a href='javascript:;'>silence and cold</a></li>
<li><a href='javascript:;'>foan sing enling </a></li>
<li><a href='javascript:;'>funale ksng lssso</a></li>
</ul>
</div>
</li>
<li>
<p><a href='javascript:;'>social</a></p>
</li>
<li>
<p><a href='javascript:;'>famous</a></p>
</li>
</ul>
</div>
</div>
<div id='contain'>
</div>
</body>
</html>
$(function(){
$('.body_menu').click(function () {
let mouseSelect = $(this).next('div')
if (mouseSelect.hasClass('secondList')) {
mouseSelect.removeClass('secondList')
} else {
mouseSelect.addClass('secondList')
}
})
})
标签：color,li,rgb,nav,secondList,basic,navigation 来源： https://www.cnblogs.com/mufengs16/p/14432191.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。