Le Responsive design, mise en page CSS menu position chevauche en-tête logo
Je le veux ainsi, lorsque la fenêtre est 800px
large ou en dessous se cache le menu <div>
et montre la icône de menu ☰ et en cliquant sur l'icône, je veux que le menu apparaisse dans une mise en page soignée, de sorte qu'un iPhone peut afficher à 320px
,
C'est mon HTML.
<div id="header">
<div class="wrap">
<div id="logo">
<p>LOGO HERE</p>
</div><!--logo-->
<div id="menu_wrapper">
<ul id="nav">
<div id="homeBtn"><a href="index.php"><span id="homeBtnImg"></span></a></div>
<li><a href="#">WORK</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">ABOUT</a></li>
<li id="end"><a href="#">CONTACT</a></li>
</ul>
</div>
</div><!--wrap-->
</div><!--header-->
Aussi comme un démo violon
Vous gardez breakign la chose comment? Comment est-il censé ressembler? Vous devez nous donner un exemple à cause d'une "mise en page soignée" peut être n'importe quoi..
Mise à jour de ma réponse basé sur la conception de l'image.
Édité question, merci de revenir si ce n'est pas correct
Mise à jour de ma réponse basé sur la conception de l'image.
Édité question, merci de revenir si ce n'est pas correct
OriginalL'auteur Stephen Jackson | 2013-10-29
Vous devez vous connecter pour publier un commentaire.
Je crois que je comprends le problème assez pour offrir une solution.
En position absolue et éléments flottants peuvent se chevaucher. En cliquant sur le ☰ l'élément est donné
float: right
qui sera également donner à l'élémentdisplay: block
, ce qui signifie qu'il prend100%
de la largeur et pousse l'ensemble de la verticale de navigation vers la gauche vers le logo. Un autre problème se pose en ce que le#logo
est rendu sur le haut du menu (lez-index
ici n'est pas de travail), de sorte que le ☰ est ne voit plus l' cliquez sur en raison d'un autre élément en cours de rendu sur le dessus.z-index
ne fonctionne pas parce que les éléments en position de créer un nouveau contexte d'empilement - voir http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ pour plus d'informations à ce sujet.Le CSS
float
ne devrait pas être nécessaire ici, et pourrait être remplacé parinline-block
outable-cell
valeurs d'affichage. J'ai également suppriméz-index
dans ma démo.Enfin, j'ai changé le
$(window).resize()
calcul pour supprimer le de navigation vertical classe à la même largeur que le@media
requête puisqu'il n'y a100px
de largeur lorsqu'déjà un menu vertical pourraient disparaître avant de changer à l'horizontale.Mise à jour de réponse (basé sur la demande conception)
Avec l'ajout de renseignements, cette solution peut être beaucoup plus propre et je peux aussi supprimer le
display: table-cell
à partir de l'original de la réplique (à gauche ci-dessous).mise à Jour de la démo
HTML
CSS
JavaScript
Le même que l'original de réponse ci-dessous.
Réponse originale à cette question
Voir démo ou le code ci-dessous.
HTML
CSS
JavaScript
pour une raison quelconque, mon icône de menu n'est pas activer le menu ? real-creative.co.uk/new/demo3.php
Quel navigateur utilisez-vous? Il travaille pour moi dans Chrome 31
OriginalL'auteur andyb
Vous devez utiliser des requêtes de média. quelque chose comme ceci:
OriginalL'auteur Miquel Las Heras