menu

Création d’un menu vertical

Terminologie html :

  • Balise
    • Ouverture de balise.
    • Fermeture de balise, sauf pour les balises auto-fermantes.
  • Contenu (de la balise) : code html situé entre l'ouverture et la fermeture de la balise
  • Attribut : situé dans l'ouverture d'une balise.
  • Valeur (de l'attribut) : entre guillemets ou entre apostrophes.
  • Syntaxe attribut/valeur : width = "400"
    • Signe égale '=' entre le nom de l'attribut et sa valeur.
    • Pour les valeurs en pixel, l'unité 'px' n'est pas spécifiée.

Terminologie css :

  • Sélecteur(s) : Si plusieurs sélecteurs, il sont séparés par une virgule.
  • Bloc (de déclaration). Suit le(s) sélecteur(s). Commence par '{', se termine par '}'
    • Un bloc peut contenir une ou plusieurs propriétés (une par ligne, de préférence).
  • Propriété : <nom de la propriété>: <valeur de la propriété>;
    • Exemple : background-color: #789abc;
    • Le nom : doit être un nom valide, reconnu par css.
    • La valeur de la propriété : pas de guillemets ni d'apostrophes.
    • Syntaxe : Le nom, suivi de ':', suivi d'un espace, suivi de la valeur, suivi d'un ';'
    • Il est conseillé mais non obligatoire d'écrire une seule propriété par ligne.

Théorie : inline, block, inline-block

Il existe 3 types de balises en html : en ligne (inline), en blocs (block), et mixte (inline-block)

Balises inline : La largeur ne peut pas être réglée. Elle s'adapte automatiquement au contenu -> span, ...
Balises 'block' : Affichés les unes sous les autres -> div, h1, hr, ...
Balises 'inline-block' : "Le meilleur des deux" -> img, iframe, ...

Balises 'inline' et inline-block : Affichés côte à côte.
Balises block et inline-block : La largeur peut être réglée par l'attribut 'width', ou en css par la propriété 'width'.

inline block inline-block
largeur ajustable NON OUI OUI
côte à côte OUI NON OUI

Le css permet de modifier les types attribués par défaut dans le html, grace à la propriété 'display' :

display: inline;
display: block;
display: inline-block;


Exercice 1 : Menu vertical

Créer un nouveau projet à l'aide de l'assistant Gulp :

  • Dossier contenant le projet : <disque>:\www\exe002\creation_menu
  • Nom du projet : Création d'un menu vertical
  • Première page, case cochée : seulement "Livereload"
  • Dernière page (Création), cases cochées : HTML et CSS

menu
(Cliquez sur l'image ci-dessus pour afficher cet exemple sur un nouvel onglet.)

Complétez/modifiez les fichiers html et css pour reproduire cet exemple, le plus fidèlement possible :

  • Pour le positionnement côte à côte du menu (à gauche) et du contenu (à droite), inspirez-vous du code des exercices précédents : "Exercices de style" et "Positionnement des éléments"
    • La largeur du menu est fixée à 15% de la largeur du navigateur.
    • La largeur du contenu à 85%.
    • Pas de marges, l'ensemble occupe 100% de la largeur du navigateur.
      • Vérifiez en modifiant la largeur du navigateur à la souris.
  • Les éléments du menu sont des balises "<a>" :
    • Pour l'exemple, l'attribut 'href' fournit l'url d'une station de télévision.
    • L'attribut 'target' vise une 'iframe'.
      • Un iframe est un espace où l'on peut afficher une page web externe.
    • Ces balises <a> doivent être stylisée en css (faites-le dans l'ordre) :
      • Texte centré horizontalement.
      • Placées verticalement.
      • Pas de trait de soulignement.
      • Couleur du texte de repos : bleue.
      • Couleur de fond de repos : gris clair.
      • Couleur du texte de survol : blanche.
      • Couleur de fond au survol : gris un peu plus foncé.
      • Suffisamment d'espace vertical entre 2 éléments :
        • Pour le toucher au doigt sur des écrans tactiles.
  • La balise <iframe> doit occuper tout l'espace restant, en largeur et en hauteur.
  • Simplifier les fichiers html et css à leur plus simple expression.
  • En cas de difficulté, utiliser l'exercice noté.

Exercice 2 : Application pratique

  • Créer un nouveau projet à l'aide de l'assistant Gulp :
    • Dossier contenant le projet : <disque>:\www\exe002\menu
    • Nom du projet : Application d'un menu
    • Première page, case cochée : seulement "Livereload"
    • Dernière page (Création), cases cochées : HTML et CSS
  • Modifier la page index.html (et son css !) pour obtenir ceci : (copier-coller un code déjà vu)

style08

  • Dans la side-bar 'Menu' :
    • Retirer le texte, la couleur de fond.
    • Les coins arrondis.
    • L'ombre portée.
    • Incorporer un menu de l'exercice 1.
      • Les url ne seront pas des télévisions, mais des sites de votre choix.
  • Dans la div 'Contenu'
    • Retirer uniquement le texte.
    • Conserver les couleurs, les coins arrondis, l'ombre portée.
    • Y placer un iFrame qui affichera votre sélection.

Exercice 3 : Jouez le jeu !

  • Créer un nouveau projet à l'aide de l'assistant Gulp :
    • Dossier contenant le projet : <disque>:\www\exe002\mon_menu
    • Nom du projet : Menu personnel.
    • Première page, case cochée : seulement "Livereload"
    • Dernière page (Création), cases cochées : HTML et CSS
  • Lancez le serveur livereload (Robot), le client livereload (Firefox)
  • Dès lors, refaites l'exercice N°2 :
    • Utilisez simplement votre mémoire et soyez logique :
      • Il est nécessaire pour cela de comprendre chaque élément html et css.
    • Ne trichez pas : jouez le jeu !
0 réponses

Un commentaire, une suggestion ?

Participez à la discussion.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *