Время чтения: 2 мин. 18 августа 2013 в 8:30 Блог веб-разработчика
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

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

Сайт дня: Сервис автоматической верстки сайтов 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]

Похожие статьи

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

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

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

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

Получить коммерческое предложение

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить консультацию

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

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

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

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

Комментарий

Получить консультацию

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

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

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

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

Комментарий

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Начать сотрудничество
Заполните поля ниже. Я лично перезвоню Вам в течении 15 минут для обсуждения деталей.

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

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

Введите контактный Email для отправки точной стоимости

или позвоните мне по телефону
+7-499-70-300-44
Получить консультацию

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

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

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

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

Комментарий

[contact-form-7 404 "Not Found"]
Получить коммерческое предложение

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

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

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

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

Запись на бесплатный урок
Введите ваше имя, телефон и skype логин.
Я свяжусь с Вами для уточнения времени прохождения урока.

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

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

Введите Skype *

Выберите программу

Промокод