+7-499-70-300-44
заказать звонок
Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Спасибо за оставленную заявку
Ожидайте звонка

Как сделать раскрывающееся меню в JavaScript

Блог вебмастера

Сайт дня: Сервис автоматической верстки сайтов PSD2HTMLConverter.com позволяет осуществлять верстку psd макетов в html и css за 5-10 минут.

В этом уроке я расскажу как сделать раскрывающееся меню в JavaScript. Даную схему можно использовать для любых движков, будь то: WordPress, Joomla, Bitrix, Ucoz, или просто сайт на PHP без CMS.

Ниже представлен JavaScript, который нам нужно вставить на сайт в то место, где вы хотите иметь раскрывающееся меню.
В данном случае я буду рассматривать движок WordPress и вставляю меню буду в сайдбар.

Что б вставить данный скрипт в сайдбар, нужно активировать плагин, который будет задействовать JavaScript, PHP в сайдбаре. Таких плагинов много, но я рассмотрю плагин Ad Codes Widget.

И так, находим плагин, устанавливаем, активируем. Далее идем в админ меню — виджеты.

Как сделать раскрывающееся меню в JavaScript

Видим виджет плагина Ad Codes Widget. Далее мы его просто перетягиваем в место, где должно располагаться меню. У меня оно будет располагаться в сайлдбаре и вставляем код меню.

Как сделать раскрывающееся меню в JavaScript

Далее, смотрим как работает меню. На фото 1 меню в закрытом состоянии, на фото 2 меню в открытом состоянии.

Как сделать раскрывающееся меню в JavaScript Как сделать раскрывающееся меню в JavaScript

Ниже представлен сам код меню.


<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>

Другие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Введите адрес сайта, который нуждается в продвижении *

Указать точное время звонка

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка