la barre de navigation d'emballage sur les petites résolutions
Je tente ma main au HTML5/CSS3 comme un processus d'apprentissage, mais j'ai du mal à créer une barre de navigation pour des liens vers d'autres sections à travers mes pages.
J'ai adapté le code à partir d'un tutoriel trouvé et ça fonctionne, mais uniquement lors de l'affichage sur une résolution de 1080p, si la largeur est plus petite, la barre des roulés sur d'autres lignes.
Comment puis-je m'assurer que la barre de navigation ne prend qu'une ligne vers le haut (rétrécit pour s'adapter), quel que soit la résolution de l'aide de l'utilisateur?
Voici mon code CSS pour la barre de navigation. Veuillez noter que, conformément nav, j'ai mis de la largeur à 33,3% et le rembourrage pour le de même afin de centre les boutons. Je ne sais pas si c'est la cause.
nav {
display:block;
position: absolute;
left:0;
white-space:nowrap;
margin: 0 auto;
width: 33.3%;
background-color:#ff6600;
padding-left: 33.3%;
padding-right: 33.3%;
}
nav ul {
margin: 0 auto;
width: 100%;
list-style: none;
display: inline;
white-space:nowrap;
}
nav ul li {
float: left;
position: relative;
white-space:nowrap;
}
nav ul li a {
display: block;
margin: 0 auto;
width: 150px;
font-size: 16px;
font-family: century gothic;
line-height: 44px;
text-align: center;
text-decoration: none;
color:#575757;
white-space:nowrap;
}
nav ul ul {
width: 200px;
position:absolute;
top:-99999px;
left:0;
opacity: 0;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
z-index:497;
background:#333;
padding: 2px;
border:1px solid #444;
border-top:none;
box-shadow:#111 0 3px 4px;
}
nav ul ul li a {
display: block;
width: 200px;
text-align: left;
padding-left: 3px;
font-size: 14px;
}
nav ul li:hover>ul{
opacity: 1;
position:absolute;
top:98%;
left:0;
}
nav ul li a:hover {
color: #fff;
background-color: #cc3300
}
nav ul li.selected a {
color: #fff;
background-color: #cc3300;
}
OriginalL'auteur user1563865 | 2012-07-30
Vous devez vous connecter pour publier un commentaire.
Vous l'a presque fait correctement. Le problème avec votre css est que
white-space: nowrap;
ne fonctionne que pour lesinline
éléments - mais vous êtes à l'aide defloat
. Flottaient les éléments sont de niveau bloc, même si vous réglezdisplay: inline;
propriété à un tel élément (elle ne sera pas appliquée). Alors - si vous remplacez votre flotte avecdisplay: inline-block;
- votrewhite-space
bien 🙂Un exemple vivant de
inline-block
s etwhite-space
peut être vu ici: http://jsfiddle.net/skip405/wzgcH/Comme pour votre méthode de centrage - il y a une meilleure solution. (Vous pouvez supprimer le
padding
et de définir la largeur appropriée), Surtout si vous utilisez inline-block. Réglez simplementtext-align: center;
sur leur parent - et vous l'aurez centré.Il fonctionne si le menu n'a qu'un seul niveau. Avec imbriqué " ul " il ne veut pas.
OriginalL'auteur skip405
Le problème est que vous êtes réglage de la
nav
largeur d'être un simple de 33,3%, le reste de rembourrage. Le petit espace disponible est alors de pousser tous les éléments en dessous de l'autre lorsque redimensionnés au-delà d'un certain point. Pour arrêter cela, vous pouvez faire deux choses, définissez la valeur liquidative de la largeur à 100% au lieu de cela, et, deuxièmement, si vous ne voulez pas qu'il redimensionner à tous, alors vous devez lui donner unmin-width
de la somme de tous lesa
éléments largeurs de les mettre ensemble. Vous devez également les plus susceptibles de lui donner unmax-width
ainsi, sauf si vous utilisez un responsive design. Voici une démo, je l'ai mis avec vos modifications de css: http://jsfiddle.net/c3HE6/OriginalL'auteur Paul Graffam