|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 Sujet : PB menu dynamique - affichage pas terrible [ CSS / Général ] (chabgyver)
 Informations & options pour cette discussion
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é 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
Problème de superposition z-index avec IE [ par chabgyver ]
Bonjour,J'ai un soucis avec la superposition avec IE7.Voici mon css :[quote].float-left{float: left;}.float-right{float: right;}.nav-container .divide
Menu deroulant vertical, fonctions non compatibles avec internet explorer [ par maripaun2003 ]
Bonjour, Je suis debutante en javascript. Pour mon site personnel j'ai crée un menu vertical deroulant avec le javascript. Voila mon probleme: quand o
 Livres en rapport
|
 Téléchargements
Logiciels à télécharger sur le même thème :
|