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

publié dans : Tous Blogs - Liens, listes et menus

Un menu horizontal en CSS et HTML

13styles proposent des menus à réaliser en HTML et CSS, tel que celui-ci



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
Pour mon exemple, j'ai choisi le menu dolphin.

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
Troisième étape ;

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 personnisant 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


commentaires (9)    ajouter un commentaire
Retour à l'accueil

Commentaires

Super article (ou plutot tuto) Annak, merci. :)
commentaire n° : 1 posté par : Adri (site web) le: 17/07/2008 22:42:38
J'aime l'article et je compte le prendre en exemple pour mon blog anglophone.

Tu as écrit :  "Si votre blog est sur OverBlog, vous effacez ce qui est en rouge" une question m'es venue. Pourquoi tu héberge encore ton blog sur over-blog, pourquoi tu ne prends pas ton propre nom de domaine?
FICELLESDANNAK.COM is available  :)
commentaire n° : 2 posté par : Pablo (site web) le: 18/07/2008 00:15:05
Par pure paresse :)
Comme le point de départ du blog était d'expliquer le fonctionnement d'OB aux blogueurs d'OB, j'y suis restée.
réponse de : Anna K (site web) le: 18/07/2008 10:36:32
Merci le menu est très beau
commentaire n° : 3 posté par : mathieu (site web) le: 18/07/2008 21:22:33
J'apprend un peu a chaque fois que je viens te voir merci .Passe un bon Mardi Bisous ............
Merci de voter pour mon blog ces simpa Biz
commentaire n° : 4 posté par : Rose (site web) le: 22/07/2008 00:21:01
Très sympa, pratique avec le nombre grandissant d'utilisateur bloquant les scripts :)
commentaire n° : 5 posté par : Daedalis (site web) le: 24/07/2008 21:14:38
Merci Anna K.
Je pense que je vais encore utiliser quelques ficelles.
même si je commence à avoir les miennes, je suis encore et encore obligé de revenir.
Merci pour cette "vulgarisation".
Cordialement
commentaire n° : 6 posté par : Essentiel (site web) le: 26/07/2008 11:58:43

Je passe voir


réponse de : Anna K (site web) le: 26/07/2008 17:29:26
Et bien moi je galère...un peu la honte...je bloque à l'étape trois...où que je mets tout le blabla htlm et css si j'aimerai qu'il apparaisse en-dessous de la bannière ?? Merci par avance...
commentaire n° : 7 posté par : Katleen LA (site web) le: 04/09/2008 11:24:32
Bonjour Katleen :)
Je viens de tester pour de faux chez toi.
Dans l'entête, juste après l'image, tu colles en HTML
 <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>

<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>
avec tes propres liens et c'est tout.
réponse de : Anna K (site web) le: 07/09/2008 07:26:37
Merci Anna !
commentaire n° : 8 posté par : Katleen LA (site web) le: 18/09/2008 11:06:09
Salut Anna K ! comme toujours ton blog reste pour moi une réference, aujourd'hui j'ai essayé le menu "gloss" qui est très chouette mais si tu remarque bien les bords à gauche et à droite sont mangé chez moi, tu crois que tu pourrais regarder ? merci ! ;)
commentaire n° : 9 posté par : Plexi (site web) le: 25/09/2008 14:49:26

Je passe voir


réponse de : Anna K (site web) le: 28/09/2008 08:40:57
ajouter un commentaire

Publicité

 

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

 

Déco Halloween

 

Déco Automne

 

Dernières Astuces

liste complète

 

Commentaires

 

Publicité

 

Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus