Menu déroulant pour blogueurs

Publié le par N.L. Taram

MENU DÉROULANT HORIZONTAL, LARGEUR 600px.
 
- le nombre de colonne est limité par la largeur de la page de publication (pour Overblog 600px)
- pour cet exemple : 4 colonnes d'une largeur de 150px (modifier  "width:150px;" à la ligne 24 de la source HTML)
- la couleur du fond : bleu marine (modifier "background-color:blue;" à la ligne 20 - couleur du texte "color:white;" à la ligne 25 - couleur du texte surligné "color:#FFD700;" à la ligne 30)
- pour personnaliser les menus : modifier les liens et les titres "<li><a>LITTÉRATURE</a>" à partir de la ligne 62.
- ci-dessous le texte HTML inspiré par l'excellent site >>
CSS Debutant : Menu horizontal déroulant réalisé uniquement à l'aide du langage CSS
Code HTML du "MENU DÉROULANT HORIZONTAL" ci-dessus :
 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<!-- Date de création: 15/10/2008 -->
<head>
<title>CSS Debutant : Menu horizontal déroulant réalisé uniquement à l'aide du langage CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/CSS">
#menu {
height:50px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:blue;
}
#menu li a {
display:block;
width:150px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
</style>
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--> <![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<![endif]-->
<meta name="description" content="Exemple de menu horizontal déroulant accessible créé grâce aux CSS" />
</head>
<div id="menu">
<ul>
   <li><a>LITTÉRATURE</a>
    <ul>
      <li><a href="http://www.tehoanotenunaa.com/voyage-au-bout-de-la-nuit.html">LOUIS F. CELINE</a></li>
       <li><a href="http://www.tehoanotenunaa.com/le-prophete.html">KHALIL GIBRAN</a></li>
       <li><a href="http://www.tehoanotenunaa.com/le-prince.html">N. MACHIAVEL</a></li>
       <li><a href="http://www.tehoanotenunaa.com/2014/08/les-chaines-de-l-esclavage.html">JEAN PAUL MARAT</a></li>
      </ul>
  </li>
  <li><a>MUSIQUE</a>
    <ul>
      <li><a href="http://www.tehoanotenunaa.com/pages/KEITH_JARRETT-3495386.html">KEITH JARRETT</a></li>
      <li><a href="http://www.tehoanotenunaa.com/2015/01/country-blues-2.html">COUNTRY BLUES</a></li>
      <li><a href="http://www.tehoanotenunaa.com/2014/11/g-f-haendel.html">GEORG F. HAENDEL</a></li>
       <li><a href="http://www.tehoanotenunaa.com/pages/JOHN_COLTRANE-7736861.html">JOHN COLTRANE</a></li>
     </ul>
  </li>
   <li><a>PEINTURE</a>
    <ul>
       <li><a href="http://www.tehoanotenunaa.com/article-vincent-van-gogh-47535482.html">V. VAN GOGH</a></li>
       <li><a href="http://www.tehoanotenunaa.com/article-paul-gauguin-51855023.html">PAUL GAUGUIN</a></li>
       <li><a href="http://www.tehoanotenunaa.com/2015/11/auguste-renoir.html">AUGUSTE RENOIR</a></li>
       <li><a href="http://www.tehoanotenunaa.com/2016/02/musee-d-orsay.html">MUSÉE D'ORSAY</a></li>
     </ul>
  </li>
   <li><a>CINÉMA</a>
    <ul>
       <li><a href="http://www.tehoanotenunaa.com/2014/08/a-l-est-d-eden.html">JAMES DEAN</a></li>
       <li><a href="http://www.tehoanotenunaa.com/2014/08/la-trilogie-marseillaise.html">MARCEL PAGNOL</a></li>
       <li><a href="http://www.tehoanotenunaa.com/2014/08/charlie-chaplin.html">CHARLIE CHAPLIN</a></li>
       <li><a href="http://www.tehoanotenunaa.com/2014/08/le-train-sifflera-trois-fois.html">WESTERNS</a></li>
</ul>
</div>
</html>
----------o----------
CE MENU DÉROULANT DOIT S'AFFICHER SUR 2 COLONNES, LARGEUR TOTALE 500px.
 
Il peut s'afficher dans une autre largeur (par exemple 250px), s'il y a, sur la même page, un autre menu déroulant à 250px. Celui-ci impose son format aux autres utilisations de ce programme HTML. 

Code HTML du "MENU DÉROULANT" ci-dessus (nouvelle fenêtre) :

<p style="text-align: center;"><meta  content="text/html; charset=UTF-8"  http-equiv="content-type"></p><title></title><style type="text/css">#list_deroul {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 12px; font-weight:bold;}
    #list_deroul ul ul {display: none; position: absolute; margin: 0px; padding: 0px;}
         #list_deroul li {list-style-type: none; position: relative; width: 500px; background-color: #FF9900; padding: 4px;  margin: 0px}
         #list_deroul li:hover  {background-color: #ffff00;}
         #list_deroul li a {text-decoration:none; color: black;}
         #list_deroul li:hover ul.sous_liste {display: block}</style><div id="list_deroul"><ul><li><p style="text-align: center;">- LISTE D&Eacute;ROULANTE -</p><ul class="sous_liste"><li><ul class="sous_liste"><li style="text-align: center;"><a>&curren; MUSIQUE &curren;</a></li><li><a target="_blank" href="http://www.jazzdisco.org/keith-jarrett/discography/">KEITH JARRETT - Discography</a>...............|.....<a target="_blank" href="http://www.keithjarrett.org/">KEITH JARRETT - Transcriptions</a></li><li><a target="_blank" href="http://www.wirz.de/">BLUESMEN - Discography</a>......................|......<a target="_blank" href="http://www.youtube-mp3.org/">CONVERTIR YOUTUBE en MP3</a></li><li><a target="_blank" href="http://www.clipconverter.cc/fr/">CONVERTIR YOUTUBE en autres</a>............|......<a target="_blank" href="http://www.frmusique.ru/">TEXTES DES CHANSONS</a></li><li style="text-align: center;"><a>&curren; SITES AMIS &curren;</a></li><li><a target="_blank" href="http://balades-lison.blogspot.com/">LES BALADES DE LISON</a>.........................|......<a target="_blank" href="https://philipsion.blogspot.com/">UN BLOG, DES ID&Eacute;ES</a></li><li><a target="_blank" href="https://jeanlescop.wordpress.com/">JEAN DE PONT-SCORF</a>..........................|......<a target="_blank" href="http://pousse-toidemonsoleil.eklablog.com/">POUSSE-TOI DE MON SOLEIL</a></li><li><a target="_blank" href="http://les-amis-des-ecoles-de-makemo.blog4ever.com/">AMIS &Eacute;COLES DE MAKEMO</a>.....................|......<a target="_blank" href="http://www.modelismeenpolynesie.com/introduction/">MOD&Eacute;LISME EN POLYN&Eacute;SIE</a></li><li><a target="_blank" href="http://sylvianeg.blogspot.com/">SYLVIE-ANNE EN POLYN&Eacute;SIE</a>..................|......<a target="_blank" href="http://citrunch.over-blog.com/">JEAN-FRAN&Ccedil;OIS MOIZAN</a></li><li style="text-align: center;"><a>&curren; SITES INSTRUCTUFS &curren;</a></li><li><a target="_blank" href="http://www.mystudios.com/artgallery/">GALERIE DE PEINTURE</a>............................|.....<a target="_blank" href="http://poesie.webnet.fr/lesgrandsclassiques/">PO&Eacute;SIE FRAN&Ccedil;AISE</a></li><li><a target="_blank" href="http://actu63.free.fr/">CALENDRIER PERP&Eacute;TUEL</a>.........................|......<a target="_blank" href="http://www.commentcamarche.net/forum/">COMMENT &Ccedil;A MARCHE</a></li><li><a target="_blank" href="http://atheisme.free.fr/">ATH&Eacute;ISME</a>............................................|......<a target="_blank" href="http://www.marat-jean-paul.org/">JEAN-PAUL MARAT</a></li><li><a target="_blank" href="http://www.lescobayesdelarepublique.org/">LES COBAYES DE LA R&Eacute;PUBLIQUE</a>..............|......<a target="_blank" href="http://groupevictorhugo.over-blog.com/">GROUPE VICTOR HUGO</a></li><li style="text-align: center;"><a>&curren; OCCITANIA (Occitanie) &curren;</a></li><li><a target="_blank" href="http://murviellesmontpellier.centerblog.net/">MONTPELLIER &amp; environs</a>.......................|......<a target="_blank" href="http://christian.esteve.pagesperso-orange.fr/">L&#39;OCCITANIE de A &agrave; Z</a></li><li><a target="_blank" href="http://www.jeantosti.com/">ROUSSILLON &amp; origine noms</a>...................|......<a target="_blank" href="http://www.renneslechateau.com/">RENNES-LE-CHATEAU</a></li><li><a target="_blank" href="http://www.rennes-le-chateau.org/">RENNES-LE-CHATEAU Dossier</a>..................|......<a target="_blank" href="http://sebastiencolonges.over-blog.com/">LOT Amateur de photos</a></li><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />&nbsp;</ul></li></ul></li></ul></div>

Petit menu déroulant, une colonne, avec sous-menu

Code HTML du menu avec sous-menu, ci-dessus :

<html>
    <head>
      <style type="text/css">
        #monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
        #monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
        #monmenu ul.niveau2 {left: 0px; top: 22px;}
#monmenu ul.niveau3 {left: 144px; top: -1px;}
        #monmenu li {list-style-type: none; position: relative; width: 144px; background-color: #E0E0E0; padding: 2px; margin: 0px}
        #monmenu li:hover, #monmenu li.sfhover {background-color: #FFFF70;}
        #monmenu li a {text-decoration:none;}
        #monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
        #monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
      </style>
      <!--[if lt IE 7]>
        <script type="text/javascript">
            // Fonction destinée à remplacer le "LI:hover" pour IE 6
            sfHover = function() {
                var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
                for (var i=0; i<sfEls.length; i++) {
                    sfEls[i].onmouseover = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                        this.className += " sfhover";
                    }
                    sfEls[i].onmouseout = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                    }
                }
            }
            if (window.attachEvent) window.attachEvent("onload", sfHover);
        </script>
        <style type="text/css">
            #monmenu li {width: 144px;}
        </style>
     <![endif]-->
     <meta name="keywords"
 content="CSS, cascading style sheets, mise en page, design, site, web, techniques, sites, webmaster, page">
     <meta name="description"
 content="Voici un exemple de code de menu hiérarchique déroulant réalisé à l'aide de CSS.">
     <title>Exemple de menu hiérarchique en CSS</title>
  </head>
  
    <div id="monmenu">
        <ul class="niveau1">
           <li> ------- LIEUX -------
               <ul class="niveau2">
                  <li class="plus">
                    <a target="_blank" href= "http://www.montpellier.fr/">
                       MONTPELLIER
                    </a>
                    <ul class="niveau3">
                      <li>
                        <a target="_blank" href= "http://www.montpellier-histoire.com/">
                            Histoire et photos
                         </a>
                        </li>
                      <li>
                        <a target="_blank" href= "http://murviellesmontpellier.centerblog.net/">
                            Montpellier et environs
                         </a>
                        </li>
                        <li>
                            <a target="_blank" href= "http://murviellesmontpellier.centerblog.net/rub-CELLENEUVE-;CELLA-NOVA.html">
                                Celleneuve
                            </a>
                        </li>
                    </ul>
                  </li>
                  
                 <li>
                    <a target="_blank" href= "http://www.quercy.net/">
                                 QUERCY
                    </a>
                 <ul class="niveau3">
                      <li>
                        <a target="_blank" href= "http://www.mairie-cahors.fr/index001.html">
                            Cahors
                         </a>
                        </li>
                      <li>
                        <a target="_blank" href= "http://www.prayssac.fr/decouvrir-la-ville/">
                            Prayssac
                         </a>
                        </li>
                        <li>
                            <a target="_blank" href= "http://sebastiencolonges.over-blog.com/">
                                Photos du Lot
                            </a>
                        </li>
                    </ul>
                  </li>
                 
                 <li>
                    <a target="_blank" href= "http://www.ville-papeete.pf/articles.php?id=230">
                                 TAHITI Papeete
                    </a>
                 <ul class="niveau3">
                      <li>
                        <a target="_blank" href= "http://www.pirae.pf/">
                            Pirae
                         </a>
                        </li>
                      <li>
                        <a target="_blank" href= "http://www.arue.pf/">
                            Arue
                         </a>
                        </li>
                               <li>
                         <a target="_blank" href= "http://www.mahina.pf/">
                                Mahina
                            </a>
                        </li>
                        <li>
                            <a target="_blank" href= "http://www.faaa.pf/">
                                Faa'a
                            </a>
                        </li>
                               <li>
                            <a target="_blank" href= "http://www.punaauia.pf/">
                                Punaauia
                            </a>
                        </li>
                    </ul>
                  </li>
                   <li>
                    <a target="_blank" href= "http://www.portail-rennes-le-chateau.com/">
                                 RENNES-LE-CHATEAU
                    </a>
                 <ul class="niveau3">
                      <li>
                        <a target="_blank" href= "http://www.rennes-le-chateau.org/index.php">
                            Le dossier Saunière
                         </a>
                        </li>
                     
                    </ul>
                  </li>                           
                  <li>
                      <a target="_blank" href= "http://baladesducrokoala.wifeo.com/">
                        ARDECHE
                 </a>
                 <ul class="niveau3">
                      <li>
                        <a target="_blank" href= "http://baladesducrokoala.wifeo.com/beaulieu-le-rocher-de-carabasse.php">
                            Rochers de Carabasse
                      </a>
                   </li>
                </ul>
              </li>
        </ul>
    </div>
  
</html>

Code HTML du "MENU DÉROULANT" ci dessus (même fenêtre) :

<form><select name="ListeUrl" size="1" onchange="ChangeUrl(this.form)" style="width: 286px; background-color:#faebd7; color:#0000ff; font-family: Verdana; font-size:14px;">
<option selected="selected" value="">MENU DÉROULANT MÊME FENÊTRE</option>
<option value="http://www.jazzdisco.org/keith-jarrett/discography/">Keith Jarrett-Discography</option>
<option value="http://www.wirz.de/">Bluesmen-Discography</option>
<option value="http://www.keithjarrett.org/">Keith Jarrett-Transcriptions</option>
<option value="http://www.youtube-mp3.org/">Convertir YouTube>MP3</option>
<option value="http://www.clipconverter.cc/fr/">Convertir YouTube>autres</option>
  </select></form>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
function ChangeUrl(formulaire)
        {
        if (formulaire.ListeUrl.selectedIndex != 0)
                {
                location.href = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
                }
        else 
                {
                alert('Veuillez choisir une destination.');
                }
        }
//]]>
</script>
 

Voici un nouveau "Menu déroulant" avec les liens ouvrants sur une nouvelle fenêtre.
Jusqu'à maintenant, il ne m'a posé aucun problème et je l'utilise dans la colonne de droite du blog "SITES CONSEILLÉS".
De plus, il s'adapte automatiquement à la largeur de la colonne (minimum selon le nombre de lettres du titre et des liens).
Liste déroulante Liste déroulante Liste déroulante Liste déroulante

Publié dans Divers

Vous aimerez aussi :

VIDÉO YOU TUBE SURGISSANTE
VIDÉO YOU TUBE SURGISSANTE
Menu déroulant horizontal
Menu déroulant horizontal
CLIP VIDÉO
CLIP VIDÉO
Comment s’abonner ?
Comment s’abonner ?

Commenter cet article