begin process at 2012 02 09 18:25:23
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Menu & Co

 > MENU CSS TOUT SIMPLE

MENU CSS TOUT SIMPLE


 Information sur la source

Note :
8,17 / 10 - par 12 personnes
8,17 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Niveau :Débutant Date de création :09/04/2004 Vu :18 549

Auteur : quitues

Ecrire un message privé
Commentaire sur cette source (21)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Bah voila c'est un menu très simple entièrement en CSS.
Vous pouvez le personnaliser à volonté (il suffit de savoir manipuler le CSS).

Source

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  • <html>
  • <head>
  • <title>Menu CSS</title>
  • <style type="text/css">
  • A.menulink
  • {
  • display: block;
  • width: 110px;
  • text-align: left;
  • text-decoration: none;
  • font-family: Verdana,arial;
  • font-size:12px;
  • color: #000000;
  • border: solid 1px #ffffff;
  • }
  • A.menulink:hover
  • {
  • border: solid 1px #cccccc;
  • background-color:#eeeeee;
  • text-decoration: none;
  • }
  • </style>
  • </head>
  • <body>
  • <a href="index.htm" class="menulink">&nbsp;Home&nbsp;</a>
  • <a href="discute.htm" class="menulink">&nbsp;Discuter&nbsp;</a>
  • <a href="jeux.htm" class="menulink">&nbsp;Jeux&nbsp;</a>
  • <a href="links.htm" class="menulink">&nbsp;Liens&nbsp;</a>
  • <a href="vb.htm" class="menulink">&nbsp;Programmation&nbsp;</a>
  • <a href="recherche.htm" class="menulink">&nbsp;Rechercher&nbsp;</a>
  • <a href="about.htm" class="menulink">&nbsp;A propos&nbsp;</a>
  • <a href="contact.htm" class="menulink">&nbsp;Contact&nbsp;</a>
  • </body>
  • </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu CSS</title>

<style type="text/css">

A.menulink
{
display: block;
width: 110px;
text-align: left;
text-decoration: none;
font-family: Verdana,arial;
font-size:12px;
color: #000000;
border: solid 1px #ffffff;
}

A.menulink:hover
{
border: solid 1px #cccccc;
background-color:#eeeeee;
text-decoration: none;
}

</style>

</head>

<body>
	<a href="index.htm" class="menulink">&nbsp;Home&nbsp;</a> 
	<a href="discute.htm" class="menulink">&nbsp;Discuter&nbsp;</a> 
	<a href="jeux.htm" class="menulink">&nbsp;Jeux&nbsp;</a> 
	<a href="links.htm" class="menulink">&nbsp;Liens&nbsp;</a> 
	<a href="vb.htm" class="menulink">&nbsp;Programmation&nbsp;</a> 
	<a href="recherche.htm" class="menulink">&nbsp;Rechercher&nbsp;</a> 
	<a href="about.htm" class="menulink">&nbsp;A propos&nbsp;</a> 
	<a href="contact.htm" class="menulink">&nbsp;Contact&nbsp;</a> 
</body>
</html>

 Conclusion

pas de bugs connus.
laissez vos commentaires, remarques ...


 Sources du même auteur

Source avec Zip Source avec une capture MENU POUR PAGE HTML VERSION 5
Source avec Zip FILTRES ET TRANSITIONS SUR DES SPAN DIV ET IMG
Source avec Zip OVERLIB : BULLES SUR LIENS PERSONALISABLES
Source avec Zip Source avec une capture ECHEC ET MAT : JEU D'ÉCHEC TRÈS PERFORMANT
Source avec Zip Source avec une capture MENU POUR PAGE WEB SUPER-PARAMÉTRABLE

 Sources de la même categorie

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking

Commentaires et avis

Commentaire de bultez le 10/04/2004 14:19:56

c'est sûrement très bien, mais quel
est le rapport avec JavaScript ?
ici c'est JavaScriptFR.com, des sources JavaScript.
@+

Commentaire de quitues le 10/04/2004 17:11:15

en fait c'est la simplification du script JS de mathieumg

"MENU TABLE ROLLOVER STYLE KINGS OF CHAOS.COM" http://www.javascriptfr.com/code.aspx?ID=16290

tellement simplifié (je le reconnais) qu'il n'y a plus de javascript.

Commentaire de jeff_the_lifeguard le 10/04/2004 19:43:21

Super, en plein qu'est-ce que je cherchais. En plus, c'est complètement paramétrable sans que je me casse trop la tête.

Merci

Commentaire de jeff_the_lifeguard le 10/04/2004 19:44:18

Mais il y a une affaire que je comprend pas, ca sert a koi cela
display: block; ???

Commentaire de quitues le 10/04/2004 21:52:51

ca sert a ce que les liens soient en colone sans utiliser de &lt;br&gt;.

Commentaire de jeff_the_lifeguard le 12/04/2004 23:55:17

Une petite idée, quelqu'un pourrait ajouter des sous menus si c'est faisable

Commentaire de Samiby le 16/04/2004 14:18:56

Merci pour ce code. très utile; je cherchais ça depuis un bout de temps. Je mettrai 10/10, mais comme ce n'est pas du javascript, seulement 9/10.

Commentaire de jim333 le 18/04/2004 15:08:58

bravo

Commentaire de gorby69 le 27/05/2004 12:10:25

Ya peut etre pas de javascript mais ça fait toujours plaisir de tomber sur des codes claires et concis comme celui-ci quand on débute en langage web. En tout cas merci pour moi.

Commentaire de quitues le 27/05/2004 19:21:50

ca fait plaisir de voir qu'un code peut aider quelqu'un.

merci bcp gorby69

Commentaire de bedo_one le 06/08/2004 10:54:35

C'EST GÉNIAL erxactement le  menu qu'il me fallait, mais j'ai juste une question... pourquoi dreamweaver affiche les rubriques à la suite de gauche à droite et pas de haut en bas comme les navigateurs (Netscape et ie6)?

Commentaire de bedo_one le 06/08/2004 10:57:02

il ne comprend pas le display: block; ?

Commentaire de quitues le 06/08/2004 14:03:31

bedo_one : c'est exactement ca j'utilise aussi Dreamweaver et il ne reconnait pas le display: block

Commentaire de tipit le 06/08/2004 18:44:04

Ben moi g dreamweaver mx et il le reconnais, comme mon frontpage, et jutilise ie6.00

Commentaire de seyev le 28/08/2004 17:48:30

Joli. Ce n'est pas ce que je cherchais, mais je garde... Pour une autre fois ? pourquoi pas....

Commentaire de vlad86 le 12/09/2004 09:25:27

Cool par contre pouvez vous m'aider j'ai un big problème, enfète au lieu de mettre un fond blan je voudrais mettre mon menu (image design) en arrière plan mais sa le découpe trop mal et les texte sont hyper éloigner avec l'image comment faire pour que mon image s'affiche correctement en background avec les dimmenssions que je lui ai donner et que les texte s'afiche eux aussi nornalement!????



Merci de toutes vos réponses et à la résolutiont de mon problème

PS: désoler pour c'est fautes (je suis préssez :)     )

Commentaire de vlad86 le 12/09/2004 09:25:32

Cool par contre pouvez vous m'aider j'ai un big problème, enfète au lieu de mettre un fond blan je voudrais mettre mon menu (image design) en arrière plan mais sa le découpe trop mal et les texte sont hyper éloigner avec l'image comment faire pour que mon image s'affiche correctement en background avec les dimmenssions que je lui ai donner et que les texte s'afiche eux aussi nornalement!????



Merci de toutes vos réponses et à la résolutiont de mon problème

PS: désoler pour c'est fautes (je suis préssez :)     )

Commentaire de vlad86 le 12/09/2004 09:26:21

Désoler pour ce bug!

Commentaire de ranouf le 11/10/2004 15:00:48

super exactement ce que je cherchai :) je viens de poser la question sur le forum !!! génial

Commentaire de madndf le 12/01/2005 09:24:32

Comme les autres, c'est nickel. Un code simple et efficace. Sans tartine de code en plus.
Je vais donc essayer de l'inclure sur mon site, et de l'automatiser en PHP pour faire des sous menu...

MAD

Commentaire de majidali le 12/05/2006 02:12:49

merci c'est geniale,c'est ce que je cherche
bravo

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,919 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales