Подсвечивание активной ссылки меню с помощью 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 лучших бесплатных инструментов оптимизации страниц
- Подсветка активного пункта меню
- Простой скрипт голосования - опроса на PHP
TOP-5
- PHP сценарии обработки HTML форм (228573)
- 301 редирект в файле .htaccess. Примеры (114415)
- Конвертация картинок из растра в вектор (103724)
- Подгрузка контента без перезагрузки страницы (67990)
- Спойлер с плавным открытием/закрытием (60424)
Недавно просмотренные [СНИППЕТЫ]
- Превращаем старый телефон на Android в веб-сервер
- Создание эффективного баннера
- Как выделить активный пункт меню?
- Немного о PDO и MySQL + пример заполнения связанных таблиц
- Как настроить python в Linux под свой проект
TOP-5 [СНИППЕТЫ]
- Теория тестирования ПО просто и понятно [3579]
- 11 основных примеров команды UPDATE в MySQL [3532]
- Команды Linux для работы с VPS/VDS серверами [2449]
- Почему сайт плохо ранжируется в Google (кодекс) [2369]
- Оценка донора [1478]
Новое [СНИППЕТЫ]
- ✶Безграничные возможности FFmpeg на примерах [27.02.23, Articles]
- ✶Улучшаем производительность сайта с помощью CSS [22.02.23, Articles]
- ✶Графический интерфейс для bash, делаем работу в командной строке удобнее (JetBrains IDE) [10.02.23, Notes]
- ✶«Пароль неверный». Парольные менеджеры глазами хакера [29.01.23, Notes]
- ✶Создаем свой загрузочный диск Linux [09.01.23, Linux]
Облачко тегов
ajax,
ceo,
css,
delirium,
google,
html,
javascript,
jquery,
js,
mix,
mysql,
php,
seo,
анализ,
аналитика,
аудит,
библиотека,
веб-мастер,
вебмастер,
защита,
инструмент,
интернет-маркетинг,
контент-маркетинг,
контроль,
менеджер,
меню,
оптимизатор,
оптимизация,
плагин,
подборка инструментов,
проверка,
продвижение,
сайт,
сайтостроение,
сео,
скрипт,
спойлер,
страница,
стратегия,
ускорение,
файл,
форма,
яндекс
Сергей#
Благодарен. Пригодился скрипт. Применил его в меню рубрик на сайте wordpress, чтобы активная ссылка стала не ссылкой. В вордпрессе почему-то try-catch не пошло. Убрал конструкцию – все заработало.
coder hol es#
Спасибо за комментарий, рад, что пригодилось)