Menu déroulant pour blogueurs
(code recherche : DIVBLO)
<!-- 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;
}
<!--[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>
<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>
- LISTE DÉROULANTE -
-
- ¤ MUSIQUE ¤
- KEITH JARRETT - Discography................|......KEITH JARRETT - Transcriptions
- BLUESMEN - Discography......................|......CONVERTIR YOUTUBE en MP3
- CONVERTIR YOUTUBE en autres..............|......TEXTES DES CHANSONS
- ¤ SITES AMIS ¤
- LES BALADES DE LISON........................|......UN BLOG, DES IDÉES
- JEAN DE PONT-SCORF..........................|......POUSSE-TOI DE MON SOLEIL
- AMIS ÉCOLES DE MAKEMO......................|......MODÉLISME EN POLYNÉSIE
- SYLVIE-ANNE EN POLYNÉSIE..................|......JEAN-FRANÇOIS MOIZAN
- ¤ SITES INSTRUCTUFS ¤
- GALERIE DE PEINTURE............................|.....POÉSIE FRANÇAISE
- CALENDRIER PERPÉTUEL.........................|......COMMENT ÇA MARCHE
- ATHÉISME.............................................|......JEAN-PAUL MARAT
- LES COBAYES DE LA RÉPUBLIQUE.............|......GROUPE VICTOR HUGO
- ¤ OCCITANIA (Occitanie) ¤
- MONTPELLIER & environs.......................|......L'OCCITANIE de A à Z
- ROUSSILLON & origine noms...................|......RENNES-LE-CHATEAU
- RENNES-LE-CHATEAU Dossier..................|......LOT Amateur de photos
-
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ÉROULANTE -</p><ul class="sous_liste"><li><ul class="sous_liste"><li style="text-align: center;"><a>¤ MUSIQUE ¤</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>¤ SITES AMIS ¤</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É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 ÉCOLES DE MAKEMO</a>.....................|......<a target="_blank" href="http://www.modelismeenpolynesie.com/introduction/">MODÉLISME EN POLYNÉSIE</a></li><li><a target="_blank" href="http://sylvianeg.blogspot.com/">SYLVIE-ANNE EN POLYNÉSIE</a>..................|......<a target="_blank" href="http://citrunch.over-blog.com/">JEAN-FRANÇOIS MOIZAN</a></li><li style="text-align: center;"><a>¤ SITES INSTRUCTUFS ¤</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ÉSIE FRANÇAISE</a></li><li><a target="_blank" href="http://actu63.free.fr/">CALENDRIER PERPÉTUEL</a>.........................|......<a target="_blank" href="http://www.commentcamarche.net/forum/">COMMENT ÇA MARCHE</a></li><li><a target="_blank" href="http://atheisme.free.fr/">ATHÉ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ÉPUBLIQUE</a>..............|......<a target="_blank" href="http://groupevictorhugo.over-blog.com/">GROUPE VICTOR HUGO</a></li><li style="text-align: center;"><a>¤ OCCITANIA (Occitanie) ¤</a></li><li><a target="_blank" href="http://murviellesmontpellier.centerblog.net/">MONTPELLIER & environs</a>.......................|......<a target="_blank" href="http://christian.esteve.pagesperso-orange.fr/">L'OCCITANIE de A à Z</a></li><li><a target="_blank" href="http://www.jeantosti.com/">ROUSSILLON & 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 /> </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>
- MUSIQUES-PEINTURE-LITTÉRATURE
- WEB-CODES-PPS
- BLOGS AMIS
- LIBRE PENSÉE