Menu horizontal déroulant
Pooulpe
Messages postés
6
Date d'inscription
Statut
Membre
Dernière intervention
-
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'essaye de créer une barre fixe avec un menu horizontal déroulant avec html/css. Pour vous donner une idée, j'essaye de faire quelque chose qui ressemble à la barre du haut du site www.betaseries.com.
Mon html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style2.css" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="topbar">
<li>
<a href="page1.html">Page1</a>
<ul>
<li><a href="souspartI1.html">PageI1</a></li>
<li><a href="souspartI2.html">PageI2</a></li>
</ul>
</li>
<li>
<a href="page2.html">Page2</a>
<ul>
<li><a href="souspartII1.html">PageII1</a></li>
<li><a href="souspartII2.html">PageII2</a></li>
</ul>
</li>
<li>
<a href="page3.html">Page3</a>
<ul>
<li><a href="souspartIII1.html">PageIII1</a></li>
<li><a href="souspartIII2.html">PageIII2</a></li>
</ul>
</li>
</ul>
</body>
</html
et mon css :
body {
margin: 0;
padding: 0;
background: black}
#topbar { /* Liste */
width:1500px;
background-color: #3197D0;
position:fixed;
padding: 15px;
}
#topbar li {
font-family: Lucida;
color:white;
font-size: 16px;
display: inline;
padding-right: 30px;
padding-left: 20px;
float : left;
}
#topbar,#topbar ul {
list-style : none;
line-height : 21px;
text-align : center;
}
#topbar ul li ul li a{
color:black;
background-color: white
}
#topbar a /* Contenu des listes */
{
display: inline;
padding : 0; /* aucune marge intérieure */
color : #fff;
text-decoration : none;
width : 144px;
}
#topbar a a/* Contenu des listes */
{
display: inline;
padding : 0; /* aucune marge intérieure */
color : #BDBDBD;
text-decoration : none;
width : 144px;
}
#topbar li ul /* Sous-listes */
{
display: block;
position: absolute;
width: 144px;
left: -999em; /* pour les cacher */
}
#topbar a:hover /* Lorsque la souris passe sur un des liens */
{
color: #3197D0;
border-radius:5px;
background: #fff; /* ... et au contraire, le fond en blanc */
}
#topbar li:hover ul, #topbar li li:hover ul, #topbar li.sfhover ul, #topbar li li
{
left: auto; /* Repositionnement normal */
}
Je bloque totalement, j'arrive plus à l'ameliorer, donc si vous avez des idées ou des conseils pour que j'avance, n'hésitez pas !
Merci !
J'essaye de créer une barre fixe avec un menu horizontal déroulant avec html/css. Pour vous donner une idée, j'essaye de faire quelque chose qui ressemble à la barre du haut du site www.betaseries.com.
Mon html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style2.css" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="topbar">
<li>
<a href="page1.html">Page1</a>
<ul>
<li><a href="souspartI1.html">PageI1</a></li>
<li><a href="souspartI2.html">PageI2</a></li>
</ul>
</li>
<li>
<a href="page2.html">Page2</a>
<ul>
<li><a href="souspartII1.html">PageII1</a></li>
<li><a href="souspartII2.html">PageII2</a></li>
</ul>
</li>
<li>
<a href="page3.html">Page3</a>
<ul>
<li><a href="souspartIII1.html">PageIII1</a></li>
<li><a href="souspartIII2.html">PageIII2</a></li>
</ul>
</li>
</ul>
</body>
</html
et mon css :
body {
margin: 0;
padding: 0;
background: black}
#topbar { /* Liste */
width:1500px;
background-color: #3197D0;
position:fixed;
padding: 15px;
}
#topbar li {
font-family: Lucida;
color:white;
font-size: 16px;
display: inline;
padding-right: 30px;
padding-left: 20px;
float : left;
}
#topbar,#topbar ul {
list-style : none;
line-height : 21px;
text-align : center;
}
#topbar ul li ul li a{
color:black;
background-color: white
}
#topbar a /* Contenu des listes */
{
display: inline;
padding : 0; /* aucune marge intérieure */
color : #fff;
text-decoration : none;
width : 144px;
}
#topbar a a/* Contenu des listes */
{
display: inline;
padding : 0; /* aucune marge intérieure */
color : #BDBDBD;
text-decoration : none;
width : 144px;
}
#topbar li ul /* Sous-listes */
{
display: block;
position: absolute;
width: 144px;
left: -999em; /* pour les cacher */
}
#topbar a:hover /* Lorsque la souris passe sur un des liens */
{
color: #3197D0;
border-radius:5px;
background: #fff; /* ... et au contraire, le fond en blanc */
}
#topbar li:hover ul, #topbar li li:hover ul, #topbar li.sfhover ul, #topbar li li
{
left: auto; /* Repositionnement normal */
}
Je bloque totalement, j'arrive plus à l'ameliorer, donc si vous avez des idées ou des conseils pour que j'avance, n'hésitez pas !
Merci !
A voir également:
- Menu horizontal déroulant
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Supprimer menu déroulant excel - Forum Excel
- Canon quick menu - Télécharger - Utilitaires
1 réponse
Salut,
Puisque tu utilises bootstrap, pourquoi ne pas réutiliser les composants qu'il propose ?
https://getbootstrap.com/components/#navbar
Bonne journée
Puisque tu utilises bootstrap, pourquoi ne pas réutiliser les composants qu'il propose ?
https://getbootstrap.com/components/#navbar
Bonne journée