Comment construire CSS Flyout menus

Instructions

1. Aller à "Démarrer" sur votre barre des tâches Windows, et entrez le nom de votre éditeur de code préférée ou Bloc-notes. S'il vous plaît noter que le texte de code couleur d'un éditeur de code tel que Notepad ++, jEdit ou BBEdit vous aider avec ce projet.

2. Ouvrez le fichier HTML de la page Web où vous souhaitez placer le menu déroulant. Construire une liste non ordonnée - ceux-ci ressemblent listes à puces lorsqu'elles ne sont pas de style CSS - où vous voulez que le menu déroulant apparaisse dans le document. Voici un exemple:

3. Lien 1
4. Lien 2
5. Lien 3

 
Un lien
Lien B
Lien C
Link D
Lien 4
Lien 5
Lien 6
Lien 7

Notez que ci-dessus, l'une liste non ordonnée est incorporé dans la première, ou plutôt un élément dans cette liste. Quand un utilisateur passe sa souris sur "Lien 3," le résultat souhaité est que les liens de A à D à apparaître dans le menu contextuel.

6. Trouvez votre feuille de style. Ceci est le fichier externe ou un ensemble de "

   Écrivez votre code CSS entre le "

7. Ecrire le code CSS pour le style de votre liste non ordonnée dans un menu latéral attrayant. À ce stade, ne vous inquiétez pas à propos de la partie du menu déroulant. Donnez la partie principale de votre menu une largeur et souvenez-vous de mettre en "list-style" à "aucun" et vos marges et les rembourrages laissés à zéro, comme ceci:

   ul {

   largeur: 100px-

   
   
   
   
   

   margin-left: 0-

   padding-left: 0-

   list-style: none-

   background: # 555555-

   }

8. Coiffez vos liens dans CSS comme ceci:

   li a {

   background: # 999999-

   color: # 00b5ac-

   border-bottom: 1px solid # 000000-

   text-decoration: none-

   affichage: d'îlot

   }

   Vous devez inclure "display: block" pour faire le point de l'ensemble du menu highlightable et cliquable. Supprimer le lien avec soulignement "text-decoration: none". Réglez la couleur de police avec "couleur," et donner les éléments de menu d'une couleur de fond et la bordure du bas pour plus menu comme style.

9. Donnez à vos éléments de menu un état stationnaire. Sur les pages Web, en tout temps un visiteur du site passe sa souris sur quelque chose et ça change, qui est un état stationnaire. Utilisez le ": hover" pseudo-classe comme ceci:

   li a: hover {

   background: # eeeeee-

   }

   Dans ce cas, le fond du lien change à un gris très clair lorsque l'utilisateur passe sa souris sur l'élément de menu.

10. Écrivez votre CSS pour cacher la partie du menu déroulant. Voici le code:

    ul gt; li gt; ul {

    Position: absolute-

    gauche: -1000em-

    }

11. Ajouter ce code CSS pour rendre la partie du menu déroulant apparaît chaque fois que l'utilisateur survole un élément de menu qui contient un sous-menu:

    ul gt; li: hover ul {

    top: 0-

    gauche: 100px-

    }

    Changement "100px" pour correspondre à la largeur de la partie principale de votre menu. De cette façon, la palette va pas se chevaucher votre menu principal.