J'ai un menu de barre de navigation verticale avec 2 blocs. Le premier est la navigation avec des icônes, le second est le texte du menu. Ils ont des couleurs de fond différentes. Comment puis-je créer une couleur d'arrière-plan pour deux blocs de navigation actifs? conception du menu
<div class="menu__icons">
<ul class="menu__list">
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item" href="#">First</a></li>
<li><a class="menu__item" href="#">Second</a></li>
<li><a class="menu__item" href="#">Third</a></li>
<li><a class="menu__item" href="#">Fourth</a></li>
</ul>
</div>
</div>
3 Réponses :
D'après ce que je comprends, prenez la classe active pour les deux blocs li et essayez d'utiliser une police, une icône svg ou des images d'arrière-plan transparentes au lieu d'images de bloc
<div class="menu__icons">
<ul class="menu__list">
<li><a class="menu__item active" href="#">
<img src="https://img.icons8.com/material/24/000000/tailoring-for-men.png">
</a></li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item active" href="#">First</a></li>
</ul>
</div>
.menu__list .active {
background-color: red;
}
C'est faisable en utilisant jQuery.
En supposant que vous ayez le même nombre d'éléments de liste dans les deux blocs,
.active{
/**your style**/
}
.active > a{
}
.active img{
}
ajoute également la classe .active en css et donne le style nécessaire à éléments li aussi
$(function(){
$('.menu__list li').on('click', function() {
var idx = $(this).index();
$('.menu__list li').removeClass('active');
$('.menu__list li:nth-child(' + idx + ')').addClass('active');
});
});
En gros, si vous voulez basculer .active et que vous ne voulez pas deux balises distinctes de liste.
Notez que font-awesome est à des fins de démonstration uniquement.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navigation-menu">
<ul class="menu__list list-unstyled">
<li class="menu__item active">
<a href="#">
<div class="menu__icon">
<i class="fa fa-tachometer-alt"></i>
</div>
<div class="menu__title">Main Dashboard</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-user"></i>
</div>
<div class="menu__title">Profile</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-bell"></i>
</div>
<div class="menu__title">Finances</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-calendar"></i>
</div>
<div class="menu__title">Titles</div>
</a>
</li>
</ul>
</nav>
.menu__item {
width: 250px;
height: 50px;
text-align: left;
}
.menu__item.active {
background-color: #e9ebfd;
}
.menu__item.active .menu__icon {
background-color: #e9ebfd;
border-left: 4px solid #2c39ec;
}
.menu__item.active .menu__title {
background-color: #e9ebfd;
}
.menu__item a:hover {
text-decoration: none;
}
.menu__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #fafafa;
color: #2c39ec;
}
.menu__title {
display: inline-block;
padding-left: 20px;
color: #777777;
}
Violon associé https://jsfiddle.net/mhrabiee/dojL9get/28/
Je t'en prie. juste attention aux unités (par exemple largeur: 250px) est uniquement pour la démo. dans votre projet, c'est peut-être autre chose. Vous pouvez également remplacer vos propres icônes de conception par une police géniale.
Pouvez-vous s'il vous plaît coller tout votre code HTML ici. Votre problème n'est pas encore bien défini.
@ibnelaiq a ajouté, mais je ne sais toujours pas si cette bonne solution est ou non
Voulez-vous définir les deux arrière-plans sur la même couleur ou voulez-vous que ce soit comme dans l'image? Votre problème n'est pas clair
@Screenload pour être comme dans l'image. Lorsque l'élément est actif, l'icône et le texte doivent avoir une couleur d'arrière-plan