begin process at 2010 03 16 17:13:11
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

pb affichage de sous-menu

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

pb affichage de sous-menu

vendredi 26 janvier 2007 à 11:45:10 | pb affichage de sous-menu

phelsuma
Bonjour à toutes et à tous,

Je viens à vous pour un souci d'affichage. Lorsque ma souris passe sur le menu principal, des sous-menus doivent apparaître. Lorsque je visualise dans les navigateurs FF et IE, il n'y a rien du tout, seulement le menu principal. Si quelqu'un peut m'aider à résoudre ce problème, j'en serais heureux.

Voici le contenu du HTML en question (avec le CSS après).

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css_v3/emx_nav_right.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 = allitems;
    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">page content</a> | <a href="#pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<div id="masthead">
  <h1 id="siteName">Site Name</h1>
  <div id="globalNav"> <img alt="" src="css_v3/gblnav_left.gif" height="32" width="4" id="gnl" /> <img alt="" src="css_v3/glbnav_right.gif" height="32" width="4" id="gnr" />
    <div id="globalLink"> <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">global link</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global link</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global link</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global link</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global link</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global link</a><a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">global link</a> </div>
    <!--end globalLinks-->
  </div>
  <!-- end globalNav -->
  <div id="subglobal1" class="subglobalNav"> <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> | <a href="#">subglobal1 link</a> </div>
  <div id="subglobal2" class="subglobalNav"> <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> </div>
  <div id="subglobal3" class="subglobalNav"> <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> </div>
  <div id="subglobal4" class="subglobalNav"> <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> | <a href="#">subglobal4 link</a> </div>
  <div id="subglobal5" class="subglobalNav"> <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</a> | <a href="#">subglobal5 link</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 --><!--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 voici le CSS :

body{
    font-family: Arial,sans-serif;
    color: #333333;
    line-height: 1.166;
    margin: 0px;
    padding: 0px;
    background: #cccccc url(bg_grad.jpg) fixed;
}

a:link, a:visited{
    color: #005FA9;
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

h1{
    font: bold 200% Arial,sans-serif;
    color: #334d55;
    margin: 0px;
    padding: 0px;
}

#masthead{
    position: absolute;
    top: 2px;
    left: 2%;
    right: 2%;
    width:95.6%;
    height: 197px;
   
#siteName{
    margin: 0px;
    padding: 16px 0px 8px 0px;
    color: #ffffff;
    font-weight: normal;
}

#globalNav{
    position: absolute;
    width: 100%;
    min-width: 640px;
    height: 32px;
    color: #cccccc;
    padding: 0px;
    margin: 0px;
    background-image: url(glbnav_background.gif);
    top: 140px;
    left: 1px;
}

#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(glblnav_selected.gif);
    text-decoration: none;}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
    position: absolute;
    top: 174px;
    left: 2px;
/*width: 100%;*/
    min-width: 640px;
    height: 20px;
    padding: 0px 0px 0px 10px;
    visibility: hidden;
    color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
    font-size: 80%;
    color: #ffffff;
}

.subglobalNav a:hover{
    color: #cccccc;
}

Merci de bien vouloir me donner un coup de main......
vendredi 26 janvier 2007 à 13:57:44 | Re : pb affichage de sous-menu

PetoleTeam

Membre Club
Réponse acceptée !

B onjour...

tout d'abord il manque...
#masthead{
    position: absolute;
    top: 2px;
    left: 2%;
    right: 2%;
    width:95.6%;
    height: 197px;
}    <-- ICI
dans la déclaration des styles, peut être copier coller hasardeux

ensuite dans...
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';
        } 
    }
}
 il est surement necéssaire d'ajuster les valeurs en rouge

;0)

samedi 27 janvier 2007 à 12:25:03 | Re : pb affichage de sous-menu

phelsuma
Merci beaucoup PetoleTeam pour ta réponse. J'ai appliqué tes conseils et ça marche très bien. Je débute tout juste dans le web, heureusement que vous êtes là pour les astuces !

Il fallait effectivement changer les valeurs notées en rouge. Bien vu !

A+


Cette discussion est classée dans : menu, var, link, hidden, 0px

Répondre à ce message

Sujets en rapport avec ce message

Menu dynamique [ par phelsuma ] Bonjour à toutes et à tous,Je ne suis pas expert en langage, et de ce fait il était difficile pour moi de trouver la place pour le sujet suivant :Voil Ajourter une option à ce menu [ par goingup ] Bonjour à tous,Voici un menu vertical coulissant que j'utiliserais bien pour la grande arborescence de mon site...Par contre je voudrais lui ajouter u plusieurs code sur la meme page [ par mc74gyver ] sltje voudrait savoir comment on fait pour mettre deux codes javascript sur la meme pagevoila  un bout de code merci de votre aide ca c'est le menu va Drag and drop [ par boulika ] BonjourVoici le code source d'une page en javascript avec des "div" a drager . Je ne sais pas comment faire pour soit :- obtenir les coordonnées des d probleme affichage/masquer menu vertical [ par neolin85 ] Bonjour à tous, j'ai developpé un petit code qui permet de faire un menu horizontal avec des menus verticaux pour chaque clique sur le menu.J'ai un pe Ptit soucis de script - BESOIN D'AIDE [ par kanabinch ] Bonjour, j'ai une partie de mon code et je souhaiterai que mon menu soit dans un , j'ai essayé de faire quelque chose mais je ne parvient pas à avoir probleme avec le menu xp [ par scinzia ] Bonjour,j'utilise le menu xp qui j'ai trouvé sur ce site et je n'arrive pas a l'automatiser entierement c'est a dire quand on on ouvre une partie du m Ouvrir des pages htm dans un iFrame [ par pat84 ] Bonjour à tous,J'ai récupéré un menu sur le web que j'ai modifié pour mon usage...Un menu est situé dans la page index.htm et dans cette page index.ht menu en cascade [ par oceane751 ] bonjour à tous!! j'ai du code me permettant de creer un menu horizontal en cascade, mais j'ai un peu de mal en effet, pour certain element du menu probleme avec document.writ() [ par neolin85 ] Bonsoir à tous,Je souhaite construire un menu horizontal sauf que j'ai un soucis avec la méthode write de la classe document.En fait, chaque fois que


Nos sponsors


Appels d'offres

Sondage...

Comparez les prix


Console Nintendo Wii
Entre 220€ et 307€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

  
  

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,312 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)