Les partenaires publicitaires:

Vertical css menu déroulant tutoriel

Lors de la conception d'un site Web, vous pouvez créer un menu vertical déroulant en utilisant HTML et CSS. Vous devez HTML pour créer le menu sur une page Web, y compris combien les options de menu vous avez besoin et combien de valeurs déroulants pour chacun. Vous devez ensuite CSS pour régler apparence et le format des valeurs du menu. Quand un visiteur survole la souris sur l'une des options du menu, une liste déroulante avec plus d'options semble aider le visiteur à naviguer à travers votre site.

Fichier HTML

  1. Ouvrez le fichier HTML dans lequel vous souhaitez ajouter un menu déroulant vertical. Tapez la commande suivante dans le élément:

    Modifiez la valeur "href" pour le nom de votre fichier CSS, si nécessaire.

  2. Tapez la commande suivante dans le élément:

    Ces lignes de créer le menu de HTML et des listes déroulantes. Ajouter, modifier et supprimer des éléments de menu en fonction des besoins. Notez que les options de menu qui ne disposent pas de listes déroulantes, comme l'option "Home", ne pas utiliser le

      tag, mais l'ensemble du menu utilise une
        tag et références un identifiant appelé "déroulant" dans le fichier CSS.

      • Enregistrez le fichier HTML.

Fichier CSS

  1. Ouvrez le fichier CSS. Tapez la commande suivante:

    ul # déroulant {

    list-style: none;

    }

    Par défaut, les listes à puces utilisent des puces à côté du texte. Ce sélecteur supprime les points de balle pour les listes à puces qui appellent l'id "déroulant", comme celle sur le fichier HTML.

  2. Tapez la commande suivante:

    ul # déroulant li, li ul # déroulant ul li {

    float: left;



    largeur: 75px;

    }

    Le «flotter» la propriété aligne éléments dans le menu horizontalement. Retirer cette propriété si vous souhaitez que le menu pour afficher les éléments verticalement dans une liste. La "largeur" ​​des ensembles de propriétés la largeur de chaque élément de menu est. Changer cette valeur comme nécessaire pour que chaque élément dans le menu correspond sans aucun chevauchement.

  3. Tapez la commande suivante:

    li ul {

    display: none;

    position: absolute;

    largeur: 75px;

    }

    Par défaut, les options déroulantes apparaissent sur l'écran. Le "display" propriété dans cette sélection les cache. La "position" des biens les place dans une position de jeu sous la catégorie.

  4. Tapez la commande suivante:

    li: hover ul, li.over ul {

    display: block;

    }

    Le "display" propriété ici montre déroulant Options quand un visiteur survole la souris sur une catégorie. Lorsque la souris se déclenche d'une catégorie de menu, les options déroulants disparaissent à nouveau.

  5. Enregistrez le fichier CSS.

» » » » Vertical css menu déroulant tutoriel