Сайт дня: Сервис автоматической верстки сайтов PSD2HTMLConverter.com позволяет осуществлять верстку psd макетов в html и css за 5-10 минут.
В этом уроке я расскажу как сделать раскрывающееся меню в JavaScript. Даную схему можно использовать для любых движков, будь то: WordPress, Joomla, Bitrix, Ucoz, или просто сайт на PHP без CMS.
Ниже представлен JavaScript, который нам нужно вставить на сайт в то место, где вы хотите иметь раскрывающееся меню.
В данном случае я буду рассматривать движок WordPress и вставляю меню буду в сайдбар.
Что б вставить данный скрипт в сайдбар, нужно активировать плагин, который будет задействовать JavaScript, PHP в сайдбаре. Таких плагинов много, но я рассмотрю плагин Ad Codes Widget.
И так, находим плагин, устанавливаем, активируем. Далее идем в админ меню – виджеты.
Видим виджет плагина Ad Codes Widget. Далее мы его просто перетягиваем в место, где должно располагаться меню. У меня оно будет располагаться в сайлдбаре и вставляем код меню.
Далее, смотрим как работает меню. На фото 1 меню в закрытом состоянии, на фото 2 меню в открытом состоянии.
 |
 |
Ниже представлен сам код меню.
[php]
<script type="text/javascript">// <![CDATA[
function Menu(id)
{
var menu = document.getElementById(‘menu_’ + id).style;
if (menu.display == ‘none’)
{
menu.display = ‘block’;
}
else
{
menu.display = ‘none’;
}
}
// ]]></script></pre>
<ul>
<li onclick="javascript:Menu(‘1’)">Текст 1
<ul id="menu_1" style="display: none;">
<li><a href="#">Текст 1.1</a></li>
<li><a href="#">Текст 1.2</a></li>
</ul>
</li>
<li onclick="javascript:Menu(‘2’)">Текст 2
<ul id="menu_2" style="display: none;">
<li><a href="#">Текст 2.1</a></li>
<li><a href="#">Текст 2.2</a></li>
</ul>
</li>
</ul>
<pre>
[/php]
