Dans ce tutoriel, nous allons créer un menu de navigation avec une barre de recherche et un menu déroulant en utilisant HTML et CSS.
Code HTML
Le menu de navigation est constituée d'une liste non ordonnée (.nav) contenant divers types d'éléments à l'intérieur :
- Les éléments de la liste (li) qui contiennent des liens normaux n'ont pas d'id/class.
- #settings contient un lien basé sur une image.
- #search contient le champ de recherche ainsi qu'un bouton de validation.
- #options contient un lien ainsi qu'une liste non ordonnée (.subnav) qui agit comme une liste déroulante.
À la fin, nous incluons prefixfree qui nous permet de n'utiliser partout que des propriétés CSS sans préfixe.
<ul class="nav">
<li id="settings">
<a href="#"><img src="settings.png" /></a>
</li>
<li>
<a href="#">Application</a>
</li>
<li>
<a href="#">Board</a>
</li>
<li id="search">
<form action="" method="get">
<input type="text" name="search_text" id="search_text" placeholder="Search"/>
<input type="button" name="search_button" id="search_button"></a>
</form>
</li>
<li id="options">
<a href="#">Options</a>
<ul class="subnav">
<li><a href="#">Settings</a></li>
<li><a href="#">Application</a></li>
<li><a href="#">Board</a></li>
<li><a href="#">Options</a></li>
</ul>
</li>
</ul>
<script src="prefixfree-1.0.7.js" type="text/javascript"></script>
CSS
1. Styles de base
@import url(https://fonts.googleapis.com/css?family=Montserrat);
* {
margin: 0;
padding: 0;
}
Nous commençons par une réinitialisation CSS de base et importons une police personnalisée "Montserrat" de Google Fonts.
2. Navigation et éléments de liste
.nav {
background: #232323;
height: 60px;
display: inline-block;
}
.nav li {
float: left;
list-style-type: none;
position: relative;
}
L'élément de navigation principal a un fond gris foncé et une hauteur fixe. Les éléments de la liste sont flottés à gauche et sont positionnés de manière relative afin de pouvoir contenir le menu déroulant qui sera positionné de manière absolue par la suite.
3. Les liens
.nav li a {
font-size: 16px;
color: white;
display: block;
line-height: 60px;
padding: 0 26px;
text-decoration: none;
border-left: 1px solid #2e2e2e;
font-family: Montserrat, sans-serif;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
background-color: #2e2e2e;
}
#settings a {
padding: 18px;
height: 24px;
font-size: 10px;
line-height: 24px;
}
Les liens ont un style de base. Ils utilisent la police Montserrat que nous avons importée précédemment de Google Fonts. Un subtil reflet blanc est ajouté pour rendre le texte uniforme et gras. Les liens ont une hauteur de ligne de 60px, ce qui est identique à celle de la classe .nav.
Les liens ont également un effet de survol où le fond devient une version plus claire du fond gris.
Le lien #settings contient une image et sa disposition est donc ajustée pour que l'icône des paramètres apparaisse au centre.
4. Barre de recherche
#search {
width: 357px;
margin: 4px;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
#search_text:focus {
background: rgb(64, 151, 119);
}
#search_button {
border: 0 none;
background: #1f7f5c url(search.png) center no-repeat;
width: 60px;
float: left;
padding: 0;
text-align: center;
height: 52px;
cursor: pointer;
}
L'élément #search a une largeur fixe et est entouré d'une petite marge de 4px.
#search_text est flottant vers la gauche et est doté d'un fond vert qui s'anime pour devenir plus clair au survol.
Le bouton #search_button est également décalé vers la gauche pour s'aligner horizontalement sur l'élément #search_text. Il utilise une icône de recherche comme arrière-plan et est positionné en son centre.
Le style du placeholder est délicat. Il apparaît en gris sur certains navigateurs. Cette réponse sur Stackoverflow donne un aperçu complet de la façon de procéder.
5. Menu déroulant
#options a{
border-left: 0 none;
}
#options>a {
background-image: url(triangle.png);
background-position: 85% center;
background-repeat: no-repeat;
padding-right: 42px;
}
.subnav {
visibility: hidden;
position: absolute;
top: 110%;
right: 0;
width: 200px;
height: auto;
opacity: 0;
transition: all 0.1s;
background: #232323;
}
.subnav li {
float: none;
}
.subnav li a {
border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
visibility: visible;
top: 100%;
opacity: 1;
}
#options qui contient une liste déroulante reçoit une icône en forme de triangle comme arrière-plan à droite pour la rendre plus intuitive.
.subnav est masqué par défaut en utilisant une combinaison de propriétés CSS de visibilité et d'opacité. Il est positionné à 110 % du haut. Au survol, le haut passe à 100 % avec les propriétés d'opacité et de visibilité, ce qui donne un bel effet de survol au menu déroulant.
Excellent ! Le tutoriel est terminé ! Jetez un coup d'œil à l'image ci-dessous pour voir à quoi ressemble notre menu de navigation final avec barre de recherche et menu déroulant.
Conclusion
Dans ce tutoriel, nous avons créer un menu de navigation avec une barre de recherche et un menu déroulant en utilisant HTML et CSS.
J'espère que vous avez apprécié ce tutoriel et que vous avez appris quelque chose de nouveau.
