Ein Dropdown-Menü, das CSS und JS kombiniert, unterstützt gängige Browser-Javascript-Kenntnisse

Erste Aussage:

Obwohl ich viele Jahre in einer Web-Frontend-Position gearbeitet habe, sind die technischen Anforderungen der Position nicht hoch. Meistens werden HTML und CSS verwendet, aber JavaScript ist selten original und wird im Grunde genommen kopiert und modifiziert. Wenn ich es also tatsächlich schreibe, stelle ich fest, dass die Grundlage nicht solide ist und ich gleichzeitig viel lerne .

Rendering:

Kein Unsinn mehr, posten wir den Code

1. CSS-Code

Code kopieren Der Code lautet wie folgt:

a:link{color:white;text-decoration:none;}
a:visited{color:white;text-decorative:none;}
a:hover{color:white;text-decorative:none;}
a:active{color:white;text-decorative:none;}
li{float:left;display:inline;background-color:#003366;width:120px;text-align:center;margin:2px;padding:10px 0 5px 0;position:relative;}
.limouseover{background-color:#0033ff;color:red;}
.limouseout{background-color:#003366;color:black;}
li ul{display:none;width:120px;position:absolute;left:0;top:30px;}
li ul li{margin:0px auto;border-top:1px solid #006699;}

2. JavaScript-Code

Code kopieren Der Code lautet wie folgt:

3. HTML-Code

Code kopieren Der Code lautet wie folgt:

• Homepage
• Menü 1Menü 1
  • Untermenü 1Untermenü 1Untermenü 1Untermenü 1
  • Untermenü 2
• Menü 2
  • Untermenü 1Untermenü 1Untermenü 1Untermenü 1
  • Untermenü 2

<script>var menu1=new menu("menu1");</script>

Beschreibung:

1. Da UL- und LI-Seiten häufig verwendet werden, können Sie #menu1 vor CSS hinzufügen, um den Umfang des Menüstils einzuschränken.

2. Der js wartet hauptsächlich auf die Ereignisse zum Ein- und Ausblenden der Maus und wechselt entsprechend zu den Stilen „limouseover“ und „limouseout“. Gleichzeitig ändert er die Anzeigeattribute des Untermenüs, um die Anzeige- und Ausblendfunktion zu erreichen.

3. Dieselbe Seite kann ohne Konflikte wiederholt aufgerufen werden. Der JavaScript-Code im HTML-Code ist die aufrufende Instanz, und das Menü1 in Klammern ist die ID in der HTML-Seite.

Nachteile dieses Beispiels:

1. Das Mouseover und Mouseout des Menüs li und des Untermenüs li haben den gleichen Stil, also die gleiche Farbe und Schriftart, und es sind keine separaten Einstellungen implementiert.

2. Da es mit Ie6 und IE7 kompatibel sein muss, werden bei Verwendung von position:absolute die Attribute left und top entsprechend der Gesamthöhe des Menüs li hinzugefügt.