ABC: BLOG & BLOGGER: 4 Menus déroulants simples

Trois menus très simples, très faciles à modifier.

=> ces menus viennent de loin... un blogueur tahitien

1-PETIT MENU DEROULANT SIMPLE
Exemple de menu hiérarchique en CSS

------- MENU -------
- MENU1
- MENU 2
- MENU 3
- MENU 4
  - Sous Menu 4.1
- MENU 5
  - Sous Menu

CODE

EXPLICATIONS
-Les URL sont à indiquer
-vous pouvez ajouter/supprimer des lignes de menu
-Couleurs modifiables
#E0E0E0 => gris fond
#FFFF70 => jaune fond
#B0B0B0 => gris foncé bordure

2- MENU DEROULANT CLASSIQUE & SIMPLE

CODE

<br />
<div id="menu">
<ul>
<li><a href="#">MENU 1</a><ul>
<li><a href="http://adresse url.html">Sous Menu 1.1</a></li>
<li><a href="http://adresse url.html">Sous Menu 1.2</a></li>
<li><a href="http://adresse url.html">Sous Menu 1.3</a></li>
<li><a href="http://adresse url.html">Sous Menu 1.4</a></li>
</ul>
</li>
<li><a href="#">MENU 2</a><ul>
<li><a href="http://adresse url.html">Sous Menu 2.1</a></li>
<li><a href="http://adresse url.html">Sous Menu 2.2</a></li>
<li><a href="http://adresse url.html">Sous Menu 2.3</a></li>
<li><a href="http://adresse url.html">Sous Menu 2.4</a></li>
</ul>
</li>
<li><a href=#">MENU 3</a><ul>
<li><a href="http://adresse url.html">Sous Menu 3.1</a></li>
<li><a href="http://adresse url.html">Sous Mneu 3.2</a></li>
<li><a href="http://adresse url.html">Sous Menu 3.3</a></li>
<li><a href="http://adresse url.html">Sous Menu 3.4</a></li>
</ul>
</li>
<li><a href="#">MENU 4</a><ul>
<li><a href="http://adresse url.html">Sous Menu 4.1</a></li>
<li><a href="http://adresse url.html">Sous Menu 4.2</a></li>
<li><a href="http://adresse url.html">Sous Menu 4.3</a></li>
<li><a href="http://adresse url.html">Sous Menu 4.4</a></li>
</ul>
</li>
</ul>
</div

EXPLICATIONS

MENU DÉROULANT HORIZONTAL, LARGEUR 600px.
- le nombre de colonne est limité par la largeur de la page de publication (ici : 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 : gris (modifier "background-color:gray;" à 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>MENU</a>" à partir de la ligne 62.
-source http://www.tehoanotenunaa.com/2016/10/menu-deroulant.html
- ci-dessous le texte HTML inspiré par
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php

3- MENU DEROULANT VERTICAL

MENU 1

MENU 2

Liste déroulante

MENU 3

Liste déroulante

MENU 4

Liste déroulante

MENU 5

CODE

<title>Liste déroulante</title><style type="text/css">ul ul {display: none;}
li:hover ul.sous_liste {display:block;}</style><br />
<ul>
<li style="background-color: #f7f2b2;"><b>MENU 1</b><ul class="sous_liste">
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 1.1;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 1.2;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 1.3;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 1.4;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 1.5;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 1.6;</a></span></li>
</ul>
</li>
</ul>
<br />
<ul>
<li style="background-color: #f7f2b2;"><b>MENU 2</b><ul class="sous_liste">
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 2.1;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 2.2;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 2.3;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 2.4;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 2.5;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 2.6;</a></span></li>
</ul>
</li>
</ul>
<head>

<title>Liste déroulante</title><style type="text/css">ul ul {display: none;}
li:hover ul.sous_liste {display:block;}</style></head><br />
<ul>
<li style="background-color: #f7f2b2;"><b>MENU 3</b><ul class="sous_liste">
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 3.1;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 2.2;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 3.3;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 3.4;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 3.5;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 3.6;</a></span></li>
</ul>
</li>
</ul>
<head>

<title>Liste déroulante</title><style type="text/css">ul ul {display: none;}
li:hover ul.sous_liste {display:block;}</style></head><br />
<ul>
<li style="background-color: #f7f2b2;"><b>MENU 4</b><ul class="sous_liste">
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 4.1;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 4.2;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 4.3;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 4.4;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 4.5;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 4.6;</a></span></li>
</ul>
</li>
</ul>
<head>

<title>Liste déroulante</title><style type="text/css">ul ul {display: none;}
li:hover ul.sous_liste {display:block;}</style></head><br />
<ul>
<li style="background-color: #f7f2b2;"><b>MENU 5</b><ul class="sous_liste">
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 5.1;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 5.2;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 5.3;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 5.4;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 5.5;</a></span></li>
<li><span style="color: rgb(255 , 0 , 0);"><a href="http://blogavecblogger.blogspot.com/" target="_blank">Sous menu 5.6;</a></span></li>
</ul>
</li>
</ul>

EXPLICATIONS
Peu de modifications :
-Les URL à replacer
-arrière plan ici, en jaune, avec#f7f2b2
-il est facile d'ajouter des menus et des sous menus

4-MENU DEROULANT CACHE

CODE

<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://blogavecblogger.blogspot.com/">TITRE DU LIEN</option>
<option value="http://blogavecblogger.blogspot.com">TITRE DU LIEN</option>
<option value="http://blogavecblogger.blogspot.com">TITRE DU LIEN</option>
<option value="http://blogavecblogger.blogspot.com">TITRE DU LIEN</option>
<option value="http://blogavecblogger.blogspot.com">TITRE DU LIEN</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>

EXPLICATIONS
Peu de modifications :
-Les URL à replacer
-arrière plan ici, en jaune, avec#faebd7
-il est facile d'ajouter d'autres lignes de menus
-si nécessaire changer la police, sa taille et couleur via : color:#0000ff; font-family: Verdana; font-size:14px;