interface Web
js tutoriel
js css implémente des compétences code_javascript d'effet de menu déroulant secondaire super simples
js css implémente des compétences code_javascript d'effet de menu déroulant secondaire super simples
L'exemple de cet article décrit l'implémentation d'un code d'effet de menu déroulant secondaire ultra-concis en utilisant js css. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un menu secondaire CSS JavaScript très concis. Il n'utilise pas trop de matériaux de modification et essaie de ne pas utiliser d'images externes. Il est concis et élégant, et il est facile pour le développement et l'amélioration secondaires. sur un site Internet du gouvernement.
La capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démo en ligne est la suivante :
http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/
Le code spécifique est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>二级下拉菜单</title>
<style type="text/css">
/*
#193B5F 栏目字体颜色
*/
*{margin:0; padding:0}
body{width:960px; margin:20px auto; font-size:14px;}
/*导航条*/
#nav {background-color:blue; color:#fff;height:25px;line-height:25px;text-align:center;list-style:none;}
#nav a{color:#fff;}
#nav li{width:75px;float:left;position:relative;z-index:1;}
#nav li .title{display:block;}
#nav li .title:hover{background-color:green;}
#nav li .submenu{width:75px;margin:0 auto;background:green;position:absolute;left:0;top:25px;display:none;}
#nav li .submenu dd{border-top:1px dotted #ddd;color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<!-- 有二级菜单的，给li加class="menu" 没有的不用加 -->
<li class="menu">
<a href="#" class="title">国家政务</a>
<dl class="submenu">
<dd><a href="#">时政要闻</a></dd>
<dd><a href="#">远程党教</a></dd>
<dd><a href="#">村务管理</a></dd>
</dl>
</li>
<li>
<a href="#" class="title">网络服务</a>
</li>
<li class="menu">
<a href="#" class="title">信息交流</a>
<dl class="submenu">
<dd><a href="#">求购信息</a></dd>
<dd><a href="#">转让信息</a></dd>
</dl>
</li>
</div><!--end nav-->
<script type="text/javascript">
<!--
var nav = document.getElementById("nav").childNodes;
for (var i=0;i<nav.length;i++)
{
if (nav[i].className=="menu")
{
nav[i].onmouseover = function(){fnNav(this,"block")};
nav[i].onmouseout = function(){fnNav(this,"none")};
}
}
function fnNav(obj,flag)
{
obj.getElementsByTagName("dl")[0].style.display = flag;
}
//-->
</script>
</body>
</html>
J'espère que cet article sera utile à la programmation JavaScript de chacun.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment réaliser un effet d'écart sur la disposition de la carte et des coupons avec fond de gradient?
Apr 05, 2025 am 07:48 AM
Réalisez l'effet d'écart de la disposition des coupons de carte. Lors de la conception de la disposition des coupons de carte, vous rencontrez souvent la nécessité d'ajouter des lacunes sur les coupons de carte, surtout lorsque l'arrière-plan est le gradient ...
Comment réaliser l'effet d'écart dans la disposition des cartes et des coupons dans un milieu de dégradé?
Apr 05, 2025 am 06:33 AM
Comment réaliser l'effet d'écart dans la disposition des cartes? Lors de la conception de la disposition des bons de la carte, il est courant d'atteindre l'effet d'écart sur le bord du bon de carte. Si l'arrière-plan est pur ...
Comment réaliser l'effet d'écart dans la disposition des cartes et des coupons avec fond de gradient?
Apr 05, 2025 am 06:39 AM
Comment réaliser l'effet d'écart dans la disposition des cartes? Lors de la conception d'une disposition de bons de cartes, il est souvent nécessaire de créer un effet d'écart à un coin ou un bord du bon de carte, en particulier ...
Bootstrap peut-il implémenter directement la disposition du débit de cascade horizontale?
Apr 05, 2025 am 07:15 AM
En utilisant le framework Bootstrap pour construire une disposition de débit de cascade horizontale, de nombreux développeurs espèrent utiliser le framework bootstrap pour créer rapidement des pages Web et obtenir divers effets de mise en page complexes ...
IconFont Icon s'affiche anormale par intermittence? Comment dépanner et résoudre des problèmes de codage
Apr 05, 2025 am 07:54 AM
iconfont ...
Quels sites Web conviennent à l'apprentissage et à la profit d'un excellent affichage des effets CSS?
Apr 05, 2025 am 07:09 AM
Explorez un excellent site Web d'affichage de l'effet CSS Si vous êtes intéressé à apprendre et à apprécier divers effets CSS exquis, il est très important de trouver les bonnes ressources. indépendamment de...
CSS déborde: l'auto n'est pas valide. La valeur négative de l'élément parent Z-Index est-elle le coupable?
Apr 05, 2025 am 07:12 AM
Échec de la barre de défilement CSS Dépannage: débordement: défaillance automatique des causes analyse dans l'utilisation de CSS pour configurer le débordement du conteneur: Auto ...
Résolution 2K Résolution de la conception des sites Web d'entreprise: Comment pouvons-nous nous adapter parfaitement à l'environnement d'affichage du client?
Apr 05, 2025 am 07:21 AM
Le site Web de l'entreprise Rendu la conception: comment répondre aux besoins de la résolution 2K. Lors de la conception d'un site Web d'entreprise, les clients rencontrent souvent des exigences de résolution spéciale.
