{Dans le HTML précédent, les positions des éléments ne pouvaient être organisées que de manière séquentielle, et il nous était difficile de localiser et de contrôler avec précision certains éléments de la page Web. CSS2 ? Feuille de style en cascade niveau 2, l'attribut Layout ? de la feuille de style en cascade version 2 apparaît et obtient. Avec la prise en charge généralisée des navigateurs, nous pouvons non seulement atteindre l'objectif ci-dessus de manière statique, mais également prédire en fonction de la souris, du clavier, du temps, etc. . Les événements externes définis modifient dynamiquement la mise en page. La "couche active" dans les pages Web très populaires en est une application image. Ce dont nous allons parler ici, c'est comment utiliser ces attributs combinés avec certains objets DHTML pour implémenter un menu déroulant similaire à la fenêtre Windows. la page Web (comme indiqué sur la figure) ). Veuillez consulter le code suivant et les instructions détaillées.
<?--La partie suivante doit être insérée après le <head> du code-->
<style><?--
/? Voici quelques styles CSS. Parmi eux, "btnTD" est la classe de style qui "soulève" le bouton avant qu'il soit enfoncé : la bordure est définie sur une ligne continue d'une largeur de 1 pixel, où les bordures gauche et supérieure sont de couleur claire (blanche ici). , et la bordure inférieure droite est définie sur une ligne continue d'une largeur de 1 pixel. La bordure est sombre (gris foncé). Si un élément HTML (comme une cellule) avec un arrière-plan gris utilise ce style, il aura un aspect très foncé. un peu comme un bouton « saillant » ; « btnDTD » signifie que le bouton est « concave » lorsqu'il est enfoncé. ?／
． BTNTD ? BORDURE -Gauche ? 1 SOLIDE #FFFFFF ? BORDURE -DROITE ? 1 SOLIDE #
808080
? BTNDTD ? Gauche ? 1 SOLIDE
#
808080
? > ＞
＜?--
//Variable globale pour déterminer quel bouton est enfoncé
var intBlnClk=0?
//La souris passe, quitte et clique pour modifier la
fonction de style CSS de la cellule mOvrOut?objSrc??
var argv?argc?blnActiv tive? strColor?strBgColor?strClass?strClassD? strCursor?
argv=mOvrOut. Arguments?argc=argv. length?
/?Ne pas définir l'objet actuel comme "actif" par défaut?/
blnActive=?argc>1?﹖ eva?argv[1]??false?
/?Le style par défaut de l'objet actuel lorsque la souris passe est "forme de bouton saillant"?/
strClass=?argc>2 && arg v［2］?＝′′?﹖ argv[2]?'btnTD'?
/?L'objet actuel est "en forme de bouton concave" par défaut lorsque l'on clique sur la souris ?/
strClassD=?argc>3 && argv［3 ]?=′′?﹖ argv[3]?′ｂＤＴＤ′?
/? Définir la couleur de premier plan de l'objet actuel sur blanc, la couleur d'arrière-plan sur bleu et le style de la souris sur la forme de la main
? ′?strCursor= 'hand'?
/? IE4 et les versions supérieures prennent uniquement en charge ces modifications dynamiques JavaScript des styles CSS
? all ??
//Définit le style de souris de l'objet actuel sur la valeur passée du paramètre
objSrc. style. slider=strCursor?
//Si la souris entre dans la plage d'objets actuelle
if??objSrc. contenu?événement. fromElement???
/? Définir comme style actif ? /
if?blnActive ?? bgColor=strBgColor?objSrc. style. color=strColor? ?
/?Lorsque l'objet actuel n'a pas besoin d'être défini comme style actif, si le style d'origine est "forme de bouton saillant", définissez-le sur "forme de bouton concave", et vice versa ?/
sinon objSrc. className=?intBlnClk?=0?﹖ ｓｒＣａｓＤ?ｔｔＣａａｓ ?
//La souris quitte la zone d'objet actuelle
sinon if??objSrc. contenu?événement. toElement???
// Définissez ces styles sur la valeur par défaut
objSrc. bgColor=′′?objSrc. style. couleur=′′?objSrc. ｃｌａｓＮｍｍｅｅｅｅｅｅ
/
? Fonction générale pour afficher/masquer les calques. Utilisez objNS, objIE, strStu comme paramètres, où objNS et objIE sont respectivement les "couches" de Netscape et IE "Object, strStu est l'état de la couche. En raison du manque d'espace, veuillez consulter les instructions à la fin de cet article. ?/
function showHidLayers????
/? Appelez la fonction ci-dessus pour afficher/masquer le calque passé par le paramètre, ce qui consiste à simplifier le code. Les fonctions détaillées ne sont pas données ici. ?/
function showLayer?intCurrent???
//--></script> ＜/head＞
Element．style．color＝＝′′? showLayer?1?′hide′ ?″>
<?-- La fonction du la partie du corps ci-dessus consiste à masquer tous les "menus" qui doivent être masqués lorsque la souris n'appuie sur aucun bouton. Voici deux calques définis avec la mise en page CSS. L'état initial du calque nommé « menu » est : la position absolue sur l'écran est (12?12), visible, l'attribut z-index du calque est 100 ; être invisible. -->
<div id="menu" style="position?absolute?visi bility? visible?left?12px?top?12px? z-index? 100″><tab ｌｌｏｄｅｅｅｅｅｅｅｅ Ｇ 2 ″ BGCOLOR = ″ # C0C0C0 ″ BORDERCOLOR = ″ # C0C0C0 ″ ＞ ＞ ＞ ＞ ＞ ＞ ｎ ｎ ｎ ″ ″ ″ ″ ″ ″ ″ ″ ″ ″ UT ?
″> Tianji.com < / TD> < / TR ＞ < / Table ＞ < / DIV>
<DIV ID =″
Menu1 ″ ″ ″ position ? Caché Gauche ? ″ ｃ ｃ " ? ???????????????????????????
TR ＞ <TD ONMOUSEOVER = ″ Movrout ?″ onMouseOut=″mOvrOut?this?″ largeur =″100%″nowrap onC lick="ｗindow.location=′http?／／ｗｗ.pcwclub.com／′? ｓｗｗＬａｅｒ1?′ｉｉｅｅｅ″＞Computer News Readers Club＜/td＞＜/tr＞
＜/table＞＜ /div＞
En raison du manque d'espace, certaines fonctions ne peuvent pas être données et expliquées en détail. Si vous avez besoin du code complet, veuillez visiter le lien suivant : http?//ctsighｈ t. topcool. net/documents/menu. html.