В шапке есть меню, в котором выбранная страница выделяется нижней рамкой, как мне имея один CSS файл менять это выделение исходя из страницы ? Т.е. что бы при открытии страницы "Продукция" красная линия была уже под этим пунктом меню ?
2 ответа
Имея только CSS, этого делать невозможно.. Нужно добавить нужный класс к каждой странице в котором пользователь находится, сделать следующим образом
просто создать класс .active
где те же самые стили и добавлять активному элементу.
Как например в наипростейшем простейшем примере внизу:
$('li').on('click', function() {
$('.active').add(this).toggleClass('active');
});
body {
font-family: Arial;
}
ul li {
position: relative;
display: inline-block;
text-transform: uppercase;
margin-left: 5px;
border: none;
cursor: pointer;
}
ul li:hover {
border-bottom: 2px solid red;
}
.active {
border-bottom: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class='active'>Главная</li>
<li>Продукция</li>
<li>О нас</li>
<li>Личный кабинет</li>
</ul>
Но для многостраничников желательно выносить меню в отдельный файл и манипулировать им с помощью принятого контекста от сервера.
-
А как происходит запоминание элемента, по которому кликнули? откуда другая страница знает, что именно этот элемент меню должен быть активным?– NeedH821 янв 2018 в 15:21
-
В другой странице указать данный класс с этим активным меню.. Просто с помощью CSS файла этого сделать невозможно ведь.. Если сайт многостраничный, то хедер желательно поместить в один отдельный файл, и там с помощью принятого от сервера контекста менять меню.. Типа получили контекст menu='main', что-то типа следующего:
<li class="menu {% if menu == 'main' %} active {% endif %}">Главная</li>
и так далее..– E1mir21 янв 2018 в 15:28
Отлично работает, спасибо за помощь!
$('li').on('click', function() {
$('.active').add(this).toggleClass('active');
});
body {
font-family: Arial;
}
ul li {
position: relative;
display: inline-block;
text-transform: uppercase;
margin-left: 5px;
border: none;
cursor: pointer;
}
ul li:hover {
border-bottom: 2px solid red;
}
.active {
border-bottom: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class='active'>Главная</li>
<li>Продукция</li>
<li>О нас</li>
<li>Личный кабинет</li>
</ul>