Centrer un sous menu
chamoismignon Messages postés 80 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je n'arrive pas à centrer un sous-menu dont voici le HTML
<nav> <ul class="nav"> <li><a href="#jaune">Menu1</a></li> <li><a href="#">Menu2</a> <ul> <li><a href="#green">Sous Menu1</a></li> <li><a href="#grey">Sous Menu 2</a></li> </ul> </li> <li><a href="#rocknroll">Menu3</a></li> <li><a href="Contact/formpage.html" target="_blank">Contact</a></li> </ul> </nav>
et les CSS
.nav li a
{
display: inline-block;
color: white;
font-family: 'helvetica_now_text_black','Raleway', sans-serif;
font-size: 24px;
transition: all 0.3s;
transform: scale(0.8);
opacity: 1;
white-space: nowrap;
text-align:center;
text-shadow: 1px 1px 2px black;
}
Merci pour votre aide, bonne journée ;)
- Centrer un sous menu
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
4 réponses
Salut,
Je ne comprends pas ta question, c'est le comportement normal d'un sous-menu qu'il soit décalé à droite par rapport au menu parent.
Bonjour Diablo76,
Peut-être que je m'explique mal (j'en suis certain :) Un petit screenshot pour être clair : sous_Menu_a et sous_Menu_b ne sont pas centrés sur ma page par rapport à Menu2, il y a un décalage à gauche sur sous_Menu_a.
pour le coup, c'est pas terrible : / Comment puis-je y remédier ?
Merci beaucoup et bonne soirée.
Ah ok, car dans l'exemple que tu donnes plus haut, tu imbriques une liste non ordonnée dans une liste non ordonnée, ce qui donne et c'est normal :
Maintenant pour une présentation comme ta copie d'écran :
Code Html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
</head>
<body>
<header></header>
<nav>
<ul class="nav">
<div>
<li><a href="#">Menu1</a></li>
</div>
<div>
<li><a href="#">Menu2</a>
<li><a href="#green">Sous Menu1</a></li>
<li><a href="#grey">Sous Menu 2</a></li>
</div>
<div>
<li><a href="#">Menu3</a></li>
</div>
</ul>
</nav>
<footer></footer>
</body>
</html>
Code Css :
.nav {
display: flex;
justify-content: space-around;
padding: 0;
margin: 0;
list-style-type: none;
text-align: center;
}
.nav li a {
text-decoration: none;
color: #000000;
}
Resultat :
Ton décalage est surement dû à un problème de padding ou/et de margin.
Bonjour Diablo76,
Merci pour tes réponses, c'est super sympa. Malheureusement, j'ai oublié une chose :(
La capture était pour te montrer le centrage d'un sous menu, ce que la capture ne montre pas du tout c'est que la barre de nav est fixée à droite, avec cette animation :
<script>
$(document).ready(function(){
$('.nav').hide();
});
$(window).load(function(){
$('.nav').fadeIn('slow');
$(".nav").delay(700).animate({
right:'10px',
opacity:1
},1200,'swing');
});
</script>
Peut-être serait-il possible de centrer les sous-menu "à la main" avec un margin, ce serait plus simple ? Est-ce possible ?
Bonne soirée ;)
Bonjour Diablo76,
voici le HTML
<nav> <ul class="nav"> <li><a href="#jaune">Menu 1</a></li> <li> <a href="#">Menu 2</a> <ul> <li><a href="#green">Sous Menu 1</a></li> <li><a href="#glauque">Sous Menu 2</a></li> </ul> </li> <li><a href="#rocknroll">Menu 3</a></li> <li><a href="Contact/formpage.html" target="_blank">Contact</a></li> </ul> </nav>
Et le CSS
.nav
{
margin: 0;
padding: 10px 10px 0 0;
animation-duration: 1s;
animation-name: slidein;
text-align: right;
left: -3000px;
position: fixed;
list-style-type: none;
}
@keyframes slidein
{
from
{
font-size: 12px;
}
75%
{
font-size: 60px;
}
to
{
font-size: 20px;
}
}
.nav ul, .nav li
{
margin: 0;
padding: 0;
}
.nav li
{
display: inline;
position: relative;
list-style: none;
}
.nav li a
{
display: inline-block;
color: white;
font-family: 'helvetica_now_text_black','Raleway', sans-serif;
font-size: 24px;
transition: all 0.3s;
transform: scale(0.8);
opacity: 1;
-webkit-text-stroke: 0.8px black;
white-space: nowrap;
min-width: 3em;
text-align:center;
}
.nav li a:hover
{
color: white;
transform: scale(1.2);
opacity: 0.5;
}
.nav li ul
{
display: none;
}
.nav li:hover ul
{
z-index: 99999;
display: block;
position: absolute;
top: 100%;
right: 0;
}
Pour info, le slidein ne "fonctionne" plus.
Merci pour ton aide ;)
Bon week-end !