Скрипт простого выпадающего вертикально меню
Предлагаем Вам сделать выпадающее вертикально меню, основной особенностью которого является то, что изначально видны только основные его разделы. При наведении курсора мышки на один из разделов (пунктов) меню, ниже появляется список с подразделами.
Для демонстрации работы скрипта, создающего выпадающее вертикально меню, обратите внимание на меню, расположенное чуть ниже. Чтобы понять, как оно работает, наведите курсор мышки на один из заголовков меню:
|
Основные разделы
|
Скрипты
|
Хитрости
|
Чтобы получить точно такое же меню, как показано выше, для начала вставьте в шапку своего сайта (между тегами <head> и </head>) следующие стили:
<style type="text/css">
.tab_menu { width: 100%; }
.tab_menu div { padding: 3px; cursor: pointer; }
.tab_green { background-color: #00BB00; font-weight: bold; }
.hide { visibility: hidden; }
.show { visibility: visible; background-color: #E8FED8; }
</style>Потом необходимо добавить JavaScript код, который будет при наведении курсора мышки на разделы меню показывать подразделы и скрывать их, когда курсор мышки покидает область меню. Для этого добавьте на Вашу страничку следующий код:
<script type="text/javascript">
function show_Obj1() { document.getElementById('div1').className='show'; }
function hide_Obj1() { document.getElementById('div1').className='hide'; }
function show_Obj2() { document.getElementById('div2').className='show'; }
function hide_Obj2() { document.getElementById('div2').className='hide'; }
function show_Obj3() { document.getElementById('div3').className='show'; }
function hide_Obj3() { document.getElementById('div3').className='hide'; }
</script>Далее, в том месте Вашего сайта, где будет располагаться выпадающее меню, необходимо добавить описание разделов и подразделов меню следующим образом:
<table class="tab_menu">
<tr style="vertical-align: top;"><td>
<div class="tab_green" onmouseover="show_Obj1()" onmouseout="hide_Obj1()">
Основные разделы
</div>
<div id="div1" onmouseover="show_Obj1()" onmouseout="hide_Obj1()" class="hide">
<a href="index.php">Главная</a><br>
<a href="news.php">Новости сайта</a><br>
<a href="plans.php">Планы развития</a>
</div>
</td><td>
<div class="tab_green" onmouseover="show_Obj2()" onmouseout="hide_Obj2()">
Скрипты
</div>
<div id="div2" onmouseover="show_Obj2()" onmouseout="hide_Obj2()" class="hide">
<a href="shadow_text.php">Скрипт тени к тексту</a><br>
<a href="gradient.php">Градиентная заливка текста</a><br>
<a href="simple_menu.php">Простое меню</a>
</div>
</td><td>
<div class="tab_green" onmouseover="show_Obj3()" onmouseout="hide_Obj3()">
Хитрости
</div>
<div id="div3" onmouseover="show_Obj3()" onmouseout="hide_Obj3()" class="hide">
<a href="create_rss.php">Как сделать RSS-ленту</a><br>
<a href="no_www.php">Убираем www из адреса сайта</a>
</div>
</td></tr>
</table>Если Вы все сделали так, как написано в данной теме, то у Вас должно получиться точно такое же выпадающее вертикально меню, как и в нашем примере, показанном выше.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
<style>
.tab_menu { width: 100%; }
.tab_menu div { padding: 3px; cursor: pointer; }
.hide { visibility: hidden; }
.show { visibility: visible; }
</style>
Между тегами <head> и </head> скрипт поставить не забыл:
<style>
.tab_menu { width: 100%; }
.tab_menu div { padding: 3px; cursor: pointer; }
.hide { visibility: hidden; }
.show { visibility: visible; }
</style>
Объясните, пожалуйста, в чём загвоздка?
P.S. Всё, что мог, перепробовал - сдаюсь.
Статью подправил, теперь скрипт меню работает и в Firefox.
Думаю, многим может пригодиться.