Il s'agit d'un menu très simple. Bien que simple, nous pouvons acquérir des connaissances pertinentes sur CSS et JavaScript à partir de cet exemple, ce qui est très utile pour comprendre les principes et les bases de la création de menus déroulants. Dans cet exemple, j'ai utilisé une balise DIV comme colonne de menu déroulant et une TABLE comme en-tête de menu. Le principe est de changer les attributs d'affichage de la colonne du menu déroulant en identifiant les mouvements de la souris.
Voici l'effet de ce menu DIV. Vous pouvez cliquer sur n'importe quel espace vide de la page pour annuler l'affichage du menu déroulant.
Site de technologie de magazine Site portail Site de collection personnelle
Ouisky.com
Informations sur le revendeur d'ordinateurs
électronique à la mode
Sina
Sohu Sohu
Nétease Nétease
Station de programmation réseau souris
Record de camarade de classe chinois
Eh bien,
China Software Development Network
, si je vous disais qu'un tel effet ne prendrait que des dizaines de lignes de code, le croiriez-vous ?Quoi qu'il en soit, apprenons à créer ce menu étape par étape. Pas à pas, c'est parti.
La première étape consiste à définir les feuilles de style en cascade CSS pour les éléments de menu et les colonnes de menu. Ici, si vous ne savez pas ce que signifie CSS, veuillez vous référer au didacticiel sur CSS dans "Computer News Website". Nous définissons deux classes CSS, l'une est Meun et l'autre est SubMenu. Menu définit le style affiché en haut du menu, et Submenu définit le style d'affichage de la colonne du menu déroulant. Ici, ce qu'il faut noter, c'est l'attribut CSS "position:absolute;width:200" dans le sous-menu. Ceci est nécessaire car il détermine la position où nous affichons le sous-menu. Les autres propriétés CSS sont facultatives. Voici la description de ces deux classes CSS. Vous pouvez placer le paragraphe suivant entre le <head></head> ou le <body></body> du site Web.
<STYLE>
<!--
.menu {couleur d'arrière-plan : vert ; largeur : 120 ; hauteur : 20 ; couleur : blanc ; alignement du texte : centre ; taille de police : 9 pt ; poids de police : plus gras}
.submenu {position : absolu ; haut : 40 ; couleur d'arrière-plan : jaune clair ; largeur : 180 ; taille de police : 9 pt}
-->
</STYLE>
Dans la deuxième étape, examinons le code Javascript permettant de masquer et d'afficher les colonnes du menu déroulant. Ce code est très simple et devrait être facile à comprendre pour quiconque a appris un peu de JavaScript. Si vous ne comprenez pas Javascript, veuillez également vous référer aux articles sur les JavaScripts sur le "Computer News Website". La signification de ce code est que chaque fois que la souris entre dans l'élément de menu (Menu), sa colonne de menu déroulant sera affichée par une fonction appelée Show. La fonction principale de cette fonction Afficher est d'afficher la colonne du menu déroulant actuelle, de masquer les autres colonnes du menu et de placer l'élément de menu actuellement affiché dans la variable cm. De plus, ici, j'ai également ajouté un simple gestionnaire d'événement de clic de souris (onclick). Lorsque la souris clique sur la page Web, toutes les colonnes du menu déroulant seront masquées. Ci-dessous, je donne l'intégralité du programme Javascript, qui comprend une fonction appelée getPos, qui permet d'obtenir la position d'affichage de la colonne du menu déroulant.
<SCRIPT>
varcm=nul ;
document.onclick = nouvelle fonction ("show(null)")
fonction getPos(el,sProp)
{var iPos = 0
tandis que (el!=null)
{iPos+=el["décalage" + sProp]
el = el.offsetParent}
retourner l'iPos}
fonction show(el,m)
{if (m) {m.style.display=' ';
m.style.pixelLeft = getPos(el,"Gauche")
m.style.pixelTop = getPos(el,"Top") + el.offsetHeight}
if ((m!=cm) && (cm)) cm.style.display='none' cm=m }
</SCRIPT>