Bonjour,
Je m'en remets à vous après moultes recherches infructueuses.
Je désire avoir sur mon site d'information un menu ayant n rubriques et 2 sous-menus(ayant x sous-rubriques):
1) l'un vertical en display;none qui disparait une fois la rubrique cliquée ou que la souris n'est plus sur cette rubrique,
2)et l'autre sous-menu qui s'affiche sous le menu principal avec ses sous-rubriques correspondantes et qui reste visible tant que la page est affichée.
Je crois que des exemples valent mieux que tout ce discours.
je cite des exemples sans arrière pensée publicitaire: lepoint.fr (sous-menu horizontal) ou lefigaro.fr (sous-menu et sous/sous-menu horizontaux)et latribune.fr ( sous-menus vertical et horizontal, mon modèle favori) .
voici mes codes à titre d'illustration,( la div sous-menu-horizontal indique l'emplacement du sous-menu horizontal)
Pourriez-vous m'aider à installer ce sous-menu horizontal et à me guider dans mes recherches ?
Merci d'avance pour vos éclaircissements.
Je m'en remets à vous après moultes recherches infructueuses.
Je désire avoir sur mon site d'information un menu ayant n rubriques et 2 sous-menus(ayant x sous-rubriques):
1) l'un vertical en display;none qui disparait une fois la rubrique cliquée ou que la souris n'est plus sur cette rubrique,
2)et l'autre sous-menu qui s'affiche sous le menu principal avec ses sous-rubriques correspondantes et qui reste visible tant que la page est affichée.
Je crois que des exemples valent mieux que tout ce discours.
je cite des exemples sans arrière pensée publicitaire: lepoint.fr (sous-menu horizontal) ou lefigaro.fr (sous-menu et sous/sous-menu horizontaux)et latribune.fr ( sous-menus vertical et horizontal, mon modèle favori) .
voici mes codes à titre d'illustration,( la div sous-menu-horizontal indique l'emplacement du sous-menu horizontal)
Pourriez-vous m'aider à installer ce sous-menu horizontal et à me guider dans mes recherches ?
Merci d'avance pour vos éclaircissements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title> ---- </title>
<link rel="stylesheet" href="2.css" />
</head>
<body >
<header>
</header>
<nav>
<ul id="menu">
<li><a href="#">Rubrique 1</a>
<ul>
<li><a href="#1.1">Sous rubrique 1.1</a></li>
<li><a href="#1.2">Sous rubrique 1.2</a></li>
</ul>
</li>
<li><a href="#">Rubrique 2</a>
<ul>
<li><a href="#2.1">Sous rubrique 2.1</a></li>
<li><a href="#2.2">Sous rubrique 2.2</a></li>
<li><a href="#2.3">Sous rubrique 2.3</a></li>
</ul>
</li>
<li><a href="#">Rubrique 3</a>
<ul>
<li><a href="#2.1">Sous rubrique 3.1</a></li>
<li><a href="#2.2">Sous rubrique 3.2</a></li>
<li><a href="#2.3">Sous rubrique 3.3</a></li>
<li><a href="#2.4">Sous rubrique 3.4</a></li>
</ul>
</li>
</ul>
</nav>
<content>
<div id="sous-menu-horizontal">
</div>
<section>
</section>
</content>
<footer>
</footer>
</body>
</html>
body
{
background-color: silver;
}
header, nav, content
{
display: block;
}
header
{
width: 100%;
height: 100px;
background-color: #e2edff;
}
nav
{
width: 100%;
height: 35px;
background-color: lime;
}
/* content
{
} */
#sous-menu-horizontal, section
{
display: inline-block;
}
#sous-menu-horizontal
{
width: 100%;
height: 30px;
background-color: red;
}
section
{
width: 100%;
height: 500px;
margin-top: -5px;
background-color: #e2d8bc;
}
footer
{
width: 100%;
height: 100px;
background-color: #bfcce2;
}
#menu, #menu ul{
padding:0;
margin:0;
list-style:none;
text-align: left;
}
#menu li{
display:inline-block;
position:relative;
}
#menu ul li{
display:inherit;
}
#menu ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu ul{
position:absolute;
max-height:0;
width:100%;
overflow:hidden;
transition: .6s all .2s;
}
#menu li:hover ul{
max-height:15em;
}
#menu li{
background: #2d30c6;
}
#menu li li{
background: #2d30c6;
}
#menu li:hover, #menu li li:hover{
background: #e2edff;
}
#menu a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#menu ul a{
padding:8px 6px;
}
#menu li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu li:hover a, #menu li li:hover a{
color:#000;
}
)