bonjour à tous,
Voici mon pb :
j'ai un menu déroulant horizontal qui contient trop de sous-menu (les derniers sont invisibles car cachés par le contenu du site) et je voudrais le transformer en menu déroulant vertical (plus de place pour afficher tous les sous-menus) avec les mêmes propriétés que l'actuel (s'affiche au survol et disparaît ensuite).
J'ai tenté de changer le JS, mais ça ne suffit pas apparement...
voici le code html avec le JS :
et le code css si besoin :
Merci !!!
Voici mon pb :
j'ai un menu déroulant horizontal qui contient trop de sous-menu (les derniers sont invisibles car cachés par le contenu du site) et je voudrais le transformer en menu déroulant vertical (plus de place pour afficher tous les sous-menus) avec les mêmes propriétés que l'actuel (s'affiche au survol et disparaît ensuite).
J'ai tenté de changer le JS, mais ça ne suffit pas apparement...
voici le code html avec le JS :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site officiel de la Mairie de Saint-André de l'Eure</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;
//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = 7;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}
//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}
function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->
</script>
</head>
<body onmousemove="closesubnav(event);">
<div class="skipLinks">skip to: <a href="#content">contenu</a> | <a href="#pageNav">liens sur cette page</a> | <a href="#globalNav">navigation du site</a> | <a href="#siteInfo">information sur le site</a> </div>
<div id="masthead">
<img src="img/site_name1.gif" height="53" width="872">
<div id="utility">
</div>
<div id="globalNav">
<img alt="" src="img/gblnav_left1.gif" height="32" width="4" id="gnl"> <img alt="" src="img/glbnav_right1.gif" height="32" width="4" id="gnr">
<div id="globalLink">
<a href="index.php" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);"> ACCUEIL </a>
<a href="services-municipaux.php" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);"> LA MAIRIE </a>
<a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);"> VIE QUOTIDIENNE </a>
<a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);"> VIE MUNICIPALE </a>
</div>
<!--end globalLinks-->
</div>
<!-- end globalNav -->
<div id="subglobal1" class="subglobalNav">
<a href="services-municipaux.php">Accueil</a> | <a href="urbanisme.php">Formalités</a> | <a href="#">Scolarité</a> | <a href="#">Urbanisme</a> | <a href="#">Locations</a> | <a href="#">C.C.A.S.</a> | <a href="#">Médiathèque</a> | <a href="#">Services techniques</a> | <a href="#">Permanences</a> | <a href="#">Archives</a> | <a href="#">Cimetière</a> |
</div>
<div id="subglobal2" class="subglobalNav">
<a href="agenda.php">Agenda des événements</a> | <a href="#">Services en ville</a>
</div>
<div id="subglobal3" class="subglobalNav">
<a href="#">Histoire</a> | <a href="#">Détente et loisirs</a> | <a href="#">Economie</a> | <a href="#">Situation géographique</a> | <a href="#">Cartes</a> | <a href="#">Les projets</a> | <a href="#">Le canton de Saint-André</a>
</div>
<div id="subglobal4" class="subglobalNav">
<a href="cm.php">Le conseil municipal</a> | <a href="equipe-municipale.php">L'équipe municipale</a> |
</div>
<div id="subglobal5" class="subglobalNav">
<a href="index.php">Actualités</a> | <a href="telechargements.php">Téléchargements</a>
</div>
<div id="subglobal6" class="subglobalNav">
<a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6 link</a> | <a href="#">subglobal6
link</a> | <a href="#">subglobal6 link</a>
</div>
<div id="subglobal7" class="subglobalNav">
<a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7 link</a> | <a href="#">subglobal7
link</a> | <a href="#">subglobal7 link</a>
</div>
<div id="subglobal8" class="subglobalNav">
<a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
link</a> | <a href="#">subglobal8 link</a>
</div>
</div>
<!-- end masthead -->
<div id="pagecell1">
<!--pagecell1-->
<img alt="" src="img/tl_curve_white1.gif" height="6" width="6" id="tl"> <img alt="" src="img/tr_curve_white1.gif" height="6" width="6" id="tr">
<div id="breadCrumb">
Accueil / <a href="index.php">Actualités</a>
</div>
<div id="pageNav">
<div id="advert">
<img src="photos/anim.gif" alt="" width="107" height="66" /> Horaires de la Mairie :<br>
Lundi : 13h30 - 18h00<br>
Mardi au vendredi : 9h00 - 18h00<br>
Samedi : 9h00 - 12h00<br>
<img src="" alt="" width="107" height="66" />Le marché de Saint-André a lieu tous les vendredis matins jusqu'à 12h00, sur la place du centre-ville.
</div>
</div>
<div id="content">
<div class="feature">
<img src="" alt="" width="1" height="1">
<h3>BIENVENUE !</h3>
<p>
Voici le projet du nouveau site de la mairie de Saint-André de l'Eure. Comme vous pouvez le constater, tous les liens ne sont pas en ligne. Au fur et à mesure de vos visites sur le site, vous le verrez évoluer, des nouveaux liens s'afficheront avec de nouvelles rubriques pour mieux vous informer. Merci de votre patience et de votre compréhension.</p>
</div>
<div class="story">
<h3>Saint-André pour le Téléthon</h3>
<p>
Le 8 décembre prochain, la municipalité, les associations andrésiennes, les bénévoles et les écoles se mobilisent pour le Téléthon.Une journée d'actions sera proposée aux andrésiens. Retrouvez le programme en <a href="agenda.php#telethon1">cliquant ici</a>. Chèque à l'ordre de l'AFM. <strong>Aucun démarchage à domicile !</strong> </p>
</div>
</div>
<!--end content -->
<div id="siteInfo">
<img src="img/LogoMairie.gif" width="55" height="55"> ©2007 - Mairie de Saint-André de l'Eure</div>
</div>
<!--end pagecell1-->
<br>
<script type="text/javascript">
<!--
var menuitem1 = new menu(7,1,"hidden");
var menuitem2 = new menu(7,2,"hidden");
var menuitem3 = new menu(7,3,"hidden");
var menuitem4 = new menu(7,4,"hidden");
var menuitem5 = new menu(7,5,"hidden");
var menuitem6 = new menu(7,6,"hidden");
var menuitem7 = new menu(7,7,"hidden");
// -->
</script>
</body>
</html>
et le code css si besoin :
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #F3C36B url("img/bg_grad1.jpg") fixed;/******* moyen *******/
}
/******* hyperlink and anchor tag styles *******/
a:link, a:visited{
color: #506602;/******* foncé *******/
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
/************** header tag styles **************/
h1{
font: bold 120% Arial,sans-serif;
color: #506602;/******* foncé *******/
margin: 0px;
padding: 0px;
}
h2{
font: bold 114% Arial,sans-serif;
color: #87AC03;/******* moyen *******/
margin: 0px;
padding: 0px;
}
h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}
h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}
h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}
/*************** list tag styles ***************/
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
/********* form and related tag styles *********/
form {
margin: 0;
padding: 0;
}
label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}
input{
font-family: Arial,sans-serif;
}
/***********************************************/
/* Layout Divs */
/***********************************************/
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
background-image: url("img/fond3.gif");
}
#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}
#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}
#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;
background-image:url("img/site_name1.gif") no-repeat;
}
#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #EDF8C7;
border-RIGHT: 1px solid #cccccc;
border-top: 1px solid #cccccc;
font: small Verdana,sans-serif;
}
#content{
padding: 0px 0px 0px 10px;
margin:0px 0px 0px 178px;
border-left: 1px solid #ccd2d2;
}
/***********************************************/
/* Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}
/************** utility styles *****************/
#utility{
font: 75% Verdana,sans-serif;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}
#utility a{
color: #ffffff;
}
#utility a:hover{
text-decoration: underline;
}
/************** pageName styles ****************/
#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #ccd2d2;
}
#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;
}
#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
}
/************* globalNav styles ****************/
#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url("img/glbnav_background1.gif");
}
#globalNav img{
margin-bottom: -4px;
}
#gnl {
position: absolute;
top: 0px;
left:0px;
}
#gnr {
position: absolute;
top: 0px;
right:0px;
}
#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}
a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}
a.glink:hover{
background-image: url("img/glblnav_selected1.gif");
text-decoration: none;
}
.skipLinks {display: none;}
/************ subglobalNav styles **************/
.subglobalNav{
position: absolute;
top: 87px;
left: 0px;
width: 100%;
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
background-color:#EEA930;
border: 1px solid #F7D598;
}
.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
font-weight:bold;
color: #ffffff;
}
.subglobalNav a:hover{
color: #D34201;
}
/*************** search styles *****************/
#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}
#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}
#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;
}
#search a:hover{
margin: 0px;
}
/************* breadCrumb styles ***************/
#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
}
#breadCrumb a{
color: #AAAAAA;
}
#breadCrumb a:hover{
color: #506602;
text-decoration: underline;
}
/************** feature styles *****************/
.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
}
html>body .feature {height: auto;}
.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}
.feature img{
float: left;
padding: 0px 10px 0px 0px;
}
/*************** story styles ******************/
.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
}
.story h3{
font: bold 125% Arial,sans-serif;
color: #000000;
}
.story p {
padding: 0px 0px 10px 0px;
}
.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #506602;
display:block;
padding-bottom: 5px;
}
.story a.capsule:hover{
text-decoration: underline;
}
td.storyLeft{
padding-right: 12px;
}
/************** siteInfo styles ****************/
#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
background-image:url("img/img_footer1.gif");
}
#siteInfo img{
padding: 0px 4px 4px 4px;
vertical-align: middle;
}
/************ sectionLinks styles **************/
#sectionLinks{
margin: 0px;
padding: 0px;
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url("img/bg_nav1.gif");
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #FFFFFF;
}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}
#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url("img/bg_nav1.gif");
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #FFFFFF;
}
#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #EDF8C7;
background-image: none;
font-weight: bold;
text-decoration: none;
color:#000000;
}
/************* relatedLinks styles **************/
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}
.relatedLinks h3{
padding: 10px 0px 2px 0px;
color:#506602;
}
.relatedLinks a{
display: block;
}
/**************** advert styles *****************/
#advert{
padding: 10px;
}
#advert img{
display: block;
}
/********************* end **********************/
Merci !!!
