Comment créer un menu simple et élégant avec CSS3
Le but de ce tutoriel est de vous montrer comment construire un menu simple, mais graphiquement évolué, en utilisant uniquement des feuilles de styles et notamment les nouvelles propriétés proposées par CSS3. Nous allons partir d’une base classique et au fur et à mesure l’enrichir de fonctionnalité pour arriver à un menu élégant, saupoudré de quelques animations pour une expérience utilisateur agréable et fluide.
Le marquage HTML
Je commence toujours, et je vous encourage à faire de même, par l’intégration de mes contenus bruts en HTML. C’est en effet plus pratique par la suite de styler des éléments existants.
Ce tutoriel ayant pour but la mise en place d’un menu, je vous épargne toute la partie concernant la construction de la page. Sachez cependant que je suis parti de l’excellent HTML5 Boilerplate pour faire ma démonstration.
S’agissant d’un menu, nous allons donc créer une liste de lien à laquelle nous attribuons à une ID, de préférence sémantiquement correcte. Et puisqu’on parle de sémantique nous allons lui attribué un rôle ARIA. Ça ne mange pas de pain d’utiliser quelques bonnes pratiques.
Nous obtenons le code suivant :
<div id="menucontainer"> <ul id="menu" role="navigation"> <li class="active"><a href="#">Accueil</a></li> <li><a href="#">Services</a></li> <li><a href="#">Produits</a></li> <li><a href="#">À propos</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div>
Notez que nous avons créé une classe « active » afin de définir les styles appliqués au lien sélectionné.
A ce niveau là, vous devriez obtenir le résultat suivant :
Pour l’instant ce n’est pas très sexy, nous allons donc mettre en forme tout cela.
Les styles de base
Nous commençons par supprimer les puces de notre liste, les mettre en ligne et les espacer. Nous nous occupons ensuite d’appliquer quelques styles aux liens de notre menu. Enfin nous terminons par définir les réactions de nos liens aux interactions de l’utilisateur en n’oubliant notre classe « active ».
#menu { list-style: none outside none; margin:0 auto; padding:20px 0; width:960px; } #menu li { display:inline-block; *float:left; /* Hack IE7 */ margin-left: 10px; padding: 7px; position: relative; } #menu li:hover, #menu li:focus { background-color:#eeeeee; } #menu li.active a { color :#ce5046; } #menu li.active a:hover { color: #E07C6F !important; border-bottom: none; } #menu a { background: #f9f9f9; border:1px solid #e9e9e9; color:#777; display:block; font-weight:700; font-size:13px; height:26px; line-height:27px; padding:5px 15px; position:relative; text-align:center; text-decoration:none; text-transform:uppercase; } #menu a:hover, #menu a:focus { background: #f9f9f9; color: #E07C6F !important; text-decoration: none; } #menu a:active { background: #f4f4f4; color:#ce5046; }
Le choix des couleurs et des styles est évidemment à ajuster en fonction de votre propre design. Vous constaterez que notre menu a dorénavant meilleure mine :
C’est pas mal, mais grâce aux fonctions avancées de CSS3, nous allons encore l’améliorer.
Les styles avancés CSS3
Avec l’avènement de CSS3, de nouvelles possibilités s’offrent à nous. Nous allons justement les exploiter pour transformer les éléments de notre menu en boutons. Faisons un petit tour des ingrédients à notre disposition.
Les coins arrondis
Pour adoucir la forme de nos éléments nous arrondissons les coins à l’extrême de manière à avoir un demi cercle de chaque côté. Pour cela nous utilisons la propriété border-radius.
li.exemple{border-radius:45px 45px 45px 45px; }
Cette propriété prend normalement 4 valeurs (en pixel), une pour chaque coin de notre élément, la première correspondant au coin en haut à gauche. Dans notre exemple, les 4 coins ayant le même angle, nous utilisons un raccourci :
li.exemple{border-radius:45px; }
Des ombres pour donner du relief
La propriété box-shadow permet de générer des ombres pour nos éléments. Nous les utiliseront pour faire ressortir les éléments de notre menu avec une ombre portée, mais aussi pour donner un effet d’impression à notre classe active avec une ombre interne.
Autre avantage de cette propriété, c’est qu’elle peut prendre plusieurs valeurs. Ainsi nous pourront combiner plusieurs ombre pour accentuer le relief en donnant un léger effet de biseau à notre bouton.
Le fonctionnement est assez simple. La propriété box-shadow prend 4 valeurs :
- La distance de l’ombre sur l’axe horizontal, à partir de la gauche (exprimée en pixel, les valeurs peuvent être négatives)
- La distance de l’ombre sur l’axe vertical par rapport au sommet (exprimée en pixel, les valeurs peuvent être négatives)
- Le flou appliquée (exprimé en pixel)
- La couleur de l’ombre
Par exemple, pour une ombre noire d’une distance de 1 pixel sur l’axe vertical de notre élément avec un flou de 2 pixels, nous écrivons :
div.exemple {box-shadow:0 1px 2px #000; }
Si vous souhaitez que votre ombre apparaisse en haut, vous appliquez une valeur négative et si vous souhaitez que votre ombre soit interne vous ajoutez inset à la fin.
Pour appliquer plusieurs ombres à un même élément, vous dupliquez les paramètres en les séparant avec une virgule :
box-shadow:0 1px 2px #000, 0 1px 1px #fff inset;
Appliquer un dégradé
Pour donner un effet bombé aux liens de notre menu, nous lui appliquons un léger dégradé. Nous allons utiliser la propriété linear-gradient.
Pour faire simple, on définit le type de dégradé (radial ou linéaire), son point de départ, la couleur de début et celle de fin. Ce qui donne au final :
div.exemple { background: linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); }
Maintenant, si vous souhaitez vous simplifier la vie, je vous encourage à utiliser l’excellent générateur de dégradé de ColorZilla : Ultimate CSS Gradient Generator. Un outil puissant qui vous permettra de visualiser directement votre dégradé et de générer des effets complexes. Attention cependant avec le code généré pour Internet Explorer, celui ci ne fonctionne pas très bien. Pour ma part je fais sans.
Des styles pour notre texte
Si vous souhaitez utiliser une police différente pour votre menu, il suffit d’utiliser la règle @font-face. Un sujet déjà abordé dans mon article 5 polices pour agrémenter votre typographie.
Pour accentuer l’effet de bouton, nous pouvons utiliser un effet d’impression en appliquant une légère ombre blanche à notre texte. La propriété text-shadow fonctionne exactement comme sa grande sœur box-shadow.
a.exemple { text-shadow:0 1px 1px #fff; }
Finalement
Maintenant que nous avons nos ingrédients, nous mixons le tout pour l’appliquer à notre menu :
#menu { list-style: none outside none; margin:0 auto; padding:20px 0; width:960px; } #menu li { -webkit-border-radius:45px; -moz-border-radius:45px; -o-border-radius:45px; border-radius:45px; display:inline-block; *float:left; /* Hack IE7 */ margin-left: 10px; padding: 7px; position: relative; } #menu li:hover, #menu li:focus { background-color:#eeeeee; -webkit-box-shadow:0px 1px 1px #ffffff; -moz-box-shadow:0px 1px 1px #ffffff; -o-box-shadow:0px 1px 1px #ffffff; box-shadow:0px 1px 1px #ffffff; } #menu li.active a { -webkit-box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff; -moz-box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff; -o-box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff; box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff; color :#ce5046; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85); } #menu li.active a:hover { color: #E07C6F !important; border-bottom: none; } #menu a { background: #f9f9f9; background: -moz-linear-gradient(top, #f9f9f9 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); background: linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); border:1px solid #e9e9e9; color:#777; display:block; font-family:"museo-sans-1","museo-sans-2", Helvetica Neue, Arial, Helevetica, sans-serif; font-weight:700; font-size:13px; height:26px; line-height:27px; padding:5px 15px; position:relative; text-align:center; text-decoration:none; text-transform:uppercase; text-shadow:0 1px 1px #fff; -webkit-border-radius:18px; -moz-border-radius:18px; -o-border-radius:18px; border-radius:18px; -webkit-box-shadow:0px 1px 1px #ffffff inset; -moz-box-shadow:0px 1px 1px #ffffff inset; -o-box-shadow:0px 1px 1px #ffffff inset; box-shadow:0px 1px 1px #ffffff inset; } #menu a:hover, #menu a:focus { background: #f9f9f9; background: -moz-linear-gradient(top, #f9f9f9 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); background: linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); -webkit-box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset; -moz-box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset; -o-box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset; box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset; color: #E07C6F !important; text-decoration: none; } #menu a:active { background: #f4f4f4; background: -moz-linear-gradient(top, #f4f4f4 0%, #f9f9f9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f9f9f9)); background: -webkit-linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%); background: -o-linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%); background: -ms-linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%); background: linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%); -webkit-box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset; -moz-box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset; -o-box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset; box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset; color:#ce5046; text-shadow: 0 1px 1px #fff; }
Hey ! Il y a plein de propriété qu’on a pas vu ! Je vous rassure il s’agit simplement des déclinaisons de nos propriété CSS3 pour tous les navigateurs compatibles. Certes les dernières versions de Firefox, Chrome, Safari, Opera et Internet Explorer (9) prennent en charge naturellement ces propriétés, mais leurs grands frères nécessitent qu’on leur explique ce qu’il se passe. Pour cela on décline notre propriété en la préfixant du code du navigateur concerné
-webkit-pour les navigateurs WebKit (Chrome et Safari),-moz-pour Mozilla (Firefox),-o-pour Opera,
Notre menu est dorénavant graphiquement abouti :
Nous allons pouvoir enrichir l’expérience utilisateur en utilisant les fameuses transitions CSS3
Enrichir l’expérience utilisateur avec les transitions
Les transitions CSS3 sont des outils merveilleux qui nous permettent de fluidifier les changements d’état de nos éléments, par exemple au survol d’un lien ou au clic sur ce même lien. Ils servent à enrichir l’expérience utilisateur. Dans notre cas, nous les utiliseront pour adoucir les changement d’état de notre menu.
Les transitions ne sont évidemment pas supportées par tous les navigateurs. Il faut donc s’assurer que celles ci ne soient pas indispensables à la bonne compréhension de notre site.
Le fonctionnement
Les transitions définissent la manière dont le changement d’état d’un élément est rendu. Elles s’appliquent à l’état normal d’un élément. Par exemple :
a.exemple { background:#000; color:#f9f9f9; -webkit-transition:color 0.3s ease 0.3s, background 0.3s ease; -moz-transition:color 0.3s ease 0.3s, background 0.3s ease; -o-transition:color 0.3s ease 0.3s, background 0.3s ease; transition:color 0.3s ease 0.3s, background 0.3s ease; } a.exemple:hover, a.exemple:focus { background:#f9f9f9; color:#000; }
Dans cet exemple, on change la couleur de fond et la couleur de texte de notre lien au survol et au focus. La propriété transition nous permet de lisser ce changement d’état. Comme pour le reste des propriétés CSS3 nous la dupliquons pour tous les navigateurs.
Nous définissons d’abord la propriété à modifier. Vous pouvez consulter la liste des propriétés compatibles avec les transitions.
Nous déterminons ensuite sa durée, je vous conseille vivement d’éviter d’utiliser des transitions de plus de 0,5 secondes. Les utilisateurs risquent de vous haïr.
Avec la dernière valeur nous choisissons sa courbe de vitesse. Actuellement, il existe 5 courbes prédéfinies :
lineareaseease-inease-outease-in-out
Notez que dans l’exemple, je sépare les 2 propriétés impactées. Nous aurions pu faire beaucoup plus simple en indiquant que toutes les propriétés étaient concernées :
transition:all 0.3s ease;
Enfin, le dernier paramètre possible (appliqué uniquement à la couleur du texte), permet de définir un délai au delà duquel notre effet se déclenchera. Il s’exprime lui aussi en secondes.
Mise en application des transitions
Maintenant que nous avons fait le tour de ce qu’il était possible de faire, nous allons appliquer le tout à notre menu :
#menu { list-style: none outside none; margin:0 auto; padding:20px 0; width:960px; } #menu li { -webkit-border-radius:45px; -moz-border-radius:45px; -o-border-radius:45px; border-radius:45px; display:inline-block; *float:left; /* Hack IE7 */ margin-left: 10px; padding: 7px; position: relative; -webkit-transition:background 0.3s ease; -moz-transition:background 0.3s ease; -o-transition:background 0.3s ease; transition:background 0.3s ease; } #menu li:hover, #menu li:focus { background-color:#eeeeee; -webkit-box-shadow:0px 1px 1px #ffffff; -moz-box-shadow:0px 1px 1px #ffffff; -o-box-shadow:0px 1px 1px #ffffff; box-shadow:0px 1px 1px #ffffff; } #menu li.active a { -webkit-box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff; -moz-box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff; -o-box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff; box-shadow:0px 1px 2px #999 inset,0px 1px 1px #ffffff; color :#ce5046; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85); } #menu li.active a:hover { color: #E07C6F !important; border-bottom: none; } #menu a { background: #f9f9f9; background: -moz-linear-gradient(top, #f9f9f9 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); background: linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); border:1px solid #e9e9e9; color:#777; display:block; font-family:"museo-sans-1","museo-sans-2", Helvetica Neue, Arial, Helevetica, sans-serif; font-weight:700; font-size:13px; height:26px; line-height:27px; padding:5px 15px; position:relative; text-align:center; text-decoration:none; text-transform:uppercase; text-shadow:0 1px 1px #fff; -webkit-border-radius:18px; -moz-border-radius:18px; -o-border-radius:18px; border-radius:18px; -webkit-box-shadow:0px 1px 1px #ffffff inset; -moz-box-shadow:0px 1px 1px #ffffff inset; -o-box-shadow:0px 1px 1px #ffffff inset; box-shadow:0px 1px 1px #ffffff inset; -webkit-transition:color 0.3s ease, background 0.3s ease !important; -moz-transition:color 0.3s ease, background 0.3s ease !important; -o-transition:color 0.3s ease, background 0.3s ease !important; transition:color 0.3s ease, background 0.3s ease !important; } #menu a:hover, #menu a:focus { background: #f9f9f9; background: -moz-linear-gradient(top, #f9f9f9 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); background: linear-gradient(top, #f9f9f9 0%,#f4f4f4 100%); -webkit-box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset; -moz-box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset; -o-box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset; box-shadow:0px 1px 2px #999,0px 1px 1px #ffffff inset; color: #E07C6F !important; text-decoration: none; -webkit-transition: all 0.2s ease !important; -moz-transition: all 0.2s ease !important; -o-transition: all 0.2s ease !important; transition: all 0.2s ease !important; } #menu a:active { background: #f4f4f4; background: -moz-linear-gradient(top, #f4f4f4 0%, #f9f9f9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f9f9f9)); background: -webkit-linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%); background: -o-linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%); background: -ms-linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%); background: linear-gradient(top, #f4f4f4 0%,#f9f9f9 100%); -webkit-box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset; -moz-box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset; -o-box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset; box-shadow:0px 0px 1px #999,0px 1px 1px #ffffff inset; color:#ce5046; text-shadow: 0 1px 1px #fff; }
Conclusion
Et voilà notre menu est terminé. Je vous remercie d’avoir lu ce tutoriel et j’espère qu’il vous permettra de créer de magnifiques menus pour vos futurs sites.
Cet article vous a plu ? Faîtes le savoir :
Pingback: Tuto by frandemoulin - Pearltrees