Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 18.07.2014, 13:30   #1
mephist
Форумчанин
 
Регистрация: 01.05.2009
Сообщений: 200
Лампочка Выпадающее подменю

Добрый день, уважаемые форумчане.

Жизнь заставляет меня начать изучение JavaSript, но сейчас мне очень нужна помощь для старта с одной реальной задачей.

Моя цель, сделать кнопку для пункта меню: нажал на кнопку – видны подпункты, повторное нажатие – скрылись подпункты. Все это уже было сделано на чужом сайте http://opus.at.ua/ (справа вертикальное меню, у пункта Фотографии есть [+], при нажатии на который раскрываются его подпункты).
Просматривая код элемента, видно, что при нажатии по кнопке запускается цикл регулирующий стиль <ul style =”display: block;”>
Во вложении скрины до и после нажатия кнопки.

Если я верно понимаю, то JavaSript вшит в CSS ?!?
Признаться, я даже код найти не могу, который отвечает за скрытие/раскрытие, чтобы начать с ним разбираться. Пожалуйста, ткните мне, куда смотреть, чтобы найти этот код.
Или, может быть, у вас есть свой код, для подобной проблемы?

Буду рад любой помощи.
Заранее большое спасибо.
Изображения
Тип файла: jpg Исходный.jpg (16.9 Кб, 119 просмотров)
Тип файла: jpg Нажатие.jpg (19.7 Кб, 111 просмотров)
mephist вне форума Ответить с цитированием
Старый 18.07.2014, 14:07   #2
mirkul
Пользователь
 
Регистрация: 16.07.2014
Сообщений: 62
Радость

В таких случаях я использую jquery

Вот код jquery:
Код:
...
<script type="text/javascript" src="sites/all/scripts/jquery-2.1.0.js"></script>
<script type="text/javascript">
(function($){

$(document).ready(function(){
  $('.spoiler-body').hide();
  $('.spoiler-title').click(function(){
    $(this).toggleClass('opened').toggleClass('closed').next().slideToggle();
});
 });
})(jQuery)
</script>
...
Код CSS:
Код:
...
<style>
.opened {
    color:green;
    cursor:pointer;
}
.closed {
    color:blue;
    cursor:pointer;
}
</style>
...
Ну и сам спойлер
Код:
<h5 class="spoiler-title closed">Menu 1</h5>
<div class="spoiler-body">
<a href="#">Menu 1.1</a><br>
<a href="#">Menu 1.2</a><br>
</div>
<h5 class="spoiler-title closed">Menu N</h5>
<div class="spoiler-body">
<a href="#">Menu N.1</a><br>
<a href="#">Menu N.2</a><br>
</div>
...
Менюшку делать долго
Подойдет?
mirkul вне форума Ответить с цитированием
Старый 18.07.2014, 17:50   #3
mephist
Форумчанин
 
Регистрация: 01.05.2009
Сообщений: 200
По умолчанию

Большое спасибо. Со статичной менюшкой проблем нет, она готова.

Я тоже думал, чтобы сделать слайдером, но есть загвоздка:
сайт создавался через конструктор UCOZ, а на нем меню идет единым блоком $NMENU_1$, так что HTML не отредактировать и отдельные пункты под слайдер не загнать.

Поэтому моя надежда сделать так, как сделано здесь http://opus.at.ua/ (это тоже ucoz'овский сайт):

Насколько я могу судить в указанном примере по нажатии на кнопку запускается некоторый код, который меняет CSS для отображения подпунктов меню.

Может быть кто-нибудь сможет скопировать этот кусок кода с http://opus.at.ua/ который относится к движению меню, или подскажет, по каким признакам я могу его найти сам?

P.S. моя беда в том, что я не понимаю, что ищу и где: в коде элемента я вижу, что происходит по нажатии кнопки, но в коде страницы не могу найти, что бы могло за это отвечать - а может быть это вообще находиться не здесь или это нельзя отследить(
Если понадобиться, я мучаюсь над сайтом http://astrocrowd.ucoz.com/

Последний раз редактировалось mephist; 18.07.2014 в 18:03.
mephist вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
меню и подменю foxig PHP 11 09.07.2011 20:38
Меню и подменю gta HTML и CSS 2 20.03.2011 21:16
подменю DrStrangeLove HTML и CSS 1 13.10.2010 18:06
подменю в MainMenu dante77 Компоненты Delphi 0 20.11.2007 19:25
Создание подменю extatic Помощь студентам 1 07.08.2007 20:51