Подчеркивание ссылок меню

@Tansegrity · Регистрация: 27.05.2014

Студворк — интернет-сервис помощи студентам

Привет. Есть меню. Активная страница (текущая) меню должна иметь подчеркивание (как на картинке). Все остальные ссылки должны подчеркиваться при наведении курсора. Подчеркивание должно быть на 40px ниже от стандартного.

CSS
1
border-bottom:2px solid #676a6c;

Делаю так, но сместить подчеркивание вниз не могу.
Как решить задачу?
Спасибо.

@Fedor92 · 07.10.2014, 18:34

CSS
1
2
a{border-bottom:2px solid #676a6c;} 
a:hover{border-bottom: 2px solid 676a6c; padding-bottom:40px}

Как вариант...

@Tansegrity · 07.10.2014, 18:38 **[ТС]**

Не выходит. Все ссылки подчеркнутые, а при наведении подчеркивание исчезает.

@Fedor92 · 07.10.2014, 18:45

Да ладно...

@ludmila-sv · 07.10.2014, 22:46

CSS
1
2
a {border-bottom:2px solid transparent;  padding-bottom:40px;} 
a:hover {border-bottom: 2px solid 676a6c;}

Сообщение от Tansegrity

Активная страница (текущая) меню должна иметь подчеркивание (как на картинке).

Это только ява-скриптом.
При наведении на пункт меню подчеркивание должно перемещаться от ссылки текущую страницу к той, на которую навели?

@vovich_l · 07.10.2014, 22:55

Попробуй так

CSS
1
2
a:hover
    box-shadow:0 0 0 -40px #676a6c;

@ludmila-sv · 07.10.2014, 23:57

Примерный скрипт для подчеркивания текущей ссылки:

HTML5
1
2
3
4
5
6
7
8
<div id="menu">
<a href="index1.html" id="a1">HOME</a>
<a href="index2.html" id="a2">ABOUT</a>
<a href="index3.html" id="a3">SERVICES</a>
<a href="index4.html" id="a4">GALLEGY</a>
<a href="index5.html" id="a5">BLOG</a>
<a href="index6.html" id="a6">CONTACT</a>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var current_page;
 
if (window.location.href == "http://yoursite.ru/index1.html") {current_page = document.getElementById('a1');}
else if (window.location.href == "http://yoursite.ru/index2.html") {current_page = document.getElementById('a2');}
и т.д.
else {current_page = document.getElementById('a6');}
 
current_page.style.borderBottom = "2px solid #676a6c";
 
var menu_links = document.getElementById('menu').getElementsByTagName('a');
 
for(var i = 0; i< menu_links.length; i++){
  menu_links[i].onmouseover = function() {
   this.style.borderBottom = "2px solid #676a6c"; 
   if(this!=current_page) {
     current_page.style.borderBottom = "2px solid transparent";
   }
  }
  menu_links[i].onmouseout = function() {
   this.style.borderBottom = "2px solid transparent"; 
   if(this!=current_page) {
     current_page.style.borderBottom = "2px solid #676a6c";
   }
  }
}

@Fedor92 · 08.10.2014, 00:20

ludmila-sv, немного не так... У Вас получился вариант, который предложил я только на css... Как я начинаю понимать автору надо зафиксировать подчёркивание на первой ссылке...

@ludmila-sv · 08.10.2014, 00:26

Не на первой ссылке, а на ссылке, которая соответствует текущей странице. Поэтому и нужен js - силами css текущую страницу отловить невозможно.

Т.е., если вы, например, находитеcь в галерее, то и подчеркнуто должно быть gallery.

@Fedor92 · 08.10.2014, 00:34

Я и не спорю, что отлавливать подчёркивание необходимо js-кодом... Сам в своё время намучился с макетами, которые дизайнеры любят наворачивать разными деталями... Просто из любопытства заменил одну из ссылок в Вашем скрипте на адрес своей локальной страницы, но почему-то в меню страница никак не выделяется хотя является активной... Вы не подумайте я к Вам не цепляюсь просто праздное любопытство...

@ludmila-sv · 08.10.2014, 05:10

Скрипт рабочий. Но адреса надо действительно прописывать аккуратно. Т.е. локальный адрес должен быть какой-то такой:
file:///D:/My%20Documents/My%20Webs/... и т.д. ... /имя-файла.html

Т.е. адрес должен быть полный, а не просто имя файла.

@Fedor92 · 08.10.2014, 12:18

Ну да я так и пробовал... Наверно руки кривые...)))

@ludmila-sv · 08.10.2014, 15:05

Открываете нужную страницу в браузере, копируете всё, что находится в адресной строке, и вставляете вместо, скажем, http://yoursite.ru/index1.html - должно заработать.

А, да - "и т.д." из скрипта уберите

@Fedor92 · 08.10.2014, 15:17

Я в принципе так и вставлял адрес страницы... Никак...

Ни в одном браузере...

@Tansegrity · 09.10.2014, 05:21 **[ТС]**

ludmila-sv, увидел твой код на js и решил написать собственный скрипт. Все получилось, но твой код намного лучше. Скопировал и вставил. 4 часа работы коту под хвост. JS знаю только по книжкам, практики мало. Как научиться писать хороший код на JS?

@ludmila-sv · 09.10.2014, 13:38

Попрактиковаться можно тут http://learn.javascript.ru/
Там к каждой главе - задачи с решениями. И можно задавать вопросы к каждой главе.

@ГригРо · 19.02.2019, 17:40

Побробуйте этот вариант
.zzz {
box-shadow: inset 0 -5px 0px 0px #fb565a;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Tansegrity 0 / 0 / 0 Регистрация: 27.05.2014 Сообщений: 34
	07.10.2014, 18:38 [ТС]
	Не выходит. Все ссылки подчеркнутые, а при наведении подчеркивание исчезает. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	08.10.2014, 00:20
	ludmila-sv, немного не так... У Вас получился вариант, который предложил я только на css... Как я начинаю понимать автору надо зафиксировать подчёркивание на первой ссылке... 0

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	08.10.2014, 00:26
	Не на первой ссылке, а на ссылке, которая соответствует текущей странице. Поэтому и нужен js - силами css текущую страницу отловить невозможно. Т.е., если вы, например, находитеcь в галерее, то и подчеркнуто должно быть gallery. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	08.10.2014, 00:34
	Я и не спорю, что отлавливать подчёркивание необходимо js-кодом... Сам в своё время намучился с макетами, которые дизайнеры любят наворачивать разными деталями... Просто из любопытства заменил одну из ссылок в Вашем скрипте на адрес своей локальной страницы, но почему-то в меню страница никак не выделяется хотя является активной... Вы не подумайте я к Вам не цепляюсь просто праздное любопытство... 0

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	08.10.2014, 05:10
	Скрипт рабочий. Но адреса надо действительно прописывать аккуратно. Т.е. локальный адрес должен быть какой-то такой: file:///D:/My%20Documents/My%20Webs/... и т.д. ... /имя-файла.html Т.е. адрес должен быть полный, а не просто имя файла. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	08.10.2014, 12:18
	Ну да я так и пробовал... Наверно руки кривые...))) 0

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	08.10.2014, 15:05
	Открываете нужную страницу в браузере, копируете всё, что находится в адресной строке, и вставляете вместо, скажем, http://yoursite.ru/index1.html - должно заработать. А, да - "и т.д." из скрипта уберите 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	08.10.2014, 15:17
	Я в принципе так и вставлял адрес страницы... Никак... Ни в одном браузере... 0

@Tansegrity 0 / 0 / 0 Регистрация: 27.05.2014 Сообщений: 34
	09.10.2014, 05:21 [ТС]
	ludmila-sv, увидел твой код на js и решил написать собственный скрипт. Все получилось, но твой код намного лучше. Скопировал и вставил. 4 часа работы коту под хвост. JS знаю только по книжкам, практики мало. Как научиться писать хороший код на JS? 0

@ludmila-sv 279 / 279 / 62 Регистрация: 28.08.2014 Сообщений: 432
	09.10.2014, 13:38
	Попрактиковаться можно тут http://learn.javascript.ru/ Там к каждой главе - задачи с решениями. И можно задавать вопросы к каждой главе. 1

@ГригРо 0 / 0 / 0 Регистрация: 19.02.2019 Сообщений: 1
	19.02.2019, 17:40
	Побробуйте этот вариант .zzz { box-shadow: inset 0 -5px 0px 0px #fb565a; } 0