Tutoriel d'introduction à la mise en page Web CSS 13 : menu déroulant et menu contextuel à plusieurs niveaux

Tutoriel d'introduction à la mise en page Web CSS 13 : menu déroulant et menu contextuel à plusieurs niveaux_Tutoriel de base

WBOY

Libérer： 2016-05-16 12:07:20

original

1360 Les gens l'ont consulté

드롭다운 및 팝업 메뉴는 웹사이트 디자인에서 일반적으로 사용되는 탐색 형태입니다. 이 메뉴 형태는 페이지의 현재 공간을 최대한 활용하여 더 많은 콘텐츠를 숨기고 표시할 수 있으며, 콘텐츠를 합리적으로 분류하고 표시할 수 있는 메뉴 형태입니다. 매우 뛰어난 탐색 형태.
초기 드롭다운이나 팝업 메뉴는 숨겨진 레이어나 div를 사용하여 콘텐츠를 숨기고 JavaScript 스크립트를 통해 사용자 작업에 응답했으며 현재는 JavaScript+div 또는 기타 요소도 이러한 탐색을 만드는 데 사용됩니다. 표준 CSS 레이아웃을 사용하여 구축되며, 메뉴를 생성하는 데 더 이상 테이블이 사용되지 않습니다. 드롭다운 메뉴는 위에서 언급한 수평 탐색과 수직 탐색의 조합이며, CSS의 다양한 속성 지원을 통해 동일한 메뉴를 사용할 수 없습니다. 더 이상 서로 협력하려면 여러 div가 필요합니다. CSS 레이아웃을 사용하여 ul 또는 li 요소를 직접 제어할 수도 있습니다. 이제 가장 간단한 드롭다운 메뉴를 만들어 보겠습니다. 드롭다운 메뉴 구현. 많은 JavaScript 기술이 사용됩니다. 여기서는 CSS 요소의 유연성으로 인해 JavaScript 기술의 구문에 대한 포괄적인 이해를 제공하지 않습니다. 속성을 사용하면 웹페이지에서 요소를 사용하는 것이 더 쉽고 편리해집니다.先看一下目前所设计的导航的XHTML部分代码:

文章

CSS教程

DOM教程

XML教程

FLASH教程

参考

XHTML

블로그

전체 부서

网页技术

UI技术

FLASH技术

摇滚

纯Music乐

古典金曲

电影原声

ul { padding:0; 여백:0; 목록 스타일:없음;}
li { float:left; 너비:100px;}

　　第一步, 对导航系统热热闹闹有ul元素进行基本设置, 목록 스타일: 없음属性能够帮助我们去掉ul中的所有圆点标识。목록형属性拥有其它更丰富的使運解，将过后面的列表元素中重点了解.
　　我们希望导航是横向的过对li设置float:left属性，将所有向左浮动，형태 형성 了横向的布局，并尝试使用每个li的宽degree为100px，继续编写代码：

li ul { display:none; top:20px;}

　　li는 ul의 사용자 정의에 따라 ul의 모든 하위 인터페이스에 적합하며, ul의 하단에는 ul의 ul을 정의할 수 있습니다.义。이곳에서는 top属性设置了整个个个上边距, 并使用display:none让这分被了起来。Fondamentalement, tous les éléments CSS peuvent utiliser l'attribut display pour contrôler s'ils doivent être affichés ou masqués.

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

li:hover ul définit l'élément ul sous l'élément li. Séparé par des virgules, l'attribut display:block peut être utilisé dans les deux cas. L'attribut display:block est juste l'opposé de l'attribut display:none. L'un est masqué et l'autre est affiché lorsqu'il est défini sur display:block, pas seulement. son attribué L'élément sera affiché, et il sera également affiché sous forme de bloc Si display:block n'est pas utilisé, l'élément ne sera affiché qu'en fonction de la zone occupée par son contenu à l'écran lorsque display:block est. utilisé, l'élément formera lui-même un large bloc en tant que marqueur de point, ce paramètre est très pratique pour agrandir les boutons.

Dans le code d'aperçu en bas, vous pouvez voir que le code et js est ajouté à l'intérieur. Il est utilisé pour contrôler l'affichage du menu déroulant sous le navigateur IE. À l'origine, la phrase li : hover ul est Oui, mais la prise en charge de CSS par IE est encore incomplète, vous devez donc utiliser JS pour le contrôler.
Ensuite, nous essayons d'ajouter quelques styles au menu déroulant :

ul li a { display:block; font-size:12px; margin-left: 3px; padding:3px; text-decoration:none; color:#777;}
ul li a:hover { background-color:#ddd;}

Le focus du drop Le contrôle du menu -down de la mise en page CSS est activé pour masquer et afficher les éléments.