Franc83

Menu nowrap

24-07-2008

Menu CSS nowrap

Un menu en CSS pur qui reste en ligne

C'est un menu en css pur, avec des boutons de sélection.

Qu'a-t-il de spécial ?
Il reste en ligne quand la fenêtre se réduit.....

Voici deux techniques différentes pour y arriver

Voyons d'abord les exemples :

Lien 1 - Lien 4 - Lien 3 - Lien 4

Lien 1 -
Lien 2 -
Lien 3 -
Lien 4

Ces deux menus sont d'apparence identiques, mais sont construits en fait avec deux philosophies radicalement différentes :

Le premier se construit dans une cellule de tableau, et se compose d'une suite de href.
Le second se construit uniquement comme une liste

Les codes à utiliser :

Nous allons donc avoir un code Css qui englobera les deux possibilités de mise en forme html, et deux codes html différents.

Le code CSS global pour les deux méthodes à insérer soit entre les balises <head>........</head> ou dans un fichier externe appelé dans le header :

Cette fonction nowrap joue sur les white-space, ce qui veut dire en clair que la fonction nowrap ne permet pas l'affichage des espaces blancs surnuméraires ( les white-space, wrap en anglais signifiant "envelopper")

Il est clair que tout est paramétrable, la couleur, les tailles, les positions, les bordures, le nombre de liens, il suffit de l'adapter à votre charte graphique.

Le code html pour construire le menu à partir d'un tableau :

<table height="101" align="center" cellpadding="3" class="normalIE">
<tr>
<td width="100%" height="60" align="center" style="white-space:nowrap;" >
<a class=buttonart href="#nogo">bouton pour le Lien 1</a> -
<a class=buttonart href="#nogo">bouton pour le Lien 2</a> -
<a class=buttonart href="#nogo">bouton pour le Lien 3</a>
- <a class=buttonart href="#nogo">bouton pour le Lien 4</a></td>
</tr>
</table>

le hack internet explorer "normalIE" empêche l'apparition de scrolling, et adapte le tableau sur toute la largeur, l'empêchant de passer à la ligne. Le nowrap s'applique ici à la cellule du tableau....
la classe "buttonart" met elle en forme l'aspect des boutons, les couleurs, le rollover, les fontes.

Le code html pour construire le menu à partir d'une liste <ul> :

<ul class="normalIE">

<li><a class=buttonart href="#nogo">bouton pour le Lien 1</a> - </li>

<li><a class=buttonart href="#nogo">bouton pour le Lien 2</a> - </li>

<li><a class=buttonart href="#nogo">bouton pour le Lien 3</a> - </li>

<li><a class=buttonart href="#nogo">bouton pour le Lien 4</a></li>

Ici les mêmes remarques s'appliquent aux mêmes éléments de class.

Dans le même esprit
Boutons rollover Div boutons Loader Ajax Menu Barre CSS Menu cascade Menu Diodes Menu Fade Menu latéral css Loupe horizontale Loupe verticale Menu Outlook Express Menu Slide java Menu Filtres IE Menu slide Frames Menu images css Barre CSS java Menu en iframes Menu en pur CSS Menu multi-slide

Citez cet article

Commenter cet article

Commenter
Les messages comportant des attaques verbales contre les personnes seront supprimés. Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur. Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:
Commentaire
Code:*
	Je désire être prévenu par mail des commentaires qui suivront