Accueil > Forum > > > > PB menu dynamique - affichage pas terrible
 PB menu dynamique - affichage pas terrible
mercredi 19 novembre 2008 à 11:33:50 |
PB menu dynamique - affichage pas terrible
chabgyver
|
Bonjour, J'ai placé un menu sur un site que je suis en train de faire, il s'agit d'un menu horizontal dynamique. Voici le code html de ce dernier : <div id="banniere_menu1">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a class="item-primary" href="{PATH}{LIEN_ITEM1}">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');" class="item-primary"><a href="">Mairie</a></dt>
<dd id="smenu1">
<ul>
<li><a href="{PATH}{LIEN_ITEM23}">Présentation</a></li>
<li><a href="{PATH}{LIEN_ITEM13}">Municipalité</a></li>
<li><a href="{PATH}{LIEN_ITEM14}">Infos Pratiques</a></li>
<li><a href="{PATH}{LIEN_ITEM15}">Comptes rendus</a></li>
<li><a href="{PATH}{LIEN_ITEM16}">Bulletin Municipal</a></li>
<li><a href="{PATH}{LIEN_ITEM17}">Actualités</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');"><a class="item-primary" href="">Education et culture</a></dt>
<dd id="smenu2">
<ul>
<li><a href="{PATH}{LIEN_ITEM3}">Scolarité</a></li>
<li><a href="{PATH}{LIEN_ITEM19}">Garderie périscolaire</a></li>
<li><a href="{PATH}{LIEN_ITEM20}">Cantine</a></li>
<li><a href="{PATH}{LIEN_ITEM21}">Bibliothèque</a></li>
<li><a href="{PATH}{LIEN_ITEM22}">Centre aéré</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
</div>
</div>
<div id="banniere_menu2">
<img src="{PATH}templates/{THEME_GRAPHIQUE}/images/menu.png" width="990" height="25" alt="" />
</div>
et le CSS :
dl, dt {
margin: 0;
padding: 0;
list-style-type: none;
}
dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
background-color:#235bbc;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
padding:0px 0px 0px 15px; /*espacement entre les éléments du menu */
margin: 0px 5px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:10px;
text-decoration:none;
font-weight: bold;
background-repeat: no-repeat;
background-position: top;
background-image: url(images-menu/item-primary-bg.gif);
background-repeat: repeat-x;
}
#menu dl {
float: left;
width: 12em;
margin: 0px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
}
#menu dd {
border: 0px solid gray;
}
#menu li {
text-align: center;
}
#menu li a, #menu dt a {
color: #FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background-color: #999999;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
#item-primary a:hover{
color: #8bb5ee;
background: url();
background-repeat: no-repeat;
background-position: center;
}
Le problème qui survient est que le menu est déployé sans même que je clique sur un des boutons, ce qui n'est pas très esthétique, de plus, il doit y avoir un problème de z-index mais que je ne comprend pas car le menu passe sous les autres éléments de décors du site et ce, malgré un z-index100.
Enfin, bon, j'aimerai comprendre ce qui ne vas pas avec le code de mon menu.
Merci d'avance pour votre aide.
|
|
mercredi 19 novembre 2008 à 11:47:51 |
Re : PB menu dynamique - affichage pas terrible
chabgyver
|
Finalement, j'ai trouvé pour le second problème, j'ai mis un z-index négatif dans une autre partie du css, c'est un peu compliqué à expliqué mais c'est réglé.
J'ai oublié de mettre le js correspondant au menu :
<!-- Menu de navigation
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
// Fonction Javascript qui affiche une MsgBox de confirmation
function confirmLink(theLink, confirmMsg)
{
var is_confirmed = confirm(confirmMsg);
if (is_confirmed) {
theLink.href += '&confirme=1';
}
return is_confirmed;
}
function confirmLink2(form, confirmMsg, lienForm, aucunMsg){
len = document.forms[form].elements.length;
var i=0;
var j=0;
document.forms[form].action = lienForm;
while(i!=len)
{
if (document.forms[form].elements[i].type=='checkbox')
if(document.forms[form].elements[i].name!="")
if(document.forms[form].elements[i].checked == true){
confirmMsg += document.forms[form].elements[i+1].value+", ";
j++;
}
i++;
}
confirmMsg += " ?";
if (j!=0){
var is_confirmed = confirm(confirmMsg);
if (is_confirmed) {
document.forms[form].submit();
}
} else {
alert(aucunMsg);
return false;
}
}
function confirmLink3(form, confirmMsg, lienForm){
document.forms[form].action = lienForm;
var is_confirmed = confirm(confirmMsg);
if (is_confirmed) {
document.forms[form].submit();
}else
return false;
}
function popup_centrer(page,largeur,hauteur,options, parametres) {
var top=(screen.height-hauteur)/2;
var left=(screen.width-largeur)/2;
window.open(page+parametres,"","top="+top+",left="+left+",width="+largeur+",height="+hauteur+",directories=0,menubar=1,menu=1,status=1,location=1,scrollbars=0,resizable=0,fullscreen=0,"+options);
}
// pour gestion menu sous ie6
function hover(obj)
{
ul = obj.getElementsByTagName('ul');
if(ul.length > 0)
{
style = ul[0].style;
if(style.display == '' || style.display == 'none')
{
style.display = 'block';
}
else
{
style.display = 'none';
}
}
}
function setHover()
{
if(/MSIE/.test(navigator.userAgent))
{
li = document.getElementById('menu').getElementsByTagName('li');
for(var i=0; i < li.length; i++)
{
li[i].onmouseover = function(){hover(this)};
li[i].onmouseout = function(){hover(this)};
}
}
}
// FIN pour gestion menu sous ie6
|
|
mercredi 19 novembre 2008 à 18:02:36 |
Re : PB menu dynamique - affichage pas terrible
PetoleTeam
|
Bonjour,
pas top pourquoi ne pas remonter les autres plutôt ?
Nota :
mets ta réponse en Réponse acceptée ! si tel est le cas ...
;O)
|
|
jeudi 20 novembre 2008 à 09:13:48 |
Re : PB menu dynamique - affichage pas terrible
chabgyver
|
C'est ce que j'ai fais, j'ai essayé de remonter les autres mais aparemment, ça réagit assez mal sous IE (encore lui), alors pour remédier à celà, j'ai crée 2 CSS, un pour IE et un autre pour FF, et un script qui détecte quel navigateur est utilisé par l'internaute et de basculer automatiquement sur l'un des 2 CSS, donc le problème est résolu.
|
|
jeudi 20 novembre 2008 à 10:44:06 |
Re : PB menu dynamique - affichage pas terrible
chabgyver
|
Finalement, j'ai quand même un problème avec mon menu, il reste affiché, même quand on met le curseur de la souris ailleurs. Le code complet de mon menu est téléchargeable ici |
|
vendredi 21 novembre 2008 à 17:48:14 |
Re : PB menu dynamique - affichage pas terrible
chabgyver
|
Ayant un grand besoin d'aide, voilà ce que j'ai fait jusqu'à présent :
http://www.le-pechereau-mairie.fr/maison.php
login : mairie
mdp : devpechereau
|
|
samedi 22 novembre 2008 à 01:11:55 |
Re : PB menu dynamique - affichage pas terrible
PetoleTeam
|
Bonjour,
tu écris
window.onload=montre;
mais la fonction montre n'est pas définie dans ton fichier
;O)
|
|
dimanche 23 novembre 2008 à 18:27:49 |
Re : PB menu dynamique - affichage pas terrible
|
lundi 24 novembre 2008 à 11:53:25 |
Re : PB menu dynamique - affichage pas terrible
PetoleTeam
|
Bonjour,
...voici la fonction que j'ai trouvé en tappant window.onload=montre dans la barre de recherche...
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
;O)
|
|
lundi 24 novembre 2008 à 11:57:00 |
Re : PB menu dynamique - affichage pas terrible
chabgyver
|
Réponse acceptée !
Sinon, j'ai fais cette manip et elle fonctionne : <dt onmouseover="javascript:montre('smenu3');">Divers</dt> <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');"> <ul onmouseout="javascript:montre();"> <li><a class="item-primary" href="{PATH}{LIEN_ITEM4}">Economie</a></li> <li><a class="item-primary" href="{PATH}{LIEN_ITEM5}">Associations</a></li> <li><a class="item-primary" href="{PATH}{LIEN_ITEM6}">Tourisme</a></li> <li><a class="item-primary" href="{PATH}{LIEN_ITEM7}">Infos pratiques</a></li> <li><a class="item-primary" href="{PATH}{LIEN_ITEM8}">Contact</a></li> <li><a class="item-primary" href="{PATH}{LIEN_ITEM9}">Liens amis</a></li> <li><a class="item-primary" href="{PATH}{LIEN_ITEM10}">Plan du site</a></li> <li><a class="item-primary" href="{PATH}{LIEN_ITEM11}">Situation géographique</a></li> <li><a class="item-primary" href="{PATH}{LIEN_ITEM12}">Agenda</a></li> <li><a class="item-primary" href="{PATH}{LIEN_ITEM25}">Urbanisme</a></li> </ul> </dd> </dl> Ca a suffit à régler le problème. Merci de t'être penché sur le problème. 
|
|
Cette discussion est classée dans : menu, background, color, 0px, repeat
 Répondre à ce message
 Sujets en rapport avec ce message
[css]pas assez d'espace entre corps et banniere [ par pygo ]
salut a tous,j'ai un petit soucis,je suis en train de construire une nouvelle version de mon site mais je n'ai pas assez d'espace entre le corps et la
Prb de décalage de DIV sous IE [ par softarg24 ]
Bonjour,Voici l'adresse du site que je tente de faire pour des amis. Je suis loin d'être experte:http://www.so6online.net/exploitation.php Sous intern
Besoin d'aide... [ par Koppa ]
Bonjour tout le monde.Voici mon problème j'ai trouvé un script qui permet de faire choisir au membre le thème de son choix avec forumactif. Vous conna
integrer image arriere plan dans menu CSS [ par ju0123456789 ]
Bonjour,je viens de mettre en place un menu avec sous menu, et mon probleme est que je voudrais integrer une image d'arriere plan, mais soit ce n'est
Menu glissant sous html ne fonctionne pas sous DOCTYPE XHTML [ par michof ]
Bonjour,J'ai construit un petit menu glissant tout simple en CSS et javascript qui fonctionne très bien en HTML, mais sous XHTML il bloque. Le menu es
menu horizontal avec image + compatibilité ie6 [ par misskis ]
Bonjour,Help me please !!!Je n'arrive pas à trouver de solutions pour mon bug ie6.J'ai créé un menu horizontal avec image mais sur ie6 l'affichage est
Garder ouvert un menu accordeon [ par AlexFaitDesChoses ]
Bonjour à tous, je débute en PHP et j'aimerais quelques conseils. Je suis entrain de créer mon nouveau site qui se compose comme ceci: un menu déroula
Probleme menu deroulant aidez moi [ par edwix ]
Bonjour tout le monde je viens demander votre aide car sa fait depuis quelque temps que j'essaye de faire mon menu déroulant tout marche bien mais le
Arriere-plan image changeante on refresh adaptee a l ecran du client [ par pearlp ]
Bonsoir ! Voiala ca fais 5 jours que j'essaie de trouver un scripte qui me permetterai d avoir une nouvelle image arriere plan a chaque rafraichissem
création d'un bouton de menu [ par hanen8989 ]
bonjours, je veux créer un bouton dans le menu de mon site personnel et lorsque l'utilisateur clique sur ce bouton il s'affiche un sous menu ( c.a.d
 Livres en rapport
|
Derniers Blogs
 SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPSSLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko
Retrouvez les slides et les démo de ma session Fast & Furious XAML Apps. A ceux qui se posent la question : "est-ce que le code de la DataGrid est disponible?", je vous répondrais "pas encore". Je vais mettre en place un projet codeplex pour part...
Cliquez pour lire la suite de l'article par Vko XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio
Logiciels
 DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|