Record a copy of QQ pull-down menu
Why is this so important? Because I think this is very similar to the navigation menu in the background of some websites
Step 1: layout first
Structure code:
<ul id="list"> <li> <h2>My good friend</h2> <ul> <li>Slasher</li> <li>Morning diary</li> <li>An Shan</li> </ul> </li> <li> <h2>School classmate</h2> <ul> <li>Against the gale</li> <li>Wine shop</li> <li>Hu someone</li> </ul> </li> <li> <h2>Friend</h2> <ul> <li>Shi Tu Yan Ran</li> <li>I and melon</li> <li>Audience</li> </ul> </li> </ul>
Step 2: prepare to use js code to implement functions
Before writing js code, first analyze the function
Remove nickname ul by default
Function 1: click classification < h2 > to display the friends list. --Bind < h2 > through custom attributes, and then because each h2 corresponds to a ul, you can find ul through the custom attributes of h2
Function 2: when clicking on the classification, the small triangle will turn down. --- by dynamically adding class.
Function 3: click a friend's name, highlight it, and click next, the previous one will not be highlighted.
Function 1 / 2 implementation:
<script type="text/javascript">
window.onload = function(){
//First find the element to operate on
var oUl = document.getElementById("list");
var aH2 = oUl.getElementsByTagName('h2');
var aUl = oUl.getElementsByTagName('ul');
for(var i=0;i<aH2.length;i++){
aH2[i].index = i;
aH2[i].onclick = function(){
if(this.className == ""){
aUl[this.index].style.display = "block";
this.className = 'active';
}else{
aUl[this.index].style.display = "none";
this.className = '';
}
}
}
}
</script>
Function 3:
The first thing to do with < li > Zhang San < / Li > is to find < li ></li>
How to find it?
To find these < li >, first find their outer < UL > --- loop
Function realization:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>qq drop-down menu</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: "Song style";
}
li{
list-style: none;
}
#list{
width: 200px;
height: auto;
margin: 0 auto;
border: 1px solid #000;
}
#list li h2{
width: 200px;
height: 35px;
line-height: 35px;
background-color: #f2f2f2;
background-image: url(img/left.png);
background-position: 5px center;
background-repeat: no-repeat;
text-indent: 15px;
}
#list li h2.active{
background-color: #269ABC;
background-image: url(img/up.png);
background-position: 5px center;
background-repeat: no-repeat;
}
#list li ul{
display: none;
}
#list li li{
width: 200px;
height: 30px;
line-height: 30px;
border-bottom: 1px solid #000;
text-indent: 20px;
}
#list li li.hover{
background-color: #449D44;
}
</style>
<script type="text/javascript">
window.onload = function(){
//First find the element to operate on
var oUl = document.getElementById("list");
var aH2 = oUl.getElementsByTagName('h2');
var aUl = oUl.getElementsByTagName('ul');
var aLi = null;
var arrLi = [];
//Loop to add custom attributes and click events to h2
for(var i=0;i<aH2.length;i++){
aH2[i].index = i;
aH2[i].onclick = function(){
if(this.className == ""){
aUl[this.index].style.display = "block";
this.className = 'active';
}else{
aUl[this.index].style.display = "none";
this.className = '';
}
}
}
//Finding elements
for(var i=0;i<aH2.length;i++){
//Now aLi is a collection of elements
aLi = aUl[i].getElementsByTagName('li');
for(var j=0;j<aLi.length;j++){
arrLi.push(aLi[j]);
}
}
for(var i=0; i<arrLi.length;i++){
arrLi[i].onclick = function(){
for(var i=0;i<arrLi.length;i++){
arrLi[i].className = "";
}
this.className = "hover";
}
}
}
</script>
<body>
<ul id="list">
<li>
<h2>My good friend</h2>
<ul>
<li>Slasher</li>
<li>Morning diary</li>
<li>An Shan</li>
</ul>
</li>
<li>
<h2>School classmate</h2>
<ul>
<li>Against the gale</li>
<li>Wine shop</li>
<li>Hu someone</li>
</ul>
</li>
<li>
<h2>Friend</h2>
<ul>
<li>Shi Tu Yan Ran</li>
<li>I and melon</li>
<li>Audience</li>
</ul>
</li>
</ul>
</body>
</html>
