Objectifs

• Etre capable de réaliser un menu déroulant entièrement en HTML et en CSS, sans utiliser d’autres langages comme le JavaScript.

Enoncé

Votre menu doit être créé exclusivement en HTML et en CSS.

• Voilà le résultat auquel on veut parvenir :

Réalisation

• Dans Votre examen, vous devez créer un menu qui fasse moderne, qui soit aéré avec des couleurs qui se détachent bien les unes des autres, et surtout lorsqu’un visiteur passe sa souris sur l’un des onglets du menu, une liste de sous-onglets cliquables s’affichent.
• Pour ce menu, vous allez utiliser des listes imbriquées les unes dans les autres que vous allez ensuite styliser en CSS.
• Vous allez faire un menu avec cinq onglets ; les quatre derniers onglets comportant chacun des sous onglets.
• Pour l’affichage et le changement de couleur lors du passage de la souris, vous utiliserez la pseudo classe CSS :hover et les propriétés adaptées.

Création du squelette HTML du menu

1. Créez un répertoire appelé Examen_HTML_CSS. Ce répertoire sera utilisé pour sauvegarder tous vos fichiers de travail.
2. Dans votre répertoire de travail, à l’aide de bloc note de Windows créez un nouveau fichier index.html.
3. Créez une page en utilisant les balises standards HTML5 (dans le même fichier)
5. Titrez votre page en Accueil
6. Un élément div doit occuper le contenu body
7. Utilisez une liste non ordonnée qui commence par un élément <ul>. Chaque item de cette liste de premier niveau démarre par un élément <li> et contient des liens <a> vers les rubriques de site, le contenu de cette liste est représenté par le schéma suivant.
8. Cette liste doit être mise entre balise <nav> et </nav>
9. Ajoutez les sous menus ou les menus secondaires suivants :



Mise en forme CSS de Votre menu HT

• Dans votre répertoire de travail, à l’aide de bloc note de Windows créer un nouveau fichier «styele.css »
• Ne se limitez pas aux propriétés suivantes pour réaliser votre menu, ces éléments ne sont que des pistes pour y arriver
1. En CSS, vous devez procéder avec un peu de méthode. vous allez d’abord vous occuper des styles généraux, puis vous appliquerez les styles particuliers à chaque élément.
2. La page contenant le menu doit se colle aux bords de la fenêtre du navigateur (utilisez une classe universelle).
3. Utilisez la propriété font-family pour définir une liste, ordonnée par priorité, de polices à utiliser pour le body de votre page soit : » Trebuchet MS, Arial, Helvetica et sans-serif »
4. Taille de police : 14px.
5. Utilisez la couleur d’arrière-plan #e0e0e0 pour votre page.
6. Le conteneur du contenu de la page obéit aux règles suivantes :
1. Une largeur de 800px avec une hauteur minimum de 450px
2. Une bordure de 2px, de style solide et de couleur #D2691E
3. Couleur dégradée vers le bas à droite : #B8860B, #FFE4C4.
4. Marge interne haut : 10px, Marge interne bas : 10px, Marge interne droite : 10px et Marge interne à gauche : 10px.
5. Marge intérieure du conteneur est 20px.
7. La liste principale (<ul>) s’affiche de façon horizontale et ne présente pas de puces comme elle le fait par défaut, elle ne possède ni de bordure ni de marge interne.
8. Les items ((<li>) soient alignés horizontalement (Citer deux méthodes pour faire ça, utiliser une et mettre l’autre en commentaire), ces items ne possèdent pas ni de bordure ni de marge interne ou externe.
9. Donner une largeur explicite de 150px aux éléments <li>

Les sous-menus

• Empêchez l’affichage des puces aux sous-menus.
• Les éléments <li> de votre sous-menu ne doivent pas flotter.
• Donnez un bord supérieur et un bord droit de 1px solide et transparents aux éléments <li>