Créer un menu horizontal Web2 en HTML

Publié dans : Liens, listes, menus, curseurs - Tous blogs

Créer un menu horizontal Web2 en HTML

Un menu très joli et vraiment pas difficile à réaliser.

Première étape :

Allez sur Stu Nicholls

Choisissez le menu qui vous plait et cliquez sur Download Pro Menu

Vous venez de sauvegarder un fichier .zip : un ensemble de fichiers compressés.

Pour les décompresser, j'utilise WinRAR, extraire vers.

Deuxième étape :

Dans votre administration - Mes images :

créez un répertoire : Menu
- sauvegardez dedans les fichiers :
  - button1.gif
  - button2.gif
  - button3.gif
- notez leur adresse

Troisième étape :

Dans ce fichier .zip, il y a avait aussi le fichier pro_one.html, il faut cliquer dessus. Il vous mène sur une page Web dont il faut regarder la source.
Cette source, il va falloir la copier et la personnaliser ainsi :

<style type="text/css">

/*Credits: CSSpplay */

/*URL: http://www.cssplay.co.uk/menus/pro_one */



.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; 

background:#fff url(button1.gif); position:relative; border:1px solid #000; 

border-width:0 1px; border-bottom:1px solid #444;}

.menu1 li {float:left;}

.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; 

text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; 

font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}

.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}

.menu1 li.current a {color:#fff; background:url(button3.gif);}

.menu1 li.current a b {background:url(button3.gif) no-repeat right top;}

.menu1 li a:hover {color:#fff; background:#000 url(button2.gif);}

.menu1 li a:hover b {background:url(button2.gif) no-repeat right top;}

.menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); 

cursor:default;}

.menu1 li.current a:hover b {background:url(button3.gif) no-repeat right top;}



</style>

</head>



<body>

<ul class="menu1">

<li><a href="http://annak.over-blog.com/"><b>Home</b></a></li>

<li class="current"><a href="http://annak.over-blog.com/

"><b>Privacy Policy</b></a></li>

<li><a href="http://annak.over-blog.com/

"><b>Products</b></a></li>

<li><a href="http://annak.over-blog.com/

"><b>Where to find us</b></a></li>

<li><a href="http://annak.over-blog.com/

"><b>Contact us</b></a></li>

<li><a href="http://annak.over-blog.com/

"><b>Search</b></a></li>

</ul>

En rouge : vous collez les adresses de vos propres boutons (étape2)

En bleu : vous collez les adresses des liens

En vert : ce qui apparaît sur le menu

Avouez que ce n'est pas très difficile pour un résultat très sympa.

Voir les 4 commentaires - Ecrire un commentaire
Recommander

Précédent : Mettre un aquarium sur votre blog Retour à l'accueil Suivant : Afficher la liste des articles les...

Commentaires

Coucou Annak c'est le style de menu vista que l'on retrouve sur mon blog j'espère que tu va bien passe une bonne soirée gros bisous :)

Commentaire n° 1 posté par Jean Michel le 13/11/2008 à 22h22

Les menus provenant de ce site sont bien conçu, celui là particulièrement celui là car je l'utilise sur mon blog depuis le début. J'y ai juste fait quelques adaptations et il fonctionne bien sur Over-blog.

Commentaire n° 2 posté par Mystik-Angel le 19/11/2008 à 23h23

c'est vrai menus bien sympas mais juste un probleme pour mettre le lecteur deezer dans une fenetre de 300 par 250 le fenetre s'ouvre en grand autreent super content merci

Commentaire n° 3 posté par herve le 03/02/2009 à 21h41

j'ai une question bete, mais la source on l'a copie ou ? :)

Commentaire n° 4 posté par T00n le 23/02/2009 à 23h27