Comment créer des menus en CSS3

La plupart des sites utilisent un système de quelque sorte que vous pouvez créer en utilisant CSS3 menu. Dans au moins certains cas, le système de menu utilise des cartes d'image ou une autre technique qui ne sont pas pris en charge par Dynamic Drive. Cependant, la plupart des sites comptent sur horizontales, des menus verticale, ou une combinaison.

Au fil des ans, les utilisateurs se sont habitués à travailler avec des menus, afin de les utiliser sur un site tout à fait logique. Un utilisateur comprend comment utiliser un menu intuitif, donc il n'y a pas de courbe d'apprentissage. Bien sûr, mal définies ou entrées de menu complexes peuvent toujours dérouter les utilisateurs, mais la mécanique du menu lui-même sont bien comprises.

Comment développer des menus horizontaux en CSS3

Menus horizontaux ont sélections qui apparaissent sur une ligne horizontale. Normalement, ces menus apparaissent en haut d'une zone de contenu, mais les menus peuvent également apparaître au bas de la zone de contenu ou de tout lieu entre. Le point est que un menu horizontal a une orientation particulière.

Pour la plupart des sites, le menu horizontal représente principales sélections de sites, comme aller à une liste de produits ou de voir la page à propos. Dynamic Drive fournit sept pages d'offres de menu horizontal (comme d'écrire ces lignes) qui fournissent divers effets spéciaux.

Les menus ont tous un effet spécial. Lorsque vous cliquez sur une sélection de menu particulier, vous voyez une page avec une démonstration. Pour voir l'effet spécial, vous devez normalement placez le pointeur de la souris sur les caractères ou les graphiques fournis dans le cadre du menu.

Par exemple, avec l'exemple de menu, plaçant le pointeur de la souris sur un des cœurs fait tourner autour de coeur pour indiquer que le cœur a été choisi comme une option de menu.

Notez que le haut de la page comprend également une description du menu, avec une liste des navigateurs compatibles. La description contient généralement quelques notes techniques ainsi. Il est important de lire les notes techniques après avoir examiné le code pour vous assurer de comprendre comment mettre en œuvre le menu.

La moitié inférieure de la page contient le code pour l'exemple. Contrairement aux mises en page, le CSS et HTML sont placés dans des fenêtres séparées, ce qui signifie que vous ne devez pas les séparer manuellement.

En outre, la partie HTML ne fournit pas une page complète - il est un fragment que vous devez intégrer dans votre propre page pour tester. (Vous pouvez trouver cet exemple particulier dans une pleine page dans le dossier Chapitre 07 de la Code téléchargeable comme HorizontalMenu.HTML.) Cependant, vous utilisez la même technique que vous faites avec les mises à élargir et à copier le code lorsque désiré.

Remarquez le lien après le code. L'exemple fournit un menu qui repose sur des icônes cardiaques. Vous pouvez cliquer sur ce lien pour télécharger les icônes si désiré.

Dans certains cas, ces icônes sont fournies par les autres sites. L'autre site peut avoir fait les icônes inaccessibles et vous verrez que vous ne serez pas en mesure de les télécharger après tout (comme les icônes de médias sociaux en forme de coeur utilisés pour cet exemple). Une façon de contourner ce problème est de télécharger l'icône directement depuis le site Dynamic Drive.

Tous les menus ne sont pas une seule couche. Le menu de Split Drop Down offre deux niveaux de sélections Quelques-uns de ces menus comptent sur les produits de tiers, tels que jQuery. L'exemple de menu jQuery chute en ligne fournit des niveaux de menus multiples (jusqu'à quatre niveaux sont présentés dans l'exemple).

Parce que ce ne sont pas une solution pure CSS, cependant, vous devez vous assurer que les utilisateurs qui accèdent au site auront le soutien javascript activé dans leurs navigateurs.

Comment développer les menus verticaux en CSS3

Menus verticaux peut être utilisé pour la redirection du site. Cependant, de nombreux sites utilisent des liens spécifiques à la page ou sur des sujets précis. Vous trouverez les options de menu vertical à CSS Bibliothèque. Il n'y a pas autant d'options de menu vertical comme il ya des menus horizontaux (de valeur »que trois pages). En outre, vous pourriez avoir du mal à trouver des paires de menu horizontale et verticale compatibles (les menus de l'ombre CSS3 viennent dans les deux formats horizontaux et verticaux).

Les menus verticaux fonctionnent de la même que les menus horizontaux font. La seule différence est leur orientation. Les exemples de pages contiennent les mêmes types de contenu et vous devez insérer le code HTML dans une page existante, comme vous le faites avec les menus horizontaux.

Le site ne fournit actuellement aucun menus verticaux à plusieurs niveaux, si vous avez besoin de plus d'un niveau de menu, vous devez utiliser un menu horizontal ou de localiser un menu sur un autre site.