Menu deroulant horizontal

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par sophieplaya, 1 Mai 2009.

  1. sophieplaya
    sophieplaya WRInaute discret
    Inscrit:
    4 Mars 2009
    Messages:
    95
    J'aime reçus:
    0
    Bonjour !!

    Je suis en train de tester un nouveua menu pour mon site, deroulant au lieu de statique, et je l'ai mis sur une page de test :
    http://www.kaaxan.com/index.php?page=conseils
    en doublons de l'actuel.

    mon probleme: vous pourvez le voir, il ne passe pas "au-dessus" ce ce qui est deja sur la page...

    voici mon code:


    Code:
       <script type="text/javascript">
        <!--
        window.onload=montre;
        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';}
        }
        //-->
        </script>
    
    
        <style type="text/css">
        <!--
        /* CSS issu des tutoriels http://css.alsacreations.com */
        body {
        margin: 0;
        padding: 0;
        background: white;
        font: 80% verdana, arial, sans-serif;
        }
        dl, dt, dd, ul, li {
        margin: 0;
        padding: 0;
        list-style-type: none;
        }
        #menu {
        z-index:100;
        width: 100%;
        }
        #menu dl {
        float: left;
        width: 9em;
        margin: 0 1px;
        }
        #menu dt {
        cursor: pointer;
        text-align: center;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color:  #FFFFFF;
        background: #37A8C5;
        border: 1px solid gray;
        }
        #menu dd {
        border: 1px solid gray;
        }
        #menu li {
        text-align: center;
        background: #fff;
        }
        #menu li a, #menu dt a {
        color: #000;
        text-decoration: none;
        display: block;
        height: 100%;
        border: 0 none;
        }
        #menu li a:hover, #menu dt a:hover {
        background: #eee;
        }
    
        #site {
        position: absolute;
        z-index: 1;
        top : 70px;
        left : 10px;
        color: #000;
        background-color: #ddd;
        padding: 5px;
        border: 1px solid gray;
        }
    
        a {text-decoration: none;
        color: black;
        color: #222;
        }
        -->
        </style>
    
    
        <div id="menu">
           <dl>
              <dt onmouseover="javascript:montre();"><a href="http://www.kaaxan.com" title="Home"><? print ll("Inicio","Home","Accueil","Home"); ?> </a></dt>
           </dl>
           
           <dl>         
              <dt onmouseover="javascript:montre('smenu1');">Propriétes</dt>
                 <dd id="smenu1">
                    <ul>
                       <li><a href="http://www.kaaxan.com/index.php?page=proprietes">Liste</a></li>
    				   <li><a href="http://www.kaaxan.com/index.php?page=cartetoutes">Carte des maisons</a></li>                 
                    </ul>
    
                 </dd>
           </dl>
           
           
           <dl>   
              <dt onmouseover="javascript:montre('smenu2');">FAQ</dt>
                 <dd id="smenu2">
                    <ul>
                       <li><a href="http://www.kaaxan.com/index.php?page=faq">Etapes de la location</a></li>
    				   <li><a href="http://www.kaaxan.com/index.php?page=cartetoutes">Carte des maisons</a></li>
    				   <li><a href="http://www.kaaxan.com/index.php?page=panier">Vos courses</a></li>
                       <li><a href="http:/www,kaaxa.com/index.php?page=video">Video</a></li>
    				   			   
    	            </ul>
                 </dd>
           </dl>
           
           <dl>   
              <dt onmouseover="javascript:montre('smenu3');">Services Inclus</dt>
                 <dd id="smenu3">
    
                    <ul>
                       <li><a href="http://www.kaaxan.com/index.php?page=faq">Etapes de la location</a></li>
    				    <li><a href="http://www.kaaxan.com/index.php?page=faq">Etapes de la location</a></li>
    
    
                    </ul>
                 </dd>
           </dl>
           
           <dl>   
              <dt onmouseover="javascript:montre('smenu4');">Riviera Maya</dt>
                 <dd id="smenu4">
                    <ul>
    				
                        <li><a href="http://www.kaaxan.com/index.php?page=faq">Riviera Maya</a></li>    
    				    <li><a href="http://www.kaaxan.com/index.php?page=faq">Playa del Carmen</a></li>
    					<li><a href="http://www.kaaxan.com/index.php?page=faq">Conseils de Voyage</a></li>		
    						
                    </ul>
                 </dd>
           </dl>
           
           <dl>   
              <dt onmouseover="javascript:montre('smenu5');">L'Equipe</dt>
    		    <dd id="smenu5">
    			  <ul>
    			  <li><a href="http://www.kaaxan.com/index.php?page=nosotros">L'équipe</a></li>
    			  </ul></dd>
           </dl>
           
           <dl>   
              <dt onmouseover="javascript:montre('smenu6');">Contact</dt>
    		    <dd id="smenu6">
    			  <ul>
    			  <li><a href="http://www.kaaxan.com/index.php?page=contact">Contact</a></li>
    			  </ul></dd>
           </dl>
    	          
           
        </div>
    Merci !!
     
  2. sophieplaya
    sophieplaya WRInaute discret
    Inscrit:
    4 Mars 2009
    Messages:
    95
    J'aime reçus:
    0
    Bon j'ai trouvé... il fallait mettre un positio: absolute au niveau du #menu...

    mais maintenant j'ai un menu qui se déroule mais qui ne se renroule pas, c'est quoi al formule pour qu'apres l'ouverture OnMouseOver il se retracte ?
    COmment se fait-il que je n'arrive pas a le positionner au centre de ma td?
    merci
     
  3. u94082
    u94082 WRInaute occasionnel
    Inscrit:
    23 Août 2008
    Messages:
    268
    J'aime reçus:
    0
    Salut,

    Il vaut mieux oublier le javascript pour ce genre de menu, c'est pas bon pour le visiteur (si JS désactivé) ni pour le référencement.
    Tu trouvera beaucoup d'exemples full css ici : http://css.maxdesign.com.au/listamatic/
     
  4. lg
    lg WRInaute discret
    Inscrit:
    12 Juillet 2004
    Messages:
    141
    J'aime reçus:
    0
    Code:
    <dt onmouseover="javascript:montre('smenu1');">Accueil</dt>
    			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
     
  5. Rod la Kox
    Rod la Kox WRInaute accro
    Inscrit:
    24 Juin 2008
    Messages:
    2 844
    J'aime reçus:
    0
  6. sophieplaya
    sophieplaya WRInaute discret
    Inscrit:
    4 Mars 2009
    Messages:
    95
    J'aime reçus:
    0
    Genial merci...

    un dernier truc... quand j'ouvre ma page,tous les menus se déroulent ??
     
  7. lg
    lg WRInaute discret
    Inscrit:
    12 Juillet 2004
    Messages:
    141
    J'aime reçus:
    0
    oui mais ils se referment aussi sec non ?? temps de lecture .....
     
  8. sophieplaya
    sophieplaya WRInaute discret
    Inscrit:
    4 Mars 2009
    Messages:
    95
    J'aime reçus:
    0
    Bah non justement...
    Ils ne se referment que lorsque je passe la souris dessus... c'est pas tres classe...
     
  9. sophieplaya
    sophieplaya WRInaute discret
    Inscrit:
    4 Mars 2009
    Messages:
    95
    J'aime reçus:
    0
    J'ai trouvé...

    window.onload=montre;
     
Chargement...
Similar Threads - Menu deroulant horizontal Forum Date
centrer menu horizontal deroulant Développement d'un site Web ou d'une appli mobile 28 Juin 2011
Menu déroulant avec sous menu horizontale. Développement d'un site Web ou d'une appli mobile 30 Septembre 2010
problème lien menu deroulant sur wix Demandes d'avis et de conseils sur vos sites 23 Janvier 2019
Mieux vaut-il un select ou un menu déroulant CSS Développement d'un site Web ou d'une appli mobile 15 Mars 2017
Vers la fin du menu déroulant? Administration d'un site Web 17 Avril 2016
Question sur menu déroulant Développement d'un site Web ou d'une appli mobile 20 Janvier 2016
Récupération des données d'un menu déroulant en HTML Développement d'un site Web ou d'une appli mobile 22 Septembre 2015
Comment faire pour avoir ce menu déroulant sur Bing Référencement Bing 21 Avril 2015
Mon ménu déroulant décale tous les éléments qui se trouvent après Développement d'un site Web ou d'une appli mobile 18 Janvier 2015
Fermer OnMouseOver menu déroulant Développement d'un site Web ou d'une appli mobile 18 Novembre 2014
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice