Einführungs-Tutorial 13 zum CSS-Webseitenlayout: Dropdown- und mehrstufiges Popup-Menü_Grundlegendes Tutorial

Dropdown- und Popup-Menüs sind häufig verwendete Navigationsformulare im Website-Design. Dieses Menüformular kann den aktuellen Platz auf der Seite vollständig ausnutzen, um mehr Inhalte auszublenden und anzuzeigen Sehr ausgezeichnete Navigationsform.
Frühe Dropdown- oder Popup-Menüs verwendeten versteckte Ebenen oder Divs, um Inhalte zu verbergen und auf Benutzeroperationen über JavaScript-Skripte zu reagieren. Derzeit werden auch JavaScript+Div oder andere Elemente verwendet, um eine solche Navigation zu erstellen Es wird kein Standard-CSS-Layout mehr verwenden, und Tabellen werden nicht mehr zum Erstellen von Menüs verwendet. Das Dropdown-Menü ist eine Kombination aus der oben erwähnten horizontalen Navigation und der vertikalen Navigation. Durch die zahlreiche Unterstützung von CSS für Attribute können Sie nicht mehr dasselbe Menü verwenden Wir benötigen ein CSS-Layout, um Dropdown-Menüelemente zu erstellen. Versuchen wir nun, das einfachste Dropdown-Menü zu erstellen Aufgrund der Flexibilität der CSS-Elementattribute möchte ich Ihnen hier nicht zu viel über die Syntax der JavaScript-Technologie vermitteln , ist es einfacher und bequemer, Elemente auf Webseiten zu verwenden.先看一下目前所设计的导航的XHTML部分代码： 

 
    

文章 
        

 
            
• CSS教程
 
            
• DOM教程
 
            
• XML教程
 
            
• FLASH教程
 
        

 
    

 
    

参考 
        

 
            
• XHTML
 
            
• XML
 
            
• CSS
 
        

 
    

 
    

BLOG 
        

 
            
• 全部
 
            
• 网页技术
 
            
• UI技术
 
            
• FLASH技术
 
        

 
    

 
 

 
    
• 摇滚
 
    
• 纯音乐
 
    
• 古典金曲
 
    
• 电影原声
 

 

　　一个标准的采用ul结构的菜单构成,但与前面所不同的是,这里的代码结构涉及嵌套在第一层的li之间插入了另一个ul的结构，这就是多级菜单的一个代码构成模式,我们尝试编写一些简单的css样式让菜单变成所希望的横向式: 

ul { padding:0; Rand:0; list-style:none;} 
li { float:left; Breite: 100 Pixel;我们去掉ul中的所有圆点标识.list-style属性拥有其它更丰富的使用方法,将在后面的列表元素中重点了解. 
　　我们希望导航是横向的通过对li设置float:left属性, 将所有的li向左浮动, 形成了横向的布局,并尝试使用每个li的宽度为100px，继续编写代码： 


li ul { display:none; oben: 20px;}定义的ul元素都将受到这部分样式的定义。在这里使用top属性设置了整个ul的上边距,并使用display:none让这部分被了起来。Grundsätzlich können alle Elemente in CSS das Anzeigeattribut verwenden, um zu steuern, ob sie angezeigt oder ausgeblendet werden.


li:hover ul,li.over ul { display:block;}

li:hover ul definiert das ul-Element unter dem li-Element. Das durch Kommas getrennte Attribut display:block kann in beiden Fällen verwendet werden. Das Attribut display:none ist genau das Gegenteil des Attributs display:none. Wenn es auf display:block gesetzt ist, wird es nicht angezeigt sein zugewiesenes Element wird angezeigt, und es wird auch in Blockform angezeigt. Wenn display:block nicht verwendet wird, wird das Element nur entsprechend der von seinem Inhalt eingenommenen Fläche angezeigt Wenn display:block ist Bei Verwendung bildet das Element selbst einen breiten Block. Als eigene Punktmarkierung ist diese Einstellung sehr praktisch, um Schaltflächen zu vergrößern.

Im Vorschaucode unten können Sie sehen, dass der und js-Code hinzugefügt wurde. Er wird verwendet, um die Anzeige des Dropdown-Menüs im IE-Browser zu steuern. Ursprünglich war der Satz li: hover ul ist Ja, aber die CSS-Unterstützung des IE ist noch unvollständig, sodass Sie JS zur Steuerung verwenden müssen.
Als nächstes versuchen wir, einige Stile zum Dropdown-Menü hinzuzufügen:

ul li a { display:block border:1px solid #ccc; margin-left: 3px; padding:none; color:#777;}
ul li a:hover { background-color:#ddd;}

Der Fokus des Tropfens -Down-Menüsteuerung des CSS-Layouts ist auf Elemente ein- und ausblenden eingestellt.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Dropdown- und mehrstufiges Popup-Men眉 www.aa25.cn</title> <style> ul { padding:0; margin:0; list-style:none;} li { float:left; width:100px;} ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;} ul li a:hover { background-color:#ddd;} li ul { display:none; top:20px;} li:hover ul,li.over ul { display:block;} </style> <ul id="nav"> <li> <a href=""></a>Artikel<ul> <li> <a href=""></a>CSS-Tutorial</li> <li> <a href=""></a>DOM-Tutorial</li> <li> <a href=""></a>XML-Tutorial</li> <li> <a href=""></a>FLASH-Tutorial</li> </ul> </li> <li> <a href=""></a>Referenz<ul> <li> <a href=""></a>XHTML</li> <li> <a href=""></a>XML</li> <li> <a href=""></a>CSS</li> </ul> </li> <li> <a href=""></a>BLOG<ul> <li> <a href=""></a>Alle</li> <li> <a href=""></a>Web-Technologie</li> <li> <a href=""></a>UI-Technologie</li> <li> <a href=""></a>FLASH-Technologie</li> </ul> </li> </ul> <ul> <li> <a href=""></a>Rock</li> <li> <a href=""></a>Musik pur</li> <li> <a href=""></a>Klassische Hits</li> <li> <a href=""></a>Film-Original-Soundtrack</li> </ul>