Celui-ci est horizontal : Voir le Menu Dolphin
Première étape :
Vous cliquez sur le menu désiré puis sur download the zip file
Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers.
Vous avez maintenant sur votre PC :
- un dossier comportant des images
- un fichier style.css
- un fichier index.html
Deuxième étape :
Dans l'administration de votre blog - Documents - Mes images :
- vous créez un répertoire ayant le nom de votre menu
- vous y enregistrez les images
- vous notez leur adresse
En HTML de l'endroit où vous voulez ce menu :
- vous collez le contenu du fichier style.css
<style type="text/css">
/* ---------------------- Dolphin nav ---------------------- */
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;
background:#143D55;width:100%;
font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent
url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893
url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_right-ON.gif) no-repeat top
right;height:33px;}
/* ---------------------- END Dolphin nav ---------------------- */
</style>
En rajoutant ce qui est en rouge
En personnalisant les adresses des images en violet : vous les avez noté lors la deuxième étape.
- vous collez ensuite le contenu du fichier index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php //PHP ADODB document - made with PHAkt 3.6.0?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>13styles.com Dolphin Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Home</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"class="current"><span>About Us</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Services</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation
menus"><span>Our Work</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation
menus"><span>Contact Us</span></a></li>
</ul>
</div>
</div>
</body>
</html>
Si votre blog est sur OverBlog, vous effacez ce qui est en rouge
En bleu, vous remplacez par les URL de destination
En vert, vous personnalisez avec ce qui apparaîtra au survol de la souris
En orange, vous remplacez par la dénomination de vos liens
http://www.clair-de-lune.fr/
RépondreSupprimerBonjour,
J'ai un petit soucis sur overblog avec mon menu.
je l'ai créé en suivant vos instructions par contre il se pose un problème au niveau de sa position. En fait je l'ai ajouté dans un module texte libre que j'ai mis en dessous du module bannière, mais maintenant le menu est à la bonne place mais mon article est trés bas. Que dois-je faire pour que l'article arrive sous le menu?
Merci d'avance pour votre réponse et bravo pour ce site trés complet et trés facile à comprendre!!!
j'ai réglé mon problème de positionnement. Désolé du dérangement. A bientôt et merci encore pour ce site!!
RépondreSupprimerBonjour,
RépondreSupprimerJ'ai un souci sur mon menu http://cinejalles.over-blog.com/ que j'ai trouvé sur CSS Menu maker. Probléme contrairement à ce que montre le test, j'ai un décalage sur le menu lorsque je passe la souris (les textes se décalent). Avez-vous une solution pour moi ou un autre menu avec le même sous-menu à me conseiller.
Merci d'avance.
Cordialement