Bouton liste déroulante

Discussion dans 'Web, design' créé par [ zep2k ], 12 Novembre 2007.

Statut de la discussion:
Fermée.
  1. Offline
    [ zep2k ] catkiller o/
    Voila j'aimerais pouvoir ajouter une liste déroulante dans un fichier HTML où, lorsque l'on sélectionne un texte, cela fait apparaître une page dans la frame choisie...

    quel'un pourrait il m'aider ? je ne sais absolument pas comment faire.
    Merci.
    [ zep2k ], 12 Novembre 2007
    #1
  2. Offline
    Tifox ou pas
    La liste déroulante, c'est un tag <select>. Après, il faut ajouter un peu de javascript pour effectuer l'action demandée. Genre créer une petit fonction qui récupère la valeur sélectionnée, et ouvre l'url correspondant a cette valeur dans la frame. Et tu lance cette fonction via l'attribut "onchange" du <select>.
    Tifox, 12 Novembre 2007
    #2
  3. Offline
    [ zep2k ] catkiller o/
    j'ai tenté le truc le problème c'est que la liste ne se referme pas une fois que la souris n'est plus dedans.

    Pour ce que j'ai
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <title>Bouton déroulant</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <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">
    <!-- 
    /* Code CSS */
    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 {
    position: absolute;
    top: 0;
    left: 0;
    z-index:100;
    width: 100%;
    }
    #menu dl {
    float: left;
    width: 12em;
    margin: 0 1px;
    }
    #menu dt {
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #ccc;
    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>
    </head>
    
    <body>
    
    <div id="menu">
    	
    	<dl>			
    		<dt onmouseover="javascript:montre('smenu1');">Menu</dt>
    			<dd id="smenu1">
    				<ul>
    					<li><a href="#">Sous-Menu</a></li>
    
    					<li><a href="#">Sous-Menu</a></li>
    					<li><a href="#">Sous-Menu</a></li>
    					<li><a href="#">Sous-Menu</a></li>
    					<li><a href="#">Sous-Menu</a></li>
    					<li><a href="#">Sous-Menu</a></li>
    				</ul>
    
    			</dd>
    	</dl>
    		
    </body>
    </html>
    
    [ zep2k ], 12 Novembre 2007
    #3
  4. Offline
    Maleki Pain in the ass !
    Menu déroulant en CSS sans Javascript, compatible avec Internet Explorer (IE) et Firefox (FF).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <title>Bouton déroulant</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    <!-- 
    
    .menuIE {
        display:none !important;
        display:block;
    }
    
    a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
        color:#000; 
        width:90px; 
        height:18px; 
        display:block; 
        background:#c33; 
        border:1px solid #000; 
        margin-right:1px; 
        text-align:center; 
        float:left; 
        text-decoration:none; 
        font-family: verdana; 
        font-size:10px; 
        line-height:18px; 
        overflow:hidden;
    }
    
    a.boutonIE:hover {
        color:#fff; 
        background:#000; 
        overflow:visible;
    }
    
    a.boutonIE:hover table {
        display:block; 
        background:#eee; 
        border-collapse:collapse;
    }
    
    .boutonFF {
        color:#000; 
        width:90px; 
        height:18px; 
        display:block !important; 
        display:none; 
        background:#c33; 
        border:1px solid #000; 
        margin-right:1px; 
        text-align:center; 
        float:left; 
        text-decoration:none; 
        font-family: verdana; 
        font-size:10px; 
        line-height:18px; 
        overflow:hidden;
    }
    
    .boutonFF:hover {
        height:auto; 
        cursor:pointer;
        color:#fff; 
        background:#000;
    }
    
    
    a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
        display:block; 
        width:90px !important; 
        width:88px; 
        height:18px; 
        border-bottom:1px solid #000; 
        text-decoration:none; 
        color:#000;
        font-family: verdana; 
        font-size:10px; 
        text-align:center;
        background:#eee;    
    }
    
    
    a.SousMenu:hover {
        background:#BCCCD2;
    }
    
    -->
    </style>
    </head>
    
    <body>
    
    <div class="menuIE">
    <a class="boutonIE" href="#nogo">Blogs
    <table><tr><td>
    <a class="SousMenu" href="#nogo">PêUR</a>
    <a class="SousMenu" href="#nogo">Zoélie</a>
    <a class="SousMenu" href="#nogo">BilboWorld</a>
    </td></tr></table>
    </a>
    <a class="boutonIE" href="#nogo">Aides
    <table><tr><td>
    <a class="SousMenu" href="#nogo">Francisek</a>
    <a class="SousMenu" href="#nogo">La FAQ</a>
    <a class="SousMenu" href="#nogo">Self HTML</a>
    </td></tr></table>
    </a>
    </div>
    
    <div class="boutonFF">Blogs<br />
    <a class="SousMenu" href="#nogo">PêUR</a>
    <a class="SousMenu" href="#nogo">Zoélie</a>
    <a class="SousMenu" href="#nogo">BilboWorld</a>
    </div>
    <div class="boutonFF">Aides<br />
    <a class="SousMenu" href="#nogo">Francisek</a>
    <a class="SousMenu" href="#nogo">La FAQ</a>
    <a class="SousMenu" href="#nogo">Self HTML</a>
    </div>
    
    </body>
    </html>
    Source
    Maleki, 13 Novembre 2007
    #4
  5. Offline
    Fx07s ex membre
    +1 pour le menu en CSS ;)
    Fx07s, 13 Novembre 2007
    #5
  6. Offline
    Tifox ou pas
    Tifox, 13 Novembre 2007
    #6
  7. Offline
    [ zep2k ] catkiller o/
    merci pour vos réponses j'ai à présent le menu que je désire(merci Namo), ce qui me pause problème c'est pour l'inserer dans l'index.html =)

    Si vous avez encore 15 petites minutes pour m'aider.

    Voici mon index.html
    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Language" content="fr-be">
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 2</title>
    <base target="contents">
    </head>
    
    <body bgcolor="#212121" link="#7B7B7B" vlink="#E7AD00">
    
    <div align="left">
    
      <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; position:relative; left:7; top:12; text-align:center" bordercolor="#111111" width="654">
        <tr> 
          <td width="100%" align="center" colspan="6" valign="middle"> <font style="font-size: 9pt"> 
            <img border="0" src="images/gsptop.gif" width="654" height="284"></font></td>
        </tr>
        <tr> 
          <td width="16%" align="center" bordercolor="#7B7B7B" bgcolor="#E7AD00">&nbsp;</td>
          <td width="16%" align="center" bordercolor="#7B7B7B" bgcolor="#E7AD00">&nbsp;</td>
          <td width="17%" align="center" bordercolor="#7B7B7B" bgcolor="#E7AD00">&nbsp;</td>
          <td width="17%" align="center" bordercolor="#7B7B7B" bgcolor="#E7AD00">&nbsp;</td>
          <td width="17%" align="center" bordercolor="#7B7B7B" bgcolor="#E7AD00">&nbsp;</td>
          <td width="17%" align="center" bordercolor="#7B7B7B" bgcolor="#E7AD00">&nbsp;</td>
        </tr>
      </table>
    
    </div>
    
    </body>
    
    </html>
    
    vous pouvez y remarquer les différentes cases jaunes, c'est dans celle-là que je souhaiterais y faire apparaitre le menu déroulant. Mon problème c'est que niveau codage pour aller placé le menu tiptop au bon endroit je suis trop débutant pour le faire, et j'utilise DWMC2k4 qui permet une interface "graphique" mais les boutons ne tombent pas au bon endroit.
    [ zep2k ], 13 Novembre 2007
    #7
  8. Offline
    Maleki Pain in the ass !
    Si je comprends bien ton code, tu places tes menus en dessous d'une image ?
    Mais que cherches-tu ?
    Que la largeur des menus soient divisés de manière égale par rapport à la largeur de l'image du dessus ?
    Maleki, 13 Novembre 2007
    #8
  9. Offline
    [ zep2k ] catkiller o/
    Salut Namo, enfait dans mon index.html tu as vu il y a des cases jaunes en dessous de l'image, dans ces cases j'aimerais i placer mes textes(boutons) et quand on passerait la souris dessus HOP liste déroulante, donc en résumé le code que tu m'as si bien fait, j'aimerais l'inserer dans ma lignes de colonnes jaunes.
    [ zep2k ], 13 Novembre 2007
    #9
  10. Offline
    Maleki Pain in the ass !
    OK, j'avais donc bien compris. :p

    Un exemple avec IE :
    Code:
    <style type="text/css">
    <!-- 
    
    body {
        background: #212121; 
    }
    
    div#header {
      background-image: url(images/gsptop.gif);
      background-repeat: no-repeat;
      width: 654px;
      height: 284px;
      padding: 0;
    }
    
    .menuIE {
        display:none !important;
        display:block;
    }
    
    a.buttonIE, a.buttonIE:link, a.buttonIE:visited, a.buttonIE:active {
        color:           #000; 
        width:           105px; 
        height:          18px; 
        display:         block; 
        background:      #E7AD00; 
        border:          1px solid #7B7B7B; 
        margin-right:    1px; 
        text-align:      center; 
        float:           left; 
        text-decoration: none; 
        font-family:     verdana; 
        font-size:       10px; 
        line-height:     18px; 
        overflow:        hidden;
    }
    
    a.buttonIE:hover {
        color:      #fff; 
        background: #000; 
        overflow:   visible;
    }
    
    a.buttonIE:hover table {
        display:         block; 
        background:      #eee; 
        border-collapse: collapse;
    }
    
    a.submenu, a.submenu:link, a.submenu:visited, a.submenu:active {
        display:	     block; 
        width:	     90px !important; 
        width:	     105px; 
        height:          18px; 
        border-bottom:   1px solid #000; 
        text-decoration: none; 
        color:	     #000;
        font-family:     verdana; 
        font-size:       10px; 
        text-align:	     center;
        background:      #eee;    
    }
    
    a.submenu:hover {
        background: #BCCCD2;
    }
    
    -->
    </style>
    </head>
    
    <body>
    
      <div id="header">Image de fond</div>
    
      <div class="menuIE">
        <a class="buttonIE" href="#">Menu 1
          <table><tr><td>
            <a class="submenu" href="#">Submenu 1</a>
            <a class="submenu" href="#">Submenu 2</a>
            <a class="submenu" href="#">Submenu 3</a>
          </td></tr></table>
        </a>
        <a class="buttonIE" href="#">Menu 2
          <table><tr><td>
            <a class="submenu" href="#">Submenu 1</a>
            <a class="submenu" href="#">Submenu 2</a>
            <a class="submenu" href="#">Submenu 3</a>
            </td></tr></table>
        </a>
        <a class="buttonIE" href="#">Menu 3
          <table><tr><td>
            <a class="submenu" href="#">Submenu 1</a>
            <a class="submenu" href="#">Submenu 2</a>
            <a class="submenu" href="#">Submenu 3</a>
          </td></tr></table>
        </a>
        <a class="buttonIE" href="#">Menu 4
          <table><tr><td>
            <a class="submenu" href="#">Submenu 1</a>
            <a class="submenu" href="#">Submenu 2</a>
            <a class="submenu" href="#">Submenu 3</a>
        </td></tr></table>
        </a>
        <a class="buttonIE" href="#">Menu 5
          <table><tr><td>
            <a class="submenu" href="#">Submenu 1</a>
            <a class="submenu" href="#">Submenu 2</a>
            <a class="submenu" href="#">Submenu 3</a>
          </td></tr></table>
        </a>
        <a class="buttonIE" href="#">Menu 6
          <table><tr><td>
            <a class="submenu" href="#">Submenu 1</a>
            <a class="submenu" href="#">Submenu 2</a>
            <a class="submenu" href="#">Submenu 3</a>
          </td></tr></table>
        </a>
      </div>
    
    </body>
    Il faut aussi ajouter les menus compatibles avec Firefox (ce que je n'ai pas fait). Regarde dans le code donné plus haut, il n'y a qu'à faire des copier-coller.
    Maleki, 13 Novembre 2007
    #10
  11. Offline
    [ zep2k ] catkiller o/
    un grand merci Namo :D
    [ zep2k ], 13 Novembre 2007
    #11
  12. Offline
    ozilrit Touriste
    ozilrit, 16 Novembre 2007
    #12
Statut de la discussion:
Fermée.