Centrer un sous menu
chamoismignon Messages postés 45 Date d'inscription Statut Membre Dernière intervention - 8 mars 2025 à 07:56
- Centrer un sous menu
- Menu déroulant excel - Guide
- Windows 11 menu démarrer classique - Guide
- Canon quick menu - Télécharger - Utilitaires
- Réinitialiser menu démarrer windows 10 - Guide
- Windows 11 menu contextuel classique - 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="/formpage.html" target="_blank"></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 !