Подсвечивание активной ссылки меню с помощью javascript
1. Постановка задачи.
Условия:
Есть блок меню
Код:
<div id="menu">
<ul>
<li>
<a class="active_menu" href="http://test.into.by/">Главная</a>
</li>
<li>
<a href="?module=articles">Статьи</a>
</li>
<li>
<a href="?module=forum">Форум</a>
</li>
</ul>
</div>
Нужно, чтобы класс "active_menu" перемещался по тегам <a>
в соответствии с заложенным в них ссылками href="url"
2. Реализация.
Делай раз.
Поместите в заголовок <head>
Код:
Делай два.*
Размещаем в нужном месте элементы меню без классов
Код:
<div id="menu">
<ul>
<li>
<a href="http://test.into.by/">Главная</a>
</li>
<li>
<a href="?module=articles">Статьи</a>
</li>
<li>
<a href="?module=forum">Форум</a>
</li>
</ul>
</div>
Делай три.
Чтобы код работал каждый раз при перезагрузке всей страницы, добавим перед тегом
</body>
Код:
<script type="text/javascript">shineLinks('menu');</script>
Всё. Теперь нужно добавить класс "active_menu" в css файл.
Равно как и форматы id="menu", теги
<ul>
и <li>
.Пример горизонтального меню:
Код:
#menu {
float: left;
width: 700px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#menu ul li a {
float: left;
display: block;
width: 130px;
height: 50px;
padding: 17px 10px 0 0;
margin: 0 30px 0 0 ;
font-size: 13px;
text-align: center;
text-decoration: none;
color: #6d450f;
font-weight: bold;
outline: none;
}
#menu ul li a:hover, #menu ul li .active_menu {
color: #fff;
background: url(images/menu_hover.png)
}
На примере ReloadCMS вывод меню будет выглядеть так:
Код:
<div id="menu">
<ul>
<?rcms_show_element('navigation', '<li><a href="{link}">{title}</a></li>')?>
</ul>
</div> <!-- end of menu -->
3. Заключение.
В заключение отметим, что этот код будет работать и с несколькими меню, нужно только несколько раз вызывать функцию
shineLinks('id')
с нужным id
. Естественно, id
должен быть уникален для каждого <div>
.Категории: JS
Теги: js, активная, меню, подсветка, ссылка
Оцените материал:Недавно просмотренные
- Красивое горизонтальное меню на CSS
- 25 лучших бесплатных инструментов оптимизации страниц
- Конвертация картинок из растра в вектор
- Спойлер с плавным открытием/закрытием
- Human Check 2 - капча с перенаправлением
TOP-5
- PHP сценарии обработки HTML форм (229017)
- 301 редирект в файле .htaccess. Примеры (115494)
- Конвертация картинок из растра в вектор (103980)
- Подгрузка контента без перезагрузки страницы (68951)
- Спойлер с плавным открытием/закрытием (60877)
Недавно просмотренные [СНИППЕТЫ]
- Еда: просто и не очень
- 10 типичных ошибок в коде на JavaScript
- Как освоить новый язык программирования или фреймворк
- A comprehensive guide on how to craft good AI design
- Why Programming Isn’t A Good Career Choice
TOP-5 [СНИППЕТЫ]
- Теория тестирования ПО просто и понятно [3743]
- 11 основных примеров команды UPDATE в MySQL [3743]
- Команды Linux для работы с VPS/VDS серверами [3029]
- Почему сайт плохо ранжируется в Google (кодекс) [2522]
- Оценка донора [1592]
Новое [СНИППЕТЫ]
- ✶Как настроить двухфакторную авторизацию через Telegram для SSH [28.08.24, Notes]
- ✶Как сверстать письмо, чтобы оно дошло до получателя таким, как задумано [13.03.24, Notes]
- ✶Скрытые возможности элемента <input> [14.01.24, Notes]
- ✶Как разогнать ЖК монитор [30.12.23, Notes]
- ✶Берёшь предоплату — получи заявление о мошенничестве: как могут «кошмарить» исполнителя [20.12.23, Articles]
Облачко тегов
ajax,
ceo,
css,
delirium,
google,
html,
javascript,
jquery,
js,
mix,
mysql,
php,
seo,
анализ,
аналитика,
аудит,
библиотека,
веб-мастер,
вебмастер,
защита,
инструмент,
интернет-маркетинг,
контент-маркетинг,
контроль,
менеджер,
меню,
оптимизатор,
оптимизация,
плагин,
подборка инструментов,
проверка,
продвижение,
сайт,
сайтостроение,
сео,
скрипт,
спойлер,
страница,
стратегия,
ускорение,
файл,
форма,
яндекс
Комментарии:
Сергей#
Благодарен. Пригодился скрипт. Применил его в меню рубрик на сайте wordpress, чтобы активная ссылка стала не ссылкой. В вордпрессе почему-то try-catch не пошло. Убрал конструкцию – все заработало.
coder hol es#
Спасибо за комментарий, рад, что пригодилось)