Menu déroulant avec des leins
chanigna
-
chanigna Messages postés 10 Statut Membre -
chanigna Messages postés 10 Statut Membre -
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.
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:
- Menu déroulant avec des leins
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Enlever menu déroulant excel ✓ - Forum Word
- Canon quick menu - Télécharger - Utilitaires
5 réponses
SALUT
En voila un tu adapteras a tes besoins
ou si tu prefert un accordeon en css
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>
Merci Beacoup mais cela me semble très compliqué. ???????????
c est le plus simple possible !! il ni as que du html et du css !!
c est le plus simple possible !! il ni as que du html et du css !!
ok !
la ce sont 2 pages complete !!
donc lequel des 2 tu prefert ?
la ce sont 2 pages complete !!
donc lequel des 2 tu prefert ?
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
VOILA
TU remplace les http://radservebeer.free.fr par les liens vers les page que tu veux
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>
