| Accueil | table JavaScript | index JavaScript | précédent | suivant |

Exemple - DropDownMenu1 exemple d'utilisation

Voici la page appelant le menu et sa feuille de style.
Les bandeaux de titres doivent être entourés d'une bordure solide de 1 pixel de largeur.

Le script Jscript28.html appelle un menu horizontal, le script identique JScript29 appelle un menu vertical

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple08</title>
<meta name="description" content="Phrase décrivant clairement cette page" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Jstyle04a.css" />
</head>

<body>
<!-- Jscript28 -->
<div id="cadre1" >

<h2>Menu déroulant (DropDownMenu1)</h2>

<script type="text/javascript" src="France1.js" >
// importation des tables
</script>

<script type="text/javascript" src="DropDownMenu1.js">
// importation du script DropDownMenu1
</script>

<script type="text/javascript">
// définition du menu principal
main_menu(menu, "H", 80, 40, 100, 20);
// définition des sous-menus
drop_menu( "villes", régions, 150);
drop_menu("Bretagne", Bretagne, 150);
drop_menu("Finistère", Finistère, 150);
drop_menu("Basse-Normandie", Basse_Normandie, 150);
drop_menu("Haute-Normandie", Haute_Normandie, 150);
drop_menu("Pays de la Loire", Pays_de_la_Loire, 150);
drop_menu("Limousin", Limousin, 150);
drop_menu("Calvados", Calvados, 150);
drop_menu( "fleuves", fleuves, 150);
drop_menu( "montagnes", montagnes, 150);
drop_menu( "Alpes", Alpes, 150);
drop_menu( "Pyrénées", Pyrénées, 150);
// construction du menu
create_menu();
</script>

</div>

</body>
</html>



/* feuille de style Jstyle04a */

/* titre inactif du bandeau */
.menu_b_off
{
background-color : rgb(230,210,200);
color : rgb(80,0,0);
padding-left : 5px;
text-align : left;
font-weight : bold;
visibility : hidden;
border-style : solid;
border-width : 1px;
border-color : rgb(255,255,255);
}

/* titre actif du bandeau */
.menu_b_on
{
background-color : rgb(80,0,0);
color : rgb(255,255,255);
padding-left : 5px;
text-align : left;
font-weight : bold;
visibility : hidden;
border-style : solid;
border-width : 1px;
border-color : rgb(255,255,255);
}

/* styles des liens */
.menu_b_off a:link {color : rgb(80,0,0); text-decoration : none; }
.menu_b_off a:visited {color : rgb(255,255,255); text-decoration : none;}
.menu_b_off a:hover {color : rgb(255,255,255); text-decoration : underline}
.menu_b_off a:active {color : rgb(255,255,255); text-decoration : none;}

.menu_b_on a:link {color : rgb(255,255,255); text-decoration : none; }
.menu_b_on a:visited {color : rgb(255,255,255); text-decoration : none;}
.menu_b_on a:hover {color : rgb(255,255,255); text-decoration : underline}
.menu_b_on a:active {color : rgb(255,255,255); text-decoration : none;}

h2
{
font-size : 12pt;
color : rgb(100,0,0);
text-align : center;
}

#cadre1
{
position : absolute;
top : 10px;
left : 150px;
width : 700px;
height : 350px;
background-color : rgb(255,245,230);
font-family : Verdana;
font-size : 10pt;
color : rgb(150,20,20);
}


Afficher cette page (menu horizontal)


Afficher cette page (menu vertical)



suivant