Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :

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
Retour à l'accueil

 

Présentation

: Les ficelles d Anna K.
: 26/06/2006
annak : Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer de la musique, des gadgets, des compteurs, des astuces de référencement...

 

Recherche Rapide Sur le Site

 

Sommaires

Sommaires Pour les Blogs OverBlog Sommaires Pour tous les Blogs Détente

 

Dernières Astuces

liste complète

 

Commentaires

 

 
Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus - Articles les plus commentés