Comment faire apparaitre un 2ème menu ?
Bonjour,
Dans le site que je confectionne le but est quand on passe la souris sur l'une des cases du menu horizontal situé en haut, cela fait apparaitre un autre menu mais plus loin, situé sur le coté gauche de la page et vertical. Quand on clic sur l'une des cases du menu horizontal le menu vertical reste apparent. Ensuite quand on passe la souris sur l'un des onglets de ce nouveau menu vertical le contenu apparait dans le centre de la page.
Je sens que cela ne va pas être simple à expliquerdonc je viens de faire un petit dessin en espérant que mon charabia soit plus clair. http://cjoint.com/data/ivose3WsdA.htm
Pour l'instant dans la création j'ai fait le menu horizontal. Et là je suis bloqué car je ne vois pas du tout quelle est la marche à suivre pour la suite.
Comment créer ce menu vertical avec les critères ci-dessus ?
Voici les codes de ce que j'ai fait pour l'instant.
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>titre</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="../AC_RunActiveContent.js" language="javascript"></script>
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design11.css"/>
</head>
<body>
<div class="titre">
<h1>gros titre</h1>
<h2>petit titre</h2><br>
</div>
<div class="contenu">
<div class="menu">
<ul>
<li class="logo_menu2"><img src="logo_menu2.jpg" /></li>
<li><a href="#" title="111 111111111">111 11111111</a></li>
<li><a href="#" title="222 22222 22 222">222 22222 22 222</a></li>
<li><a href="#" title="33333">33333</a></li>
<li><a href="#" title="444444444444">444444444444</a></li>
<li><a href="#" title="5555555 5555555555">5555555 5555555555</a></li>
<li><a href="#" title="66 666666">66 666666</a></li>
<li><a href="#" title="7777777777">7777777777</a></li>
<li><a href="#" title="8888888">8888888</a></li>
</ul>
</div>
</div>
</body>
</html>
css
.titre
{
font-family:"Times New Roman", "Arial Black", Arial, Verdana, serif;
text-align:center;
width:1100px;
margin:auto;
}
.contenu
{
width: 1100px;
margin:auto;
}
.menu
{
margin-left:10%;
}
.menu li
{
float: left ;
border: 1px solid #000000 ;
background-image:url(degrade_bleu5.gif);
font-size:15px;
list-style: none ;
margin-left:3px;
}
.menu li a
{
color: #fff ;
text-align: center ;
text-decoration: none ;
display:block;
padding:3px;
}
.menu li a:hover, #menu a:focus, #menu a:active
{
background-image:url(fond.gif);
text-decoration: none ;
}
.menu li.logo_menu2
{
background-image:none;
border: none ;
margin-top:-2%;
padding:3px;
margin-left:3px;
}
Répondre avec citation
Partager