Sujet Précédent Sujet Suivant

Menu déroulant avec des leins

Fermé
chanigna - 9 janv. 2009 à 19:22
chanigna Messages postés 5 Date d'inscription lundi 12 janvier 2009 Statut Membre Dernière intervention 18 février 2009 - 12 janv. 2009 à 14:37
Bonjour a tous,

Je dois faire un menu déroulant avec des liens et je ne sais pas du tout comment faire pouvez vous s’il vous plait m’aider.

J'utilise dreamweaver cs3.

Voici un exemple type de ce que je dois faire :

A
B
C
D
(Lorsque je me positionne sur A, je devrais avoir petit a avec un lien par exemple.)
Ainsi de suite avec les autres lettres.

Merci beaucoup.
A voir également:

5 réponses

Réponse 1 / 5
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
9 janv. 2009 à 20:02
SALUT

En voila un tu adapteras a tes besoins 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RAD ZONE Webcreation</title>
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css">
/*<![CDATA[*/

    .menu {
        margin: 10px;
        height: 100px;
        font-size: 10pt;
        font-family: verdana;
    }
    .menu ul {
        margin: 0pt;
        padding: 0pt;
        position: relative;
        z-index: 500;
        list-style-type: none;
        width: 11em;
    }
    .menu li {
        background-color: #cccc99;
        float: left;
    }
    .menu li.sub {
        background-color: #cccc99;
    }
    .menu table {
        position: absolute;
        border-collapse: collapse;
        top: 0pt;
        left: 0pt;
        z-index: 100;
        font-size: 1em;
        margin-top: -1px;
    }
    .menu a, .menu a:visited {
        border: 1px solid #ffffff;
        display: block;
        text-decoration: none;
        height: 2em;
        line-height: 2em;
        width: 11em;
        color: #000000;
        padding-left: 1em;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-transform: none;
    }
    .menu b {
        float: right;
        margin-right: 5px;
    }
    * html .menu a, * html .menu a:visited {
        width: 11em;
    }
    * html .menu a:hover {
        color: #ccff66;
        background-color: #999966;
        position: relative;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li:hover {
        position: relative;
    }
    .menu a:active, .menu a:focus {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li:hover > a {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li ul {
        padding: 2em;
        visibility: hidden;
        position: absolute;
        top: -2em;
        left: 7em;
        background-color: transparent;
    }
    .menu li:hover > ul {
        visibility: visible;
    }
    .menu ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul a:hover ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
    }

    /*]]>*/
    </style>
</head>  
  <body>    
    <div class="menu">      
      <ul><li>        
        <a href="#"><b>»</b>Menu 1           
          <!--[if IE 7]>
                    <!--></a>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
        <ul><li>          
          <a href="#">Sub Menu 1a</a></li><li>          
          <a href="#">Sub Menu 1b</a></li>        
        </ul>        
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
        <a href="#"><b>»</b>Menu 2           
          <!--[if IE 7]>
                    <!--></a>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
        <ul><li>          
          <a href="#">Sub Menu 2a</a></li><li>          
          <a href="#"><b>»</b>Sub Menu 2b             
            <!--[if IE 7]>
                        <!--></a>            
          <!--<![endif]-->           
          <!--[if lte IE 6]>
                    <table>
                    <tr>
                    <td>
                    <![endif]-->           
          <ul><li>            
            <a href="#"><b>»</b>Sub sub Menu 2b               
              <!--[if IE 7]>
                            <!--></a>              
            <!--<![endif]-->             
            <!--[if lte IE 6]>
                        <table>
                        <tr>
                        <td>
                        <![endif]-->             
            <ul><li>              
              <a href="#">Sub Menu 2ba</a></li>            
            </ul>            
            <!--[if lte IE 6]>
                        </td>
                        </tr>
                        </table>
                        </a>
                        <![endif]--></li>          
          </ul>          
          <!--[if lte IE 6]>
                    </td>
                    </tr>
                    </table>
                    </a>
                    <![endif]--></li><li>          
          <a href="#">Sub Menu 2Bb</a></li>        
        </ul>        
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
        <a href="#">Menu 3</a></li><li>        
        <a href="#">Menu 4</a></li>      
      </ul>    
    </div>  
  </body>
</html>


ou si tu prefert un accordeon en css 
<!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">  
  <head>    
    <title>RAD ZONE Webcreation     
    </title>    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />    
    <meta name="author" content="http://radservebeer.free.fr" />    
    <meta name="generator" content="PSPad editor, www.pspad.com" />    
  <style type="text/css">
/*<![CDATA[*/
.menu {
  position:absolute;
  top:10px;
  left:20px;
	font-family: Comic Snas MS;
	font-weight: bold;
	font-size: 16px;
	border-width: 1px;
	border-color: #D1D100;
	border-style: solid;
	color: #ccc;
}
.menu     div {
	display: block;
	cursor: pointer;
	background-color: #444;
	border-top-width: 1px;
	border-top-color: #D1D100;
	border-top-style: solid;
	width: 200px;
}
.menu     div:hover > div {
	color: red;
	display: block;
}
.menu     div div {
	display: none;
	background-color: #F1F1F1;
	text-indent: 20px;
}
.menu     a {
	display: block;
}

    /*]]>*/
   
    </style>  
  </head>  
  <body>    
    <div class="menu">      
      <div>        Un         
        <div>          
          <a href="#">1.1</a>        
        </div>      
      </div>      
      <div>        Deux         
        <div>          
          <a href="#">2.1</a> 
          <a href="#">2.2</a>        
        </div>      
      </div>      
      <div>        Trois         
        <div>          
          <a href="#">3.1</a> 
          <a href="#">3.2</a> 
          <a href="#">3.3</a>        
        </div>      
      </div>    
    </div>  
  </body>
</html>
0
Réponse 2 / 5
chanigna Messages postés 5 Date d'inscription lundi 12 janvier 2009 Statut Membre Dernière intervention 18 février 2009
12 janv. 2009 à 11:51
Merci Beacoup mais cela me semble très compliqué.

Chanigna
0
Réponse 3 / 5
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
12 janv. 2009 à 12:50
Merci Beacoup mais cela me semble très compliqué. ???????????

c est le plus simple possible !! il ni as que du html et du css !!

0
chanigna Messages postés 5 Date d'inscription lundi 12 janvier 2009 Statut Membre Dernière intervention 18 février 2009
12 janv. 2009 à 12:54
En fait comme je suis débutante j'ai du mal à me retourver avec tout ces codes. je ne sais pas trop ou placer mes éléments?
0
Réponse 4 / 5
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
12 janv. 2009 à 12:59
ok !

la ce sont 2 pages complete !!

donc lequel des 2 tu prefert ?
0
chanigna Messages postés 5 Date d'inscription lundi 12 janvier 2009 Statut Membre Dernière intervention 18 février 2009
12 janv. 2009 à 13:54
je préfére le premier, mais je ne sais pas si je t'ai bien expliqué ce que je dois faire exactement.

Voila :

Je dois faire un menu déroulant
C'est à dire dans les menus j'ai par exemple
A
B
C
Ce que je dois faire c'est lorsque je me positionne sur A, je dois avoir un sous menu avec par exemple
a
b
c
La même chose pour B, quand je me positionne je dois avoir a,b,c ou d....

Et lorsque je clique sur petit "a", je dois avoir un lien vers une page me donnant l'explication du petit a, et la meême chose pour b, c ou d.

Et mon problème c'est que je n'arrive pas à savoir avec tes codes ou dois-je indiquer tout cela.

C'est difficile lorsque l'on débute mais en tout c'est vraiment très sympas de ta part de m'expliquer.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
12 janv. 2009 à 14:27
VOILA

TU remplace les http://radservebeer.free.fr par les liens vers les page que tu veux 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RAD ZONE Webcreation</title>
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css">
/*<![CDATA[*/

    .menu {
        margin: 10px;
        height: 100px;
        font-size: 10pt;
        font-family: verdana;
    }
    .menu ul {
        margin: 0pt;
        padding: 0pt;
        position: relative;
        z-index: 500;
        list-style-type: none;
        width: 11em;
    }
    .menu li {
        background-color: #cccc99;
        float: left;
    }
    .menu li.sub {
        background-color: #cccc99;
    }
    .menu table {
        position: absolute;
        border-collapse: collapse;
        top: 0pt;
        left: 0pt;
        z-index: 100;
        font-size: 1em;
        margin-top: -1px;
    }
    .menu a, .menu a:visited {
        border: 1px solid #ffffff;
        display: block;
        text-decoration: none;
        height: 2em;
        line-height: 2em;
        width: 11em;
        color: #000000;
        padding-left: 1em;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-transform: none;
    }
    .menu b {
        float: right;
        margin-right: 5px;
    }
    * html .menu a, * html .menu a:visited {
        width: 11em;
    }
    * html .menu a:hover {
        color: #ccff66;
        background-color: #999966;
        position: relative;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li:hover {
        position: relative;
    }
    .menu a:active, .menu a:focus {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li:hover > a {
        color: #ccff66;
        background-color: #999966;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        text-decoration: none;
        text-transform: none;
    }
    .menu li ul {
        padding: 2em;
        visibility: hidden;
        position: absolute;
        top: -2em;
        left: 7em;
        background-color: transparent;
    }
    .menu li:hover > ul {
        visibility: visible;
    }
    .menu ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul a:hover ul a:hover ul ul {
        visibility: hidden;
    }
    .menu ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
    }
    .menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
        visibility: visible;
    }

    /*]]>*/
    </style>
</head>  
  <body>    
    <div class="menu">      
      <ul><li>        
        <a href="#"><b>»</b>Menu A           
          <!--[if IE 7]>
                    <!--></a>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
        <ul><li>          
          <a href="http://radservebeer.free.fr">a</a></li><li>          
          <a href="http://radservebeer.free.fr">b</a></li><li>          
          <a href="http://radservebeer.free.fr">c</a></li><li>          
          <a href="http://radservebeer.free.fr">d</a></li>      
        </ul>             
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
        <a href="#"><b>»</b>Menu B           
          <!--[if IE 7]>
                    <!--></a>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
         <ul><li>          
          <a href="http://radservebeer.free.fr">a</a></li><li>          
          <a href="http://radservebeer.free.fr">b</a></li><li>          
          <a href="http://radservebeer.free.fr">c</a></li><li>          
          <a href="http://radservebeer.free.fr">d</a></li>      
        </ul>             
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
        <a href="#"><b>»</b>Menu C           
          <!--[if IE 7]>
                    <!--></a>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
         <ul><li>          
          <a href="http://radservebeer.free.fr">a</a></li><li>          
          <a href="http://radservebeer.free.fr">b</a></li><li>          
          <a href="http://radservebeer.free.fr">c</a></li><li>          
          <a href="http://radservebeer.free.fr">d</a></li>      
        </ul>            
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]--></li><li>        
        <a href="#"><b>»</b>Menu D           
          <!--[if IE 7]>
                    <!--></a>          
        <!--<![endif]-->         
        <!--[if lte IE 6]>
                <table>
                <tr>
                <td>
                <![endif]-->         
         <ul><li>          
          <a href="http://radservebeer.free.fr">a</a></li><li>          
          <a href="http://radservebeer.free.fr">b</a></li><li>          
          <a href="http://radservebeer.free.fr">c</a></li><li>          
          <a href="http://radservebeer.free.fr">d</a></li>      
        </ul>        
        <!--[if lte IE 6]>
                </td>
                </tr>
                </table>
                </a>
                <![endif]-->     
      </ul>    
    </div>  
  </body>
</html>
0
chanigna Messages postés 5 Date d'inscription lundi 12 janvier 2009 Statut Membre Dernière intervention 18 février 2009
12 janv. 2009 à 14:37
ok merci je vais essyaer voir si cela fonctionne.
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses
Supprimer Liste déroulante
Good -
Good -

2 réponses