Maison >interface Web >js tutoriel >JavaScript imitation Jingdong navigation gauche catégorie navigation menu déroulant effect_javascript compétences
JavaScript imitation Jingdong navigation gauche catégorie navigation menu déroulant effect_javascript compétences
- WBOYoriginal
- 2016-05-16 15:08:301646parcourir
L'exemple de cet article partage avec vous un menu déroulant similaire à la navigation dans les catégories de gauche de JD.com et Taobao Mall pour votre référence. Le contenu spécifique est le suivant
.Rendu :
Code d'implémentation :
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0;padding:0;}
.ul{position:relative;width:200px;height:auto;}
.ul li{height:24px;line-height:24px;border-bottom:1px solid #ddd;text-align:center;font-size:12px;}
.ul li a{display:block;background:#fff;color:#000;text-decoration:none;}
.ul li a:hover{display:block;background:#000;color:#fff;text-decoration:none;}
.ul li div{display:none;width:400px; height:auto;position:absolute;top:0;left:200px; background:#000; color:#fff;}
.ul li div dl dd{float:left; width:100px;}
.ul .liname div{display:block;}
</style>
<script>
window.onload=function(){
var aLi=document.getElementsByTagName("li");
for(var i=0;aLi.length>i;i++){
aLi[i].i=i;
aLi[i].onmouseover=function(){
this.className="liname";
var h1=this.i*25;
var h2=this.getElementsByTagName("div")[0].offsetHeight;
if(h2<h1){
this.getElementsByTagName("div")[0].style.top=h1+'px';
}
}
aLi[i].onmouseout=function(){
this.className="";
}
}
}
</script>
</head>
<body>
<ul class="ul">
<li>
<a href="">类别1</a>
<div class="div">
<dl>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li>
<a href="">类别2</a>
<div class="div">
<dl>
<dd>类别2</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li><a href="">类别3</a><div class="div">
<dl>
<dd>类别3</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li><a href="">类别4</a><div class="div">
<dl>
<dd>类别4</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li><a href="">类别5</a><div class="div">
<dl>
<dd>类别5</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li><a href="">类别6</a><div class="div">
<dl>
<dd>类别6</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li><a href="">类别7</a><div class="div">
<dl>
<dd>类别7</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
<li><a href="">类别8</a><div class="div">
<dl>
<dd>类别8</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
<dd>类别1</dd>
</dl>
</div>
</li>
</ul>
</body>
</html>
J'espère que cet article sera utile à tout le monde dans l'apprentissage de la programmation javascript.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Notes d'étude JavaScript : Compétences Array deduplication_javascriptArticle suivant：Notes d'étude JavaScript : Compétences Array deduplication_javascript
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript