Liste deroulante avec lien ?

Sujet résolu

1 mars 2010 à 21:15:27

Bonjour, j'ai fait une liste déroulante, la voici :

<form method="post" action="traitement.php">
   <p>
       <label for="Jeux">Choisisser le jeu ---- > </label><br />
       <select name="Jeux" id="Jeux">
           <option value="Wow">   World of Warcraft   </option>
      <a href="Accueil.html"><option value="Gta Sa"> Gta San Andreas  </option></a>
           <option value="Gta Vcity">Gta Vice City</option>
           <option value="Gta LC stories">Gta liberty city stories</option>
           <option value="Gta VC stories">Gta Vice City Stories</option>
           <option value="Gta III">Gta III</option>
           <option value="Gta IV">Gta IV</option>
           <option value="Gta Chinatow W">Gta Chinatown Wars</option>
       </select>
   </p>
</form>

et je voudrais, mettre des liens, pour que quand la personne choisisse le jeu sa la redirige vers une page de mon site, jai essayer plein de chose dont sa (mais aucun ne fonctionne ) :

<form method="post" action="traitement.php">
   <p>
       <label for="pays">Choisisser le jeu ---- > </label><br />
       <select name="Jeux" id="Jeux">
           <option value="Wow">   World of Warcraft   </option>
      <option value="Gta Sa"> <a href="Accueil.html">Gta San Andreas</a>  </option>
           <option value="Gta Vcity"><a href="Accueil.html">Gta Vice City</a></option>
           <option value="Gta LC stories">Gta liberty city stories</option>
           <option value="Gta VC stories">Gta Vice City Stories</option>
           <option value="Gta III">Gta III</option>
           <option value="Gta IV">Gta IV</option>
           <option value="Gta Chinatow W">Gta Chinatown Wars</option>
       </select>
   </p>
</form>

Sur Gta Vice City (deuxieme ligne, jai ajouté un " href et tout )
Si vous avez une idée. Merci d'avance.

selen

1 mars 2010 à 21:41:08

Il faut du javascript pour ça :
voici un modèle :

<select name="nimporte" onChange="location.href=''+this.options[this.selectedIndex].value+'.html';">
           <option>Choix</option>
           <option value="page1">Lien1</option>
           <option value="page2">Lien2</option>
       </select>

dans value= il faut mettre le nom de ta page sans le .html

Vipear

2 mars 2010 à 0:00:46

<option value="Gta Chinatow W"><a href="Lien du site" />Gta Chinatown Wars</a></option>

Ceci n'aurait pas fonctionner ?

Edit : Après vérification , ma méthode est bonne et elle fonctionne si tu ne veux pas te prendre la tête
et rester simplement en Xhtml / Html au lieu d'aller te compliquer

Caduchon

2 mars 2010 à 0:02:47

Si tu ne veux pas de javascript, va voir du côté des menu déroulant en CSS.

Je ne suis responsable que de ce que je dis, pas de ce que vous comprenez... - /!\ Négligences de sécurité sur OpenClassrooms /!\

dadouvicc

2 mars 2010 à 11:52:26

ba merci pour vos reponses, j essaie tout sa, si sa marche pas, j irai voir du coté des menus deroulant, mais ou sont les menus deroulants ? Dans le cour ?

andante

2 mars 2010 à 12:06:38

Citation : dadouvicc

ba merci pour vos reponses, j essaie tout sa, si sa marche pas, j irai voir du coté des menus deroulant, mais ou sont les menus deroulants ? Dans le cour ?

Oui, il y a plusieurs cours sur les menus déroulants :
http://www.siteduzero.com/tutoriel-3-3 [...] rizontal.html
http://www.siteduzero.com/tutoriel-3-3 [...] roulante.html
http://www.siteduzero.com/tutoriel-3-3 [...] es-liens.html
Tu as le choix

selen

2 mars 2010 à 16:29:06

Citation : Vipear

<option value="Gta Chinatow W"><a href="Lien du site" />Gta Chinatown Wars</a></option>
Ceci n'aurait pas fonctionner ?

Edit : Après vérification , ma méthode est bonne et elle fonctionne si tu ne veux pas te prendre la tête
et rester simplement en Xhtml / Html au lieu d'aller te compliquer

Non ça ne fonctionne pas, la page demandée ne s'affiche pas. (même en mettant un href convenable évidemment)
Ou alors montre un exemple en ligne !

dadouvicc

2 mars 2010 à 20:11:50

Merci, jai choisit les menus roulants, juste encore un bleme, je met sa sa marche pas pour essayer:

<!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" >
   <head>
       <title> GameSoft : GameForLife</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="DesignAcc.css" />

   </head>
   <body>
       
	   

	<body>
		<div id="en_tete">
   
</div>


   <div id="menu">		
	<div class="red right"></div>
	<ul>

		<li><a href="Cheat.html">Cheats</a></li>
		<li><a href="#">Iphone</a></li>
		<li><a href="#">Films</a></li>
		
	</ul>
	<div class="red left"></div>	
</div>

<select name="menu_destination"> 
<optgroup label="le site">
     <option value="">Accueil</option> 
     <option value="http://www.monsite.net/apropos.html">Qui sommes-nous ?</option> 
     <option value="essaie.html">Nous contacter</option> 
     <option value="http://www.monsite.net/plan.html">Plan du site</option> 
</optgroup>
<optgroup label="rubriques">
     <option value="url_1">Catégorie 1</option> 
     <option value="url_2">Catégorie 2</option> 
     <option value="url_3">Catégorie 3</option> 
</optgroup>
</select>




<div id="corps">
   
</div>

</div>

 

 

 
<div id="pied_de_page">
<p> Copyright, corporation 2010,  tous droit réservés ! </p>
 
</div>

A "nous contactez " jai mis accueil.hmtl, une des pages de mon site, mes sa ne fonctionne pas .
Merci d'avance

selen

2 mars 2010 à 21:03:07

Question : Est-ce que tu lis les réponses qu'on te donne ?
à croire que non...

dadouvicc

2 mars 2010 à 21:43:11

si désolé, en fait jai choisit une autre option, une que quelqun ma donné la, une liste a puce perosnnalisé c'est pas mal, merci a tous.

fvanholme

25 janvier 2014 à 16:14:15

Il faut du javascript pour ça :
voici un modèle :

 	

<select name="nimporte" onChange="location.href=''+this.options[this.selectedIndex].value+'.html';">
           <option>Choix</option>
           <option value="page1">Lien1</option>
           <option value="page2">Lien2</option>
 </select>

dans value= il faut mettre le nom de ta page sans le .html

merci beaucoup à selen pour son explication elle fonctionne très bien

-
Edité par fvanholme 25 janvier 2014 à 16:20:20

dadouvicc

25 janvier 2014 à 17:36:24

Oula, j'ai abandonné ces langages x) maintenant je suis plus c++, ciao et merci de la reponse.

Tom'sPhotographie

30 juin 2015 à 20:35:00

bonjour moi j'ai une liste déroulante avec un bouton dans un formulaire a la fin et j'aimerais pouvoir acéder a la page sélectionne en appuyent sur celui ci , ou pouvoir avoir un "aperçu" de la page sur le page de redirection du formulaire

je vous mais l'image du code pour mieux comprendre merci d'avance pour votre aide

Alex0123

23 novembre 2018 à 20:01:39

Bonjour,

J'ai un projet "création d'un site web" en classe de Seconde, et j'ai insérer un menu déroulant.
Je souhaiterais donner un lien à chaque mot contenu dans une liste déroulante. Des que le mot est selectionné on va sur la page. Pouvez-vous m'aider pour que je puisse aller sur une page après avoir cliqué dans le menu déroulant. Quels sont les codes ? Merci pour votre aide et vos réponses !
Voici mes codes HTML et CSS :

HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Site web HTML CSS</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<nav>
<ul>
<li class="menu-html"><a href="html.html">Acceuil</a>
<ul class="submenu">
<li><a href="#">Téléphones</a></li> 
</ul>
</li>
<li class="menu-css"><a href="css.html">A propos</a>
<ul class="submenu">
<li><a href="#">Quel est le premier téléphone portable qui a existé ?</a></li>
<li><a href="#">Quel est le premier téléphone portable qui a existé ?</a></li>
<li><a href="#">Evolution du téléphone jusqu'à aujourd'hui</a></li>
</ul>
</li>
<li class="menu-javascript"><a href="javascript.html">Contact</a>
<ul class="submenu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">YouTube</a></li>
</ul>
</nav>
</body>
</html>

CSS :

body {

font-family: 'Source code pro', Calibri, serif;

margin: 0px;
padding: 0px;
}

nav {
width: 100%;
background-color: #424558;
}

nav > ul {
margin: 0px;
padding: 0px;
}

nav > ul::after {
content: "";
display: block;
clear: both;
}

nav > ul > li {
float: left;
position: relative;
}

nav > ul > li > a {
padding: 20px 30px;
color: #FFF;
}

nav > ul > li:hover a {
padding: 15px 30px 20px 30px;
}

nav li {
list-style-type: none;
}

.submenu {
display: none;
}

nav a {
display: inline-block;
text-decoration: none;
}

nav li:hover .submenu {
display: inline-block;
position: absolute;
top: 100%;
left: 0px;
padding: 0px;
z-index: 1000;
}

.submenu li {
border-bottom: 1px solid #CCC;
}

.submenu li a {
padding: 15px 30px;
font-size: 13px;
color: #222538;
width: 270px;
}

.menu-html:hover {
border-top: 5px solid #e44d26;
background-color: RGBA(228,77,38,0.15);
}

.menu-css:hover {
border-top: 5px solid #0070bb;
background-color: RGBA(000,112,192,0.15);
}

.menu-javascript:hover {
border-top: 5px solid #f1dc4f;
background-color: RGBA(241,211,79,0.15);
}

.menu-contact:hover {
border-top: 5px solid #BBB;
background-color: RGBA(220,220,220,0.15);
}

.menu-html .submenu {
background-color: RGB(230,100,40);
}

.menu-css .submenu {
background-color: RGB(000,160,240);
}

.menu-javascript .submenu {
background-color: RGB(250,215,100);
}

.submenu li:hover a {
color: #EEE;
font-weight: bold;
}

.menu-html .submenu li:hover {
background-color: RGB(210,77,60);
}

.menu-css .submenu li:hover {
background-color: RGB(000,115,200);
}

.menu-javascript .submenu li:hover {
background-color: RGB(200,165,75);
}

-
Edité par Alex0123 23 novembre 2018 à 20:06:09