Применить правило css, если меню открыто
Я хочу изменить цвет значка гамбургера, если меню открыто.
Я не уверен на 100%, как это сделать? Я предполагаю, что вы должны проверить, есть ли «активный» класс, а затем, если он возвращает true, выполнить код css.
Вот ссылка на сайт: http://plc.fluxeddigitalclients.co.uk/
<body>
<div class = "page-transition">
<div class = "layer"></div>
<!-- end layer -->
</div>
<!-- end page-transition -->
<nav class = "site-navigation">
<div class = "layer"></div>
<!-- end layer -->
<div class = "inner">
<ul data-splitting>
<li><a href = "/">Maison</a> <small>Retour au début</small></li>
<li><a href = "/">Le Tournoi</a> <small>A propos de l'événement</small></li>
<li><a href = "studio.html">Les Joueurs</a> <small>All About Us</small> </li>
<li><a href = "showcases.html">Le Site</a> <small>Our all projects</small> </li>
<li><a href = "blog.html">Media</a> <small>Recent posts</small> </li>
<li><a href = "contact.html">Galerie</a> <small>Say hello</small> </li>
<li><a href = "contact.html">Pro AM</a> <small>Say hello</small> </li>
<li><a href = "contact.html">Partenaires</a> <small>Say hello</small> </li>
<li><a href = "/contact">Pro AM</a> <small>Contact</small> </li>
</ul>
</div>
<!-- end inner -->
</nav>
<!-- end site-navigation -->
<div class = "social-media">
<div class = "layer"> </div>
<!-- end layer -->
<div class = "inner">
<h5>Social Share </h5>
<ul>
<li><a href = "index.html#"><i class = "fab fa-facebook-f"></i></a></li>
<li><a href = "index.html#"><i class = "fab fa-twitter"></i></a></li>
<li><a href = "index.html#"><i class = "fab fa-linkedin-in"></i></a></li>
<li><a href = "index.html#"><i class = "fab fa-google-plus-g"></i></a></li>
<li><a href = "index.html#"><i class = "fab fa-youtube"></i></a></li>
</ul>
</div>
</div>
<!-- end social-media -->
<div class = "all-cases">
<div class = "layer"> </div>
<!-- end layer -->
<div class = "inner">
<ul>
<li><a href = "index.html#">Darkness</a></li>
<li><a href = "index.html#">Goddes</a></li>
<li><a href = "index.html#">Employee</a></li>
<li><a href = "index.html#">Berry</a></li>
<li><a href = "index.html#">Roosters</a></li>
<li><a href = "index.html#">Primero</a></li>
</ul>
</div>
<!-- end inner -->
</div>
<!-- end all-cases -->
<main>
<aside class = "left-side">
<div class = "logo"> <a href = "index.html"><img src = "/themes/paris-legends-championship/assets/images/branding/paris-legends-icon.png" alt = "Image"></a> </div>
<!-- end logo -->
<div class = "hamburger" id = "hamburger">
<div class = "hamburger__line hamburger__line--01">
<div class = "hamburger__line-in hamburger__line-in--01"></div>
</div>
<div class = "hamburger__line hamburger__line--02">
<div class = "hamburger__line-in hamburger__line-in--02"></div>
</div>
<div class = "hamburger__line hamburger__line--03">
<div class = "hamburger__line-in hamburger__line-in--03"></div>
</div>
<div class = "hamburger__line hamburger__line--cross01">
<div class = "hamburger__line-in hamburger__line-in--cross01"></div>
</div>
<div class = "hamburger__line hamburger__line--cross02">
<div class = "hamburger__line-in hamburger__line-in--cross02"></div>
</div>
</div>
<!-- end hamburger -->
<div class = "follow-us"> FOLLOW US </div>
<!-- end follow-us -->
<div class = "equalizer">
<a href = "" class = "jf__link" target = "_blank">
<img src = "/themes/paris-legends-championship/assets/images/jf.png" class = "img-fluid jf__link--img" alt = "">
</a>
</div>
<!-- end equalizer -->
</aside>
<!-- end left-side -->
<div class = "all-cases-link"> <span>Leaderboard</span> <b><i class = "fa fa-table" aria-hidden = "true"></i></b> </div>
<!-- end all-cases-link -->
вот текущий css
.hamburger__line-in::after, .hamburger__line-in::before {
width: 60px;
height: 2px;
content: '';
display: block;
position: absolute;
top: 0;
background-color: #fff;
}
и я хочу изменить его на
.hamburger__line-in::after, .hamburger__line-in::before {
width: 60px;
height: 2px;
content: '';
display: block;
position: absolute;
top: 0;
background-color: #C1A473;
}
Я был бы признателен любому решению.
Куда уходит событие клика? Не можете ли вы зарегистрировать/прослушать событие щелчка и использовать этот event.target, который передается в обратном вызове, для изменения/добавления класса в элемент DOM? также вы используете jquery - похоже, есть и другие вещи, которые меняют имя класса при нажатии. Интересно, можете ли вы отредактировать этот код, сделав это - в противном случае вот коротышка для вас $('#hamburger').click(function(e) { $(e.target).toggleClass('open'); })
Как говорит Нага, CSS — это ключ. Изменение состояния наведения на «гамбургер» позволит вам изменить его, как вы описываете здесь.
просто добавьте .active { color: #yourcolor; } после первоначальных стилей бургера, как только элемент получит активный класс, он получит новые стили.
Я не очень хорошо знаком с JS, если честно. Я добавил CSS к исходному вопросу
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы действительно не «выполняете» CSS. Вы просто устанавливаете правила, которые применяют стили в зависимости от того, какие селекторы присутствуют. Прямо сейчас похоже, что ваш класс .active применяется к контейнеру, отличному от того, в котором находится гамбургер. Если вы вместо этого примените его к родителю как текущего места, где он применяется, так и гамбургера, то вы можете написать правило, которое изменяет обе вещи при применении .active. Или, в качестве альтернативы, вы можете применить .active к нескольким местам, то есть в дополнение к тому, где он применяется в настоящее время, также применить его к родителю гамбургера.
Технически вы можете использовать jQuery или просто JS для изменения свойств CSS, или, поскольку уже есть класс, который переключается на основе открытия/закрытия, вы можете просто стилизовать дочерние элементы на основе этого класса с помощью чистого CSS (вы можете захотеть обрабатывать состояния тоже вроде ховер):
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross01 *::after,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross02 *::after {
background-color: #122e1A;
}
Тестирование, кажется, лучше работает с ::before и ::after:
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross01 *::before,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross02 *::before,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross01 *::after,
.hamburger.is-opened-navi .hamburger__line.hamburger__line--cross02 *::after {
background-color: #122e1A;
}
Редактировать: приятный темно-зеленый подходит для сайта лучше, чем сплошной красный.
Для ссылки «следуй за нами», которую я сначала даже не увидел (с Ad Block Plus), это лучший кандидат для jQuery, поскольку у нее нет предков, чей класс изменяется при открытии меню. Для этого вы можете определить класс CSS, когда он активен:
.follow-us.active {
color: #C1A473;
}
И добавьте прослушиватель быстрого щелчка, который изменяет свой активный класс (поместите его в конец тела, в <script></script> непосредственно перед тегом </body>):
$('.hamburger').click(function() {
$('.follow-us').toggleClass('active');
});
Спасибо за эту отметку! Вы легенда! Как я могу сделать это для другого элемента боковой навигации, т.е. «Следуйте за нами»?
Ой Шакс. Отредактировано.
@JakeFeeley - еще одно предложение, добавьте transition: color 1.5s; в правила CSS для .follow-us (или .left-side.follow-us, поскольку у вас уже есть эти правила) - не каждый браузер будет это учитывать, но Chrome будет - возможно, есть другие версии transition, которые будут работать для цвета для разных браузеров тоже, но я проверял в Хроме. Если вы нашли ответ полезным, обязательно отметьте его как правильный ответ, чтобы другие могли его найти и чтобы никто не тратил время на решение того, что уже решено. Ваше здоровье!
пожалуйста, добавьте также css