Médiaforma

All posts tagged menu

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Vous savez maintenant définir une mise en page contenant un bandeau supérieur, une zone de contenu et un pied de page. Vous savez également cantonner chacun de ces éléments à l’espace qui lui est réservé en utilisant la propriété overflow. Que diriez-vous d’ajouter une bande verticale à gauche de la zone de contenu. Par exemple pour y placer un menu donnant accès à d’autres pages Web ? Pour cela, nous allons définir une quatrième balise <div> un peu particulière.

Nous affectons l’identifiant menu à cette balise. Puis nous y ajoutons quelques liens qui ne pointent vers aucune page spécifique. Ici, il ne tient qu’à vous de remplacer le # par de vraies URL pour rendre ces liens fonctionnels. Pour améliorer la mise en page, les liens sont placés dans une liste <ul> :

Passons au code CSS.

Un sélecteur # identifie l’attribut id de valeur menu. La largeur de la nouvelle balise <div> est fixée à 150 pixels. Sa hauteur est identique à celle de la balise de contenu : 400 pixels. Nous choisissons une couleur d’arrière-plan différente de celles utilisées dans les trois autres balises. Ici encore, le code hexadécimal a été obtenu sur le site http://www.code-couleur.com/. Pour indiquer que la balise <div> menu doit flotter sur le côté gauche, nous utilisons la propriété float et nous lui affectons la valeur left.

Il ne reste plus qu’à afficher le code HTML dans le navigateur.


Le bouton droit de la souris permet d’afficher un menu dont le contenu dépend de l’élément cliqué. Saviez-vous qu’il est possible d’afficher plusieurs commandes cachées par défaut dans ce menu ? Pour cela, il suffit de maintenir la touche Maj du clavier enfoncée pendant que vous cliquez du bouton droit sur un élément quelconque.

A titre d’exemple, maintenez la touche Maj enfoncée et cliquez du bouton droit sur le bureau ou dans un dossier quelconque de l’Explorateur de fichiers. La commande Ouvrir une fenêtre de commandes ici est ajoutée au menu contextuel.

Un autre exemple : maintenez la touche Maj enfoncée et cliquez sur une icône de disque dans l’Explorateur de fichiers. Les commandes Ouvrir dans un nouveau processus, Ouvrir dans une nouvelle fenêtre et Ouvrir une fenêtre de commandes ici sont ajoutées au menu contextuel :

Amusez-vous à cliquer sur tous les éléments affichés sur le bureau de Windows ou dans l’Explorateur et découvrez les commandes cachées du menu contextuel !


Comme nous l’avons dit dans une autre rubrique, le menu du Finder est affiché lorsqu’aucune application n’a le focus (ou bien évidemment lorsque le Finder a le focus). Si une ou plusieurs applications sont ouvertes, vous pouvez afficher le menu Finder en cliquant sur un emplacement inoccupé du Bureau.

Si vous débutez sur Mac, vous ne savez peut-être pas ce qu’est le Finder. Eh bien, il s’agit du gestionnaire de fichiers par défaut utilisé sur Mac. Pour y accéder, rien de plus simple : il suffit de cliquer sur l’icône Finder, à l’extrême gauche du Dock. La fenêtre du Finder s’ouvre alors sur le dossier Tous mes fichiers, qui facilite l’accès à tous vos documents texte, fichiers PDF , images et autres types de documents.

Lancez la commande Préférences dans le menu Finder. La boîte de dialogue Préférences du Finder s’affiche. Examinons les principaux réglages qui y sont disponibles :

  • Sous l’onglet Général, Afficher ces éléments sur le bureau permet de choisir les icônes des disques et serveurs affichées sur le bureau.
  • Sous l’onglet Tags, vous pouvez choisir quels tags seront affichés dans la barre latérale du Finder. Nous reviendrons sur les tags dans une autre section.
  • Sous l’onglet Barre latérale, vous pouvez choisir quels éléments sont affichés dans la barre latérale, sous FAVORIS, PARTAGES, APPAREILS et TAGS.
  • Enfin, l’onglet Options avancées donne accès à quelques réglages qui se comprennent d’eux-mêmes.

Le menu Finder donne également accès à deux commandes intéressantes :

  • Masquer le Finder cache la ou les fenêtres ouvertes du Finder.
  • Masquer les autres masque toutes les fenêtre ouvertes.