Mettre menu responsive
bobibob
-
diablo13800 Messages postés 2890 Date d'inscription Statut Membre Dernière intervention -
diablo13800 Messages postés 2890 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
alors voilà je vous présente mon menu réalisé en html avec bootstrap et j'aimerai qu'il soit responsive et étant jeune débutant je ne sais pas trop comment faire pour le rendre responsive :/
alors voilà je vous présente mon menu réalisé en html avec bootstrap et j'aimerai qu'il soit responsive et étant jeune débutant je ne sais pas trop comment faire pour le rendre responsive :/
<nav> <ul> <li><a href="index.php">Accueil</a></li> <li class="deroulant"><a href="commerceVentes.php">Commerce | Ventes</a> <ul class="sous"> <li><a href="commerceVentes.php">Commerce | Ventes</a></li> <li><a href="autresVentes.php">Autres ventes</a></li> </ul> </li> <li class="deroulant"><a href="produitsCollectes.php">Collecte | Achats</a> <ul class="sous"> <li><a href="produitsCollectes.php">Produits collectés</a></li> <li><a href="bidulesCapsules.php">Activité bidules capsules</a></li> </ul> </li> <li class="deroulant"><a href="broyage.php">Autres prestations</a> <ul class="sous"> <li><a href="broyage.php">Broyage</a></li> <li><a href="triMagnetique.php">Tri magnétique</a></li> <li><a href="criblage.php">Criblage</a></li> <li><a href="triDensimetrique.php">Tri densimétrique</a></li> <li><a href="triElectrostatique.php">Tri électrostatique</a></li> </ul> </li> <li><a href="contact.php">Contact</a></li> </ul> </nav>
A voir également:
- Mettre menu responsive
- 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
3 réponses
Bonjour,
Vous dites utiliser bootstrap, faite un tour du coté du grid system sur la doc bootstrap :
https://getbootstrap.com/docs/4.0/layout/grid/
Vous dites utiliser bootstrap, faite un tour du coté du grid system sur la doc bootstrap :
https://getbootstrap.com/docs/4.0/layout/grid/
bobibob
J'ai déjà essayé avec des col mais en vain :/
Envoyé alors ce que vous essayé pour pouvoir vous guider dans la démarche.
Car là avec le code que vous avez envoyé il n'y a aucune utilisation de boostrap.
Et vous utilisez actuellement des classes dont je ne connais pas les définitions.
Poster votre CSS.
En théorie, si dans vos classes vous utilisez des % au lieu de px pour width et height le menu sera un peu plus responsible.
Car là avec le code que vous avez envoyé il n'y a aucune utilisation de boostrap.
Et vous utilisez actuellement des classes dont je ne connais pas les définitions.
Poster votre CSS.
En théorie, si dans vos classes vous utilisez des % au lieu de px pour width et height le menu sera un peu plus responsible.
J'en ai oublié de poster le CSS ahah, voilà le CSS de mon menu :
*{
margin: 0px;
padding: 0px;
font-family: Avenir, sans-serif;
}
nav{
width: 60%;
margin: 0 auto;
position: sticky;
top: 0px;
z-index: 1001;
}
nav ul{
list-style-type: none;
}
nav ul li{
float: left;
width: 25%;
text-align: center;
}
nav ul::after{
content: "";
display: table;
clear: both;
}
nav a{
display: block;
text-decoration: none;
color: white;
background-color: rgba(135,206,250, 0.7);
border-bottom: 2px solid transparent;
padding: 10px 0px;
}
nav a:hover{
color: rgb(135,206,250);
background-color: white;
border-bottom: 2px solid lightgreen;
}
.sous{
display: none;
box-shadow: 0px 1px 2px #CCC;
background-color: white;
}
nav > ul li:hover .sous{
display: block;
}
.sous li{
float: none;
width: 100%;
text-align: left;
}
.sous a{
padding: 10px;
border-bottom: none;
}
.sous a:hover{
border-bottom: none;
color: rgb(135,206,250);
background-color: white;
}
.deroulant > a::after{
content: "▼";
font-size: 12px;
}
.sous{
display: none;
box-shadow: 0px 1px 2px #CCC;
background-color: rgba(135,206,250,0.7);
color: white;
position: absolute;
width: 100%;
z-index: 1000;
}
nav ul li{
float: left;
width: 20%;
text-align: center;
position: relative;
}
Le comportement de votre site est tout à fait normal.
Vous devez voir du coté des media query , qui vous permet d'adapter le CSS en fonction du support ( taille de l'écran par exemple ) :
https://developer.mozilla.org/fr/docs/Web/CSS/@media
Vous devez voir du coté des media query , qui vous permet d'adapter le CSS en fonction du support ( taille de l'écran par exemple ) :
https://developer.mozilla.org/fr/docs/Web/CSS/@media