Подсвечивание активной ссылки меню с помощью 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, активная, меню, подсветка, ссылка
Оцените материал:Недавно просмотренные
- Ссылка на источник при копировании с сайта
- Кампания Google AdWords из экспортного файла Яндекс.Директа
- Меню с анимационным выделением на JQuery
- Защита сайта от атак конкурентов
- 35 инструментов для веб-разработчика на каждый день
TOP-5
- PHP сценарии обработки HTML форм (223680)
- 301 редирект в файле .htaccess. Примеры (109278)
- Конвертация картинок из растра в вектор (102740)
- Подгрузка контента без перезагрузки страницы (65773)
- Спойлер с плавным открытием/закрытием (59343)
Недавно просмотренные [СНИППЕТЫ]
- CSS Parent Selector
- Еда: просто и не очень
- Земля вращающаяся, svg, css3, html5
- Установка Kubernetes на домашнем сервере с помощью K3s
- Теория тестирования ПО просто и понятно
TOP-5 [СНИППЕТЫ]
- 11 основных примеров команды UPDATE в MySQL [2760]
- Теория тестирования ПО просто и понятно [2124]
- Почему сайт плохо ранжируется в Google (кодекс) [2038]
- Команды Linux для работы с VPS/VDS серверами [1804]
- Оценка донора [1264]
Новое [СНИППЕТЫ]
- ✶Bash Command Line Tips to Help You Work Faster [22.05.22, Articles]
- ✶Как отлаживать bash скрипты по шагам [21.05.22, Notes]
- ✶Начинающие программисты боятся темноты [19.05.22, Notes]
- ✶3 ways to style CSS box-shadow effects [14.05.22, Notes]
- ✶Восемь ситуаций, когда лучше выпить кофе, чем чай и наоборот [13.05.22, Notes]
Облачко тегов
ajax,
ceo,
css,
delirium,
google,
html,
javascript,
jquery,
js,
mix,
mysql,
php,
seo,
анализ,
аналитика,
аудит,
библиотека,
веб-мастер,
вебмастер,
защита,
инструмент,
интернет-маркетинг,
контент-маркетинг,
контроль,
меню,
оптимизатор,
оптимизация,
плагин,
проверка,
продвижение,
сайт,
сайтостроение,
сео,
скрипт,
спойлер,
страница,
стратегия,
ускорение,
файл,
форма,
яндекс
Сергей#
Благодарен. Пригодился скрипт. Применил его в меню рубрик на сайте wordpress, чтобы активная ссылка стала не ссылкой. В вордпрессе почему-то try-catch не пошло. Убрал конструкцию – все заработало.
coder hol es#
Спасибо за комментарий, рад, что пригодилось)