JS implementation imitation jingdong taobao vertical row secondary navigation
- 2020-03-30 04:31:00
- OfStack
The code is very simple, no more nonsense, direct to the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript">
function hoversee(){
var list = document.getElementById('nav');
var zu = list.getElementsByTagName("li");
for(var i=0;i<9;i++)
{
zu[i].onmouseover = function(){
this.getElementsByTagName('dl')[0].style.display = "block";
}
zu[i].onmouseout = function(){
this.getElementsByTagName('dl')[0].style.display = "none";
}
}
}
window.onload = hoversee;
</script>
<style>
*{
font-family:Microsoft YaHei;
margin:0;
padding:0;
}
body{width:100%;}
ul{list-style: none;}
a{text-decoration: none;}
#header{
height:50px;
line-height:50px;
background:#455A6E;
}
#header h2,#header h3{
font-weight:500;
}
#header h2{
color:#fff;
font-size:18px;
width:180px;
text-align: center;
background:#0D2E49;
}
#header h3{color:#fff;font-size:16px;}
.mycenter{
width:900px;
margin:0 auto;
}
#header div.mycenter{
position:relative;
}
#nav {
width:180px;
background:rgba(0, 102, 173, 0.5);
z-index:999;
}
#nav li{
height:40px;
padding-left:40px;
line-height: 40px;
position:relative;
}
#nav h3{height:40px;}
#nav li dl{
position:relative;
left:140px;
top:-40px;
width:150px;
background:#fff;
display:none;
padding:8px 10px;
}
#nav dt{
width:150px;
line-height: 30px;
height:30px;
background:#36C1AF;
color:#fff;
text-align: center;
}
#nav dd a{
display:block;
height:30px;
width:150px;
font-size:14px;
color:#858585;
}
#nav dd a:hover{
text-decoration: underline;
}
#content{
background:#E95200;
height:500px;
}
</style>
</head>
<body>
<div id="header">
<div class="mycenter">
<h2> Background management menu </h2>
<ul id="nav">
<li>
<h3> Account management </h3>
<dl>
<dt> Account management </dt>
<dd>
<a href="#"> Change the password </a>
<a href="#"> Modify the username </a>
<a href="#"> Set the security problem </a>
</dd>
</dl>
</li>
<li>
<h3> Home management </h3>
<dl>
<dt> Home management </dt>
<dd>
<a href="#"> Rotate photo Settings </a>
<a href="#"> Product display photo Settings </a>
<a href="#"> Bottom information modification </a>
</dd>
</dl>
</li>
<li>
<h3> Product management </h3>
<dl>
<dt> Product management </dt>
<dd>
<a href="#"> Add new products </a>
<a href="#"> Manage all products </a>
<a href="#"> Category management </a>
</dd>
</dl>
</li>
<li>
<h3> News management </h3>
<dl>
<dt> News management </dt>
<dd>
<a href="#"> News release </a>
<a href="#"> Total news management </a>
<a href="#"> Increase the series </a>
<a href="#"> News series management </a>
</dd>
</dl>
</li>
<li>
<h3> Feedback to management </h3>
<dl>
<dt> Feedback to management </dt>
<dd>
<a href="#"> Manage all feedback </a>
</dd>
</dl>
</li>
<li>
<h3> Enterprise information management </h3>
<dl>
<dt> Enterprise information management </dt>
<dd>
<a href="#"> Enterprise brief introduction </a>
<a href="#"> Enterprise contact Settings </a>
<a href="#"> Recruitment management </a>
</dd>
</dl>
</li>
<li>
<h3> Rights management </h3>
<dl>
<dt> Rights management </dt>
<dd>
<a href="#"> Add a new administrator </a>
<a href="#"> View all account permissions </a>
<a href="#"> View the complaint </a>
</dd>
</dl>
</li>
<li>
<h3> Functional management </h3>
<dl>
<dt> Functional management </dt>
<dd>
<a href="#"> Primary function setting </a>
</dd>
</dl>
</li>
<li>
<h3> Permission view and application </h3>
<dl>
<dt> Permission view and application </dt>
<dd>
<a href="#"> View your permissions </a>
<a href="#"> To apply for permission </a>
</dd>
</dl>
</li>
</ul>
</div>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>
Friends according to their own needs, the call code can be added, free play.