0
Voici mon codepen: http://codepen.io/beckbeach/pen/jBJByz?editors=1100Mettre en évidence l'état actif des parents lorsque l'enfant est sélectionné
J'ai une barre de navigation qui utilise Stylus (css). Lorsqu'un enfant est sélectionné dans la barre de navigation, je veux que le parent soit souligné. Exemple: lorsque vous passez la souris sur À propos de et que vous allez dans le menu enfant, je veux que l'option À propos de soit soulignée.
mon Stylus:
heading-color = hsl(262, 17%, 24%);
text-color = #7d809f;
accent-color = hsla(349, 85%, 55%, 1);
link-color = #ec1019;
link-color2 = #790000;
* {
font-family: Helvetica;
}
.theme-a {
p {
color: text-color;
}
h1, h2, h3, h4, h5, h6 {
color: heading-color;
}
a {
color: link-color;
&:hover {
color: link-color2;
}
}
}
nav {
@extends .theme-a;
border-bottom: 1px solid rgba(0,0,0,.0785);
background: white;
height: 60px;
width: 100%;
display: flex;
color: link-color;
padding: 0 30px;
flex-direction: row;
justify-contnent: flex-start;
align-items: center;
@media screen and (max-width: 1200px) {
padding-left: calc(((100% - 1200px)/2) + 30px);
padding-right: calc(((100% - 1200px)/2) + 30px);
}
p {
margin: 0;
}
a {
text-decoration: none;
}
}
.caret {
position: relative;
cursor: pointer;
&:before {
content: '';
position: absolute;
top: 25%;
left: 8px;
border-top: 6px solid link-color;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
&:after {
content: '';
position: absolute;
top: 25%;
left: 9px;
border-top: 5px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
}
// TODO: Cleanup.
.Navbar {
&_nav-link {
margin: 0 5rem 0 0;
}
&_right {
display: flex;
flex-direction: row;
margin: 0 auto;
* {
border-top: 18px solid rgba(0,0,0,0);
border-bottom: 18px solid rgba(0,0,0,0);
}
.Dropdown-parent {
border-top: 18px solid rgba(0,0,0,0);
border-bottom: 18px solid rgba(0,0,0,0);
height: 100%;
margin: 0 5rem 0 0;
.Dropdown-box {
display: none;
width: 100%;
position: absolute;
top: 55px;
left: 0;
z-index: 100;
background: #f2f2f2;
padding: 0 0 0 5rem;
}
&:hover {
* {
border-top: 12px solid rgba(0,0,0,0);
border-bottom: 12px solid rgba(0,0,0,0);
}
> .Dropdown-box {
display: flex;
flex-direction: row;
}
}
> .Dropdown-box:hover {
display: flex;
flex-direction: row;
}
}
}
}