Les feuilles de style - 4 : Menus, etc.

• Menus en CSS
• Différentes sortes de menus
• La fonction include
• Menu déroulant
• Choix de menus
• Menus de Stu Nichols***
• Listamatic et autres menus

• margin:0; padding:0;
• Rollovers
• Sprites CSS

• Les feuilles de style alternatives
• Les pseudo-formats
• Class et id
• Utilisation des images en CSS
• Créer un arrondi en CSS

 

 

Menus en CSS :

Les feuilles de styles sont particulièrement adaptées pour la conception de menus.

Cependant, concevoir des menus en CSS nécessite des connaissances, et un certain talent de graphiste.

Il existe des sites où l'on peut trouver des menus en CSS tous faits. Mais la qualité est très variable, et le fonctionnement aléatoire. De plus, il est difficile de trouver un menu déroulant qui soit compatible avec tous les navigateurs.

 

 

Différentes sortes de menus :

 

Images ou CSS :

Il existe deux sortes de menus / menus déroulants :
- ceux qui comportent des images (une image au repos (off) et une image active (on))
- ceux qui sont fait entièrement en CSS (on utilise les styles et couleurs pour changer l'apparence du menu)

 

Arrière plan :

L'arrière plan du menu peut être une image de la largeur du menu
L'arrière plan peut également être constitué d'une image d'une largeur d'1 pixel qui sera répétée (repeat) sur toute la largeur du menu

 

 

Utilisation de la fonction include :

Pour une plus grande souplesse dans l'utilisation des menus, la fonction php "include" est très pratique :
Indispensable : il faut utiliser des pages en php (avec l'extension php)

Mode d'emploi :
- on crée un ficher contenant le menu (exemple : menu.inc.php)
- on fait appel à ce fichier dans chaque page par la fonction "include" : <?php include('menu.inc.php'); ?>

Exemple :

Dans  la feuille de style :

Exemple de positionnement.

 

Voir ma page : PHP - Fonction include

 

 

Menu déroulant :

Un menu déroulant est constitué d'une partie HTML (dans la page) et d'une partie CSS (dans un fichier .css)

 

La structure :

Dans la page (ou dans un fichier include) :

Le code HTML est constitué d'une liste et d'une sous-liste :

 

Dans un fichier css :

On distingue les styles de la liste principale et des sous-listes :

 

Voir tous les détails sur cette page :

Openclassroom.com - Créer un menu horizontal déroulant en CSS

 

Voir aussi la page de Stu Nicholls (en anglais, mais très simple, très progressif et très facile à comprendre) :
http://www.cssplay.co.uk/menus/tutorial.html

 

Le plus simple est d'utiliser un menu déjà fait !

 

Choix de menus :

Deux sites sont particulièrement intéressants pour la qualité des menus proposés :
- CSS play de Stu Nicholls : http://www.cssplay.co.uk/menus/
- Listamatic : http://css.maxdesign.com.au/listamatic/

 

CSSplay de Stu Nicholls :

Le meilleur site que je connaisse.

On trouve beaucoup de menus sur le web.
Ceux de Stu Nichols font partie des plus beaux et des mieux réalisés.

Remarque : certains menus nécessitent d'effectuer un don à l'auteur (ils le valent bien !)

 

Pour mon site : Court Circuit Team J'utilise le modèle suivant :
- Professional left/right dropline menu » 09-12-2007

Le sous menu horizontal est original.
Cependant, la manipulation est un peu difficile pour un novice.

 

Ma sélection :

Quelques modèles de menus intéressants. Mais il en existe bien d'autres

Drop-down :

Le menu déroulant "classique" en diverses combinaisons (exemple : avec sous-menus, à largeur variable.)

- A css only dropdown menu further examples***
- A Professional drop-down menu #3
- Professional variable width dropdown menu #3
- Professional variable width dropdown menu #4
- Skeleton dropdown menu #2

- Professional drop-down using images

- Professional - Any width dropdown/flyout menu width left and right dropdown/flyouts
- Professional drop-down #4

- The ULTIMATE CSS only drop-down menu
- A six level menu with overrun » 22-03-2007
- A CSS only drop-down menu with overlap and overrun

 

Original :

- CSS3 3D flipdown menu - NO javascript

- CSS3 - Playing Cards Menu - no images!

- CSS3 - The future now - Book Shelf Menu - No graphics

- CSS3 - The future now - Slide/Animation Pullup Menu

 

Drop-line :

Le menu sur deux lignes.

- Professional - Anywidth dropline with all levels centered

- Professional drop line menus

- Doors drop-line menu three » 26-01-2007
- Doors drop-line menu » 13-01-2007

- Professional dropline menu #7

Hybride :
- Professional dropline/dropdown hybrid » 09-12-2007
- Professional dropline / dropdown / flyout hybrid menu
- Professional dropline / dropdown / flyout menu version 2

 

Drop panel*** :

- CSS only 'Click droplist menu'***

- CSS3 droplist menu with delay - suitable for iPhone, iPad and iPod Touch***

- CSS play - Drop Everything v2 suitable for the iPad, iPhone and iPod Touch

- CSS Droplist suitable for the iPad, iPhone and iPod Touch

Exemple : _essai_menus_droplist2.php

- CSS only 'hover dropslide animated menu'
Ou en vertical :
- Flyout List Menu - suitable for iPhone, iPad and iPod Touch

- CSSplay Stretch Drop

- CSS Droplist/Flyout Menu

 

Drop-list :

Le menu affichant des listes de choix.

- A drop lists menu » 04-05-2007

- Professional droplist menu***

 

Vertical menu :

- Vertical concertina slide menu - the CSS answer

- Definition list slide down menu - NO hacks, NO conditional comments, NO tables and NO javascript.

- A Definition List Menu

 

Voir aussi le menu du site Microsoft, Clair, simple et très fonctionnel.

 

 

Listamatic et autres menus:

 

Listamatic :

On peut également consulter ce site :

 

Autre :

css-astuces.batraciens.net - EXEMPLE D'UN MENU PAR ONGLETS EN CSS PURES

 

Pompage.net - La vengeance des menus déroulants
"Remarquez qu'il vaut mieux indiquer une largeur (width) dans le sélecteur #nav li, sinon Opera va péter un câble. Rappelez-vous aussi que dès qu'on fait flotter des éléments, le contenu situé en-dessous du menu déroulant doit être dégagé (avec clear: left)."

 

 

margin:0; padding:0; :

Permettent de supprimer les marges

Alsacreations.com - Créer des menus simples en CSS
"Il est nécessaire de supprimer les marges et les padding pour obtenir le même rendu dans tous les navigateurs.
En effet, les valeurs par défaut de ces propriétés ne sont pas les mêmes dans Firefox, Opera ou IE..."

 

 

Rollover en CSS :

Le rollover CSS.
Il s'agit de faire réagir une zone en changeant son apparence au survol de la souris, le tout sans Javascript.

Pas de onMouseover

Innovablog.com - Design, CSS : les rollover CSS, un must !
Dans cette page, on utilise un seul fichier image pour afficher un bouton au repos et survolé (hoover).
On utilise la propriété CSS background, et on modifie le placement de l'image (-144px et -72px)

Voir :
Pompage.net - la propriété « background »
La propriété CSS background vous permet d'appliquer à tout élément de votre choix des couleurs ou des images de fond.

Yoyodesign.org - La propriété background

 

Wellstyled.com - Fast Rollovers Without Preload

 

 

Sprites CSS :

En préparation...

Lorsqu'on utilise Page Speed (voir ma page) pour évaluer la taille de ses pages, une recommandation s'affiche :

 

Les Sprites CSS consistent à rassembler, en une seule image, les images les plus utilisées.
Au lieu de charger plusieurs images, le serveur n'aura qu'un seul fichier.
Pour afficher une image, on donnera ses coordonnées dans l'image principale (dans un fichier CSS)

 

Restrictions :

Attention : Il semble que cela ne fonctionne que pour les images intégrées aux pages dans la feuille de style.
Exemple, avec la commande background :

 

Cela ne fonctionne pas non plus pour les images qui sont répétées dans les deux sens.
Cela est déconseillé pour les images de menus.

Voir : Les sprites CSS :
http://www.webinventif.fr/sprites-css/

 

Création des sprites :

 

 

Optimisation des images avec SmushIt :

On peut optimiser le poids d'un sprite avec Smush.it :
http://developer.yahoo.com/yslow/smushit/

Yahoo! Smush.it :
http://www.smushit.com/ysmush.it/

 

Liens :

13/08/2010 : Alsacreations.com - Les sprites CSS
"Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS.
La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position.
Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple)."

 

05/03/2004 : Pompage.net - Sprites CSS : Meurs, découpe d'images, meurs !

 

 

Feuilles de style alternatives :

Pour une même page web, on peut proposer au visiteur de choisir entre plusieurs présentations.
On peut également définir une feuille de style spécifique à l'impression.

Openweb.org - Avoir plusieurs présentations alternatives pour votre site

Feuilles de style permanentes, alternatives et préférées en (X)HTML
http://www.blog-and-blues.org/weblog/2005/08/04/437

 

On pourra utiliser une feuille de styles pour chaque utilisation :
exemple : styles.css et menu.css

 

Dans la partie head de chaque page, on ajoutera le code appelant chaque feuille de style :

 

Une feuille de style pour l'impression :
http://openweb.eu.org/articles/css_impression/
Un exemple de feuille de style d'impression
http://openweb.eu.org/articles/exemple_css_print/

 

 

Les pseudo-formats :

Selon la page Pseudo-formats sur fr.selfhtml.org

":link, :visited, :hover, :active, :focus (pseudo-formats pour les liens)

:link = pour les liens aux pages qui n'ont pas encore été visitées
:visited = pour les liens aux pages qui ont déjà été visitées
:hover = pour les liens sur lesquels l'utilisateur passe avec la souris
:active = pour les liens en train d'être cliqués
:focus = pour les liens qui deviennent actifs (focus) par exemple lors d'une "recherche" par tabulateur"

 

 

class et id :

La principale différence entre ces deux balises :

Dans une page, on ne peut utiliser qu'une seule fois la balise id

Exemple :

On peut utiliser autant de fois que l'on veut la balise class

Exemple :

 

La notation sera différente dans la feuille de styles :

Pour définir une balise id, on utilisera un dièze (#) :

Pour définir une balise class, on utilisera un point (.) :

 

On utilisera de préférence une balise id

Exemple : pour les blocs principaux de la page : conteneur, entete, contenu, bloc gauche, etc.

On utilisera une balise class dans tous les autres cas.

 

Liens :

Quelle est la différence entre une classe et un id ?
http://www.alsacreations.com/article/lire/535-Quelle-est-la-difference-entre-une-classe-et-un-id.html

XHTML, attribut 'id' ou 'class' ?
http://xhtml.le-developpeur-web.com/attribut_id_ou_class-xhtml.php

 

 

Utilisation des images dans les CSS :

Les images utilisées pour embellir le site peuvent être déclarées dans la feuille de style.

Cela peut être :

Les images de fond :

Les puces graphiques :

 

Utilisation des images dans les CSS
http://openweb.eu.org/articles/images_css
Comment utiliser une feuille de style pour insérer dans le contenu HTML des images décoratives.

 

 

Créer un arrondi en CSS :

Il existe différentes méthodes pour créer un arrondi en CSS.

Voir la page du site du Zero :
Créer un arrondi en CSS :
http://www.siteduzero.com/tutoriel-3-31188-creer-un-arrondi-en-css.html

 

Créer un menu à onglets avec CSS**** :
http://normandlamoureux.com/cours/css/index.html
Une page très complète et très instructive sur la façon de travailler les CSS

Portes coulissantes en CSS (Sliding Doors of CSS).
http://www.ultra-fluide.com/ressources/css/menu-onglets.htm

 

Créer un arrondi en HTML, avec un tableau :

En HTML, il faut :
- criéer un tableau de 3 rangées et 3 colonnes,
- créer 9 images à mettre dans les 9 cellules, pour :
4 coins : haut gauche, haut droite, bas gauche, bas droite,
4 côtés : haut, bas, gauche, droite
1 fond.

- mettre les propriétés du tableau à : cellspacing="0" cellpadding="0"
- mettre les dimensions des cellules : height et width

C'est la technique que j'ai utilisé sur mon site : Le site des EFG :
http://efg.aidemac.net/

 

Malheureusement, la techinque est un peu "artisanale" et peu conventionnelle et compatible.
La valeur height (hauteur) est peu utilisée,
Suivant les navigateurs, l'affichage peut être défectueux.