9
43
Простое меню с подсветкой выбранного пункта
Все наверно делали на своих сайтах различные меню. Предлагаем Вам сделать простейшее меню, основной особенностью которого является подсветка выбранного пункта меню при помощи JavaScript взамен использования стандартного CSS.
Чтобы понять, о чем идет речь, обратите внимание на пример меню, расположенное чуть ниже:
| Основные разделы: |
| Главная страницы |
| Скрипты |
| Онлайн-сервисы |
| Обратная связь |
Делается подобное меню довольно таки просто, путем обработки событий onmouseout и onmouseover для ячеек таблицы, в которых располагаются ссылки.
Вот полный код приведенного выше примера меню с подсветкой выбранного пункта:
HTML код:
<table style="margin:0 auto; width: 180px; text-align: center;
background-color: silver; padding: 5px;">
<tr>
<td><b>Основные разделы:</b></td>
</tr>
<tr>
<td onmouseout="bgColor=''" onmouseover="bgColor='green'">
<a href="http://usefulscript.ru/">Главная страницы</a>
</td>
</tr>
<tr>
<td onmouseout="bgColor=''" onmouseover="bgColor='green'">
<a href="script.php">Скрипты</a>
</td>
</tr>
<tr>
<td onmouseout="bgColor=''" onmouseover="bgColor='green'">
<a href="useful_site.php">Онлайн-сервисы</a>
</td>
</tr>
<tr>
<td onmouseout="bgColor=''" onmouseover="bgColor='green'">
<a href="support.php">Обратная связь</a>
</td>
</tr>
</table>Как видите ничего сложно в создании такого меню нет, но оно смотрится гораздо привлекательнее, чем просто меню, состоящее из одних только ссылок.
Дата создания: 18:36:12 14.10.2011 г.
Дата обновления: 22:36:47 08.03.2012 г.
Посещений: 8400 раз(а).
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.