@ledubs

Как сделать такое подчеркивание при нахождении на какой-либо основной странице?

5d6d415da8226078879006.png Как под "Начать" upd гуглил - не нашел.
  • Вопрос задан
  • 2047 просмотров
Пригласить эксперта
Ответы на вопрос 4
deniskrest
@deniskrest
Frontend, SEO
Если тебе нужно подчёркивание для страницы, на которой находишься, то я бы написал проверку на php: каждая ссылка из меню ведёт на определённую страницу. Проверяешь, совпадает ли ссылка элемента меню с адресом текущей страницы, и если да, то присваиваешь элементу меню определённый класс, стили для которого прописываешь в css. Вот и всё.

Если же у тебя сайт на каком-нибудь стандартном движке (WordPress или ModX, к примеру), то просто оформи меню через админку, и через инспектор по коду глянь, какой класс назначает для текущего пункта меню система, и для него пропиши стили.
Ответ написан
Комментировать
Тебе нужно, подчеркивание названия, когда пользователь навел курсор?
Ответ написан
@vtaeke
попробуй это

a {
	position: relative;
	color: #00a650; /*задаём цвет ссылки*/
	cursor: pointer;
	line-height: 1; /*задаём высоту строки*/
	text-decoration: none; /*убираем подчёркивание*/

}
a:after {
	display: block;
	position: absolute;
	left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */
	width: 0;/*задаём длинну линии до наведения курсора*/
	height: 2px; /*задаём ширину линии*/
	background-color: #00a650; /*задаём цвет линии*/
	content: "";
	transition: width 0.3s ease-out; /*задаём время анимации*/
}

a:hover:after,
a:focus:after {
	width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}
Ответ написан
Комментировать
@Seniorxor
Как сделать такое подчеркивание при нахождении на какой-либо основной странице?

Это называется подсветка пункта меню по якорям, если я правильно понял вопрос. Делается это через JS путем добавления класса отвечающего за модификацию элемента, при выполнении условия активации секции.
Самый простой путь при недостаточном знании JS это воспользоваться JS фреймворком fullpage.js или jquery
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы