Cliquez pour voir le menu
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
- button1.gif
- notez leur adresse
- sauvegardez dedans les fichiers :
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">En rouge : vous collez les adresses de vos propres boutons (étape2)
/*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 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.
Bonjour,
RépondreSupprimermon blog est http://ayrton.senna.depuis1995.over-blog.com/. J' aurais voulu savoir commment crée t' on des sous menus déroulant. C' est à dire pour le cas de mon blog, dans "Saison 95" je voudrais crée 5 sous menu dirigeant vers 5 adresses différentes.
merci de vos conseils dans votre blog.
Bonjour f.g,
RépondreSupprimerJe vois que ton blog est récent, tu es donc sans doute au niveau confiance sur OverBlog. Tu ne peux donc pas utiliser de javascript et je ne connais malheureusement pas de code sans javascript pour réaliser un menu déroulant.
Bonjour,
RépondreSupprimerje cherche à placer le menu 6 :
http://www.cssplay.co.uk/menus/pro_horizontal.html
Mais dans ce qui est proposé, il n'ya pas Boutton 1, 2 et 3.
Mais 0a, 0b,1a 1b, 2a 2b...
Comment gérer ?
Merci de votre aide
Lud'éveil / http://www.ludeveil.com/pages/menu-5258409.html
RépondreSupprimerBonjour,
Pour moi cela ne fonctionne pas du tout !
J'ai collé ça dans une page en style html, mais voilà le résultat !
Que ce soit sous Firefox ou Modzila, j'ai un vague menu pas beau !
Bonjour j'ai reussi à faire un menu horizontal orienteur en suivant vos précieux conseils...je peux le prévisualiser mais il n'apparait pas sur mon blog !!! ...comment faire ???
RépondreSupprimerMerci
http://www.iscequateur2012.com/