begin process at 2010 08 01 01:16:48
  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 :17 184

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 MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking
Source avec Zip Source avec une capture MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA... par Kimjoa
Source avec Zip Source avec une capture WAVEBOX V1.1, LA SLIDEBAR SEXY par flashdumpf
Source avec Zip Source avec une capture MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma

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

Août 2010
LMMJVSD
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Consulter la suite du CalendriCode

 
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 : 0,530 sec (4)

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