5546 sujets

Sémantique web et HTML

Problème barre de recherche déroulante

Bonjour bonjour,

j'ai été tellement bien aidé la première fois, que je me permet de revenir vers vous avec une nouvelle question.

J'ai mis sur ma barre de navigation, mon menu, mais aussi mes icônes de réseaux sociaux et ma barre de recherche déroulante.
Cette dernière fonctionne parfaitement en test dans un autre endroit, mais incrusté dans ma barre de navigation elle ne se déroule pas. Voici les codes :

<nav id='menu'>
    <div class='barre'>
        <input type='checkbox'/>
            <label>&#8801;<span>Menu</span></label>
            <ul class='principal'>
            
<li><a title="Accueil" href="#">Accueil</a></li>

<li><a href='#'>Menu déroulant 1</a>
<ul class='menus'>
<li><a href='#'>Sous-menu 1</a></li>
<li><a href='#'>Sous-menu 2</a></li>
<li><a href='#'>Sous-menu 3</a></li>
<li><a href='#'>Sous-menu 4</a></li></ul></li>


<li><a href='#'>Menu déroulant 2</a>
<ul class='menus'>
<li><a href='#'>Sous-menu 1</a></li>
<li><a href='#'>Sous-menu 2</a></li>
<li><a href='#'>Sous-menu 3</a></li>
<li><a href='#'>Sous-menu 4</a></li></ul></li>


<li><a href='#'>Menu déroulant 3</a>
<ul class='menus'>
<li><a href='#'>Sous-menu 1</a></li>
<li><a href='#'>Sous-menu 2</a></li>
<li><a href='#'>Sous-menu 3</a></li>
<li><a href='#'>Sous-menu 4</a></li></ul></li>


<li><a title="Contact" href="#">Contact</a></li>


</ul>




        <div class='icons'>
            <a href="https://www.facebook.com/morganesfairy/" title="Facebook" target="_blank" rel="nofollow"><i class="socicon-facebook"></i></a>
<a href="https://www.instagram.com/morganesfairy/" title="Instagram" target="_blank" rel="nofollow"><i class="socicon-instagram"></i></a>
<a href="http://www.hellocoton.fr/mapage/morganesfairy" title="Hellocoton" target="_blank" rel="nofollow"><i class="socicon-hellocoton"></i></a>
<a href="https://plus.google.com/104635093783142325027?hl=fr" title="Google Plus" target="_blank" rel="nofollow"><i class="socicon-googleplus"></i></a>
<a href="https://fr.pinterest.com/morganesfairy/" title="Pinterest" target="_blank" rel="nofollow"><i class="socicon-pinterest"></i></a>
<a href="https://www.flickr.com/photos/148180457@N03/" title="Flickr" target="_blank" rel="nofollow"><i class="socicon-flickr">
</i></a>

<div id='top-search'>
					<a href='#'><i class='fa fa-search'/></i></a>
			</div>
			<div class='show-search'>
				<form action='/search' id='searchthis' method='get' role='search'>
					<div>
						<input id='s' name='q' placeholder='rechercher' type='text'/>
					</div>
				</form>

 </div>
</div>
</div></nav>







body {
margin: 0px;
padding-right: 0px;
padding-left: 0px;
}
.barre{
width: 1400px;
margin:0 auto;
}
#menu{
background: #F1F1F1;
color: #333;
height: 45px;
width:100%;
position: relative; 
z-index:101; 
}
#menu ul,#menu li{
margin: 0px auto;
padding:0 0;
list-style:none;
}
#menu .icons{
float:right;
}
#menu li{
float:left;
display:inline;
font: 11px Arial, sans-serif;
}
#menu ul a{
display: block;
line-height: 45px;
padding: 0 14px;
text-decoration: uppercase;
color: #333;
text-transform: uppercase;
letter-spacing: 1.5px;
}
#menu li a:hover{
color: #000;
text-decoration: none;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #E9E9E9;
}
#menu input{
display:none;
margin:0 0;
padding:0 0;
width:80px;
height:30px;
opacity:0;
cursor:pointer
}
#menu label{
font: 25px  Arial, sans-serif ;
font-weight: bold;
display:none;
width:35px;
height:35px;
line-height:45px;
text-align:center;
}
#menu label span{
font: 12px  Arial, sans-serif;
position:absolute;
left:35px;
text-transform:uppercase;
font-weight: bold;
line-height: 45px;
letter-spacing:0.5px;
}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #F1F1F1;
position: absolute;
z-index: 99;
display: none;
border: 1px solid #E9E9E9;
}
#menu ul.menus li{
display: block;
width: 100%;
font: 11px  Arial, sans-serif;
text-transform: uppercase;
border-bottom: 1px solid #E9E9E9;
}
#menu ul.menus li:last-child{
border-bottom:none;
}
#menu ul.menus a{
color: #333;
line-height: 35px;
}
#menu li:hover ul.menus{
display:block;
}
#menu ul.menus a:hover{
background: #E9E9E9;
color: #000;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.icons a{
padding: 0 15px;
margin-top: 15px;
display: inline-block;
}
.icons a:hover{
background: #E9E9E9;
color: #000;/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menu .socicon{
font-size:13px;
color: #333;
margin-top: 15px;
}
#top-search {
display: inline-block;
    width: 48px;

}

	}
	#top-search a {
    height: 55px;
    font-size: 14px;
    line-height: 55px;
    color: #fff;
    background: #353535;
    display: block;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    color: #343434;
    border-left: 1px solid #f0f0f0;
    background: transparent;
	}
	#top-search a:hover {
		color:#bcbcbc;
		
	}
	.show-search {
    position: absolute;
    top: 55px;
    right: -1px;
    display: none;
    z-index: 10000;
	}
	.show-search #searchthis input#s {
width: 190px;

}
@media screen and (max-width: 800px){ 
#menu{
position:fixed; 
z-index:101; 
}
#menu ul{
background:#F1F1F1;
position:absolute;
top:100%;
right:0;
left:0;
z-index:3;
height:auto;
display:none
}
#menu ul.menus{
width:100%;
position:static;
padding-left:20px
}
#menu li{
display:block;
float:none;
width:auto;
font: 11px  Arial, sans-serif;
 }
#menu ul a{
 display: block;
 line-height: 40px;
 padding: 0 14px;
}
#menu input,#menu label{
position:absolute;
top:0;
left:0;
display:block;
}
#menu input{
z-index:4
}
#menu input:checked + label{
color:#333;
}
#menu input:checked ~ ul{
display:block;
top: 40px;
}
.barre{
width:95%!important;
}
}
header{
padding-top:45px;
}


Un grand merci Smiley smile
Bonjour.

Pour le problème en lui-même, je ne suis pas sûre de pouvoir vous aider mais il y a déjà quelque chose qui ne va pas dans votre CSS au niveau de :
#top-search {
display: inline-block;
    width: 48px;

}

	}


Smiley smile
Modifié par Zelena (10 May 2017 - 10:26)
Bonsoir morganesfairy,

Si vous avez des difficultés à vous retrouver dans votre code (et si votre éditeur ne permet pas de réindenter les lignes tout seul), n'hésitez pas à utiliser des outils en ligne qui sont conçus tout spécialement pour Smiley smile . Pour ma part, j'aime bien DirtyMarkup, qui fonctionne avec du HTML, du CSS et du JS ; il faut simplement ne pas oublier de définir à gauche "Output > Code fragment" pour du HTML.

Concernant votre problème, je pense qu'il vient de la déclaration suivante, qui est trop générique :
#menu input {
    display: none;
    margin: 0 0;
    padding: 0 0;
    width: 80px;
    height: 30px;
    opacity: 0;
    cursor: pointer
}
En effet, elle s'applique non seulement à la case à cocher (input[type="checkbox"]) que vous utilisez pour afficher la version mobile, mais également à votre champ de recherche (input[type="text"]) qui se retrouve donc en display: none et opacity: 0.
Sujet clos
Aller à