Bouton liste déroulante

Statut
N'est pas ouverte pour d'autres réponses.
[ zep2k ]

[ 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.
 
Tifox

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>.
 
1er
OP
[ zep2k ]

[ 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>
 
M

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
 
F

Fx07s

ex membre
+1 pour le menu en CSS ;)
 
1er
OP
[ zep2k ]

[ 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.
 
M

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 ?
 
1er
OP
[ zep2k ]

[ zep2k ]

catkiller o/
Namo a dit:
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 ?
Cliquez pour agrandir...
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.
 
M

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.
 
1er
OP
[ zep2k ]

[ zep2k ]

catkiller o/
un grand merci Namo :D
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut