Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Модернизация меню на jQuery

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Нужно усовершенствовать код меню для последующего Open Sourse
Поиск в теме | Версия для печати
jonmodem
Отправлено: 27 Октября, 2011 - 07:20:17
Post Id



Гость


Покинул форум
Сообщений всего: 95
Дата рег-ции: Июнь 2011  
Откуда: Москва


Помог: 0 раз(а)
Вот есть jQuery меню, оно достаточно расширяемое в плане стилизации каждого элемента и раскидывания по сайту отдельных его вкладок.
Но для полного совершенствования здесь не хватает пары элементов, которые Я к сожалению не в силах дописать.
Я его использую на своем сайте и хочу им поделиться со всеми. У меня на сайте Вы можете протестировать его и понять чего не хватает.

Вот что нужно дописать:

Когда кликом раскрываешь меню, то потом, чтобы оно обратно закрылось нужно кликнуть на любом месте на сайте
Нужно добавить: когда при раскрытии кликом, оно закрывалось и при клике на родительский элемент меню.

И еще желательно добавить более плавное появление вкладок.

CODE (javascript):
скопировать код в буфер обмена
  1. $(document).ready(function() {
  2.   /* for keeping track of what's "open" */
  3.   var activeClass = 'dropdown-active', showingDropdown, showingMenu, showingParent;
  4.   /* hides the current menu */
  5.   var hideMenu = function() {
  6.     if(showingDropdown) {
  7.       showingDropdown.removeClass(activeClass);
  8.       showingMenu.hide();
  9.     }
  10.   };
  11.  
  12.   /* recurse through dropdown menus */
  13.   $('.dropdown').each(function() {
  14.     /* track elements: menu, parent */
  15.     var dropdown = $(this);
  16.     var menu = dropdown.next('div.dropdown-menu'), parent = dropdown.parent();
  17.     /* function that shows THIS menu */
  18.     var showMenu = function() {
  19.       hideMenu();
  20.       showingDropdown = dropdown.addClass('dropdown-active');
  21.       showingMenu = menu.show();
  22.       showingParent = parent;
  23.     };
  24.     /* function to show menu when clicked */
  25.     dropdown.bind('click',function(e) {
  26.       if(e) e.stopPropagation();
  27.       if(e) e.preventDefault();
  28.       showMenu();
  29.     });
  30.     /* function to show menu when someone tabs to the box */
  31.     dropdown.bind('focus',function() {
  32.       showMenu();
  33.     });
  34.   });
  35.  
  36.   /* hide when clicked outside */
  37.   $(document.body).bind('click',function(e) {
  38.     if(showingParent) {
  39.       var parentElement = showingParent[0];
  40.       if(!$.contains(parentElement,e.target) || !parentElement == e.target) {
  41.         hideMenu();
  42.       }
  43.     }
  44.   });
  45. });
 
 Top
Viper
Отправлено: 27 Октября, 2011 - 08:02:57
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
jonmodem пишет:
когда при раскрытии кликом, оно закрывалось и при клике на родительский элемент меню.
для родительского элемента и ссылки добавьте click

jonmodem пишет:
И еще желательно добавить более плавное появление вкладок.
вместо hide/show используйте animate


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
jonmodem
Отправлено: 27 Октября, 2011 - 09:51:35
Post Id



Гость


Покинул форум
Сообщений всего: 95
Дата рег-ции: Июнь 2011  
Откуда: Москва


Помог: 0 раз(а)
Viper пишет:
jonmodem пишет:
когда при раскрытии кликом, оно закрывалось и при клике на родительский элемент меню.
для родительского элемента и ссылки добавьте click

jonmodem пишет:
И еще желательно добавить более плавное появление вкладок.
вместо hide/show используйте animate


Я бы с радостью это сделал если бы знал как, буду признателен за помощь

(Отредактировано автором: 27 Октября, 2011 - 09:51:57)

 
 Top
Viper
Отправлено: 27 Октября, 2011 - 10:11:23
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
вместо showingMenu.hide();
showingMenu.animate({opacity: 'toggle'}, 1000);
или showingMenu.fadeOut(1000);
аналогично для show(только fadeIn)

родительский элемент найдете сами. Можете использовать closest для поиска родителя.


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
jonmodem
Отправлено: 27 Октября, 2011 - 10:40:10
Post Id



Гость


Покинул форум
Сообщений всего: 95
Дата рег-ции: Июнь 2011  
Откуда: Москва


Помог: 0 раз(а)
вместо showingMenu.hide();
добавил showingMenu.fadeOut(10);

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

Не нашел show(только fadeIn)

Я не знаю что такое closest, Я не знаю ничего из jQuery и JavaScript. Простите за невежество. И огромное спасибо за помощь.

Родительский элемент Я думаю или здесь где то

CODE (javascript):
скопировать код в буфер обмена
  1.  var hideMenu = function() {
  2.     if(showingDropdown) {
  3.       showingDropdown.removeClass(activeClass);
  4.       showingMenu.fadeOut(10);
  5.     }
  6.   };
или это

CODE (javascript):
скопировать код в буфер обмена
  1. var dropdown = $(this);
  2. var menu = dropdown.next('div.dropdown-menu'), parent = dropdown.parent();

(Отредактировано автором: 27 Октября, 2011 - 10:43:25)

 
 Top
Viper
Отправлено: 27 Октября, 2011 - 11:05:53
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
jonmodem пишет:
она обратно становиться цвета не нажатой.
в тот момент когды вызываете hide меняйте её цвет.

dropdown.hide() или animate.

Что такое closest
Пример

CODE (html):
скопировать код в буфер обмена
  1. <div class="parent">
  2.         <ul class="first_level">
  3.                 <li>1</li>
  4.                 <li>2</li>
  5.                 <li>3</li>
  6.                 <li>
  7.                         <ul class="second_level">
  8.                                 <li>1-2</li>
  9.                                 <li>2-2</li>
  10.                                 <li>3-2</li>
  11.                         </ul>
  12.                 </li>
  13.         </ul>
  14. </div>


$('.second_level').closest('ul'); вернет объект ul.first_level
$('.second_level').closest('div'); вернет div.parent

(Отредактировано автором: 27 Октября, 2011 - 11:06:34)



-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
jonmodem
Отправлено: 27 Октября, 2011 - 11:20:34
Post Id



Гость


Покинул форум
Сообщений всего: 95
Дата рег-ции: Июнь 2011  
Откуда: Москва


Помог: 0 раз(а)
У меня меню построено так:

CODE (html):
скопировать код в буфер обмена
  1. <div id="menu1"><div class="relative">
  2.         <span id="dd1" class="dropdown">Кнопка</span>
  3.         <div id="dropdown1" class="dropdown-menu">
  4.         <div id="nav_menu">То, что разворачивается</div>
  5.         </div>
  6. </div></div>

(Добавление)
И animate не работает, точнее Я не знаю что с ним делать:

CODE (javascript):
скопировать код в буфер обмена
  1.   /* hides the current menu */
  2.   var hideMenu = function() {
  3.     if(showingDropdown) {
  4.       showingDropdown.removeClass(activeClass);
  5.       showingMenu.fadeOut(10); /* Меняем плавность появления меню */
  6.       animate({ background: "#f3f3f3", color: "#000000");
  7.     }
  8.   };


Не могли бы Вы дописать эти нужные две-три строчки, тогда мне будет ясней что делать с кодом.

(Отредактировано автором: 27 Октября, 2011 - 11:32:06)

 
 Top
Viper
Отправлено: 27 Октября, 2011 - 13:04:47
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
jonmodem http://api[dot]jquery[dot]com/animate/ срочно читать!

CODE (htmlphp):
скопировать код в буфер обмена
  1. showingMenu.fadeOut(10); /* Меняем плавность появления меню */
  2. animate({ background: "#f3f3f3", color: "#000000");


1. Не слишком ли мало? 10 милисекунд?
2. Читаем маны


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
jonmodem
Отправлено: 27 Октября, 2011 - 14:43:17
Post Id



Гость


Покинул форум
Сообщений всего: 95
Дата рег-ции: Июнь 2011  
Откуда: Москва


Помог: 0 раз(а)
Прочитал, вот какой код получается:

CODE (javascript):
скопировать код в буфер обмена
  1. $('.dropdown').click(function(){
  2.   $('.dropdown-menu').animate({
  3.           /* Значения */
  4.   }, 150 );
  5.         });


а какие значения нужно?

На прозрачности попробовал, но animate сбивает корректный показ свертывания/разворачивания. А про dropdown.hide() ничего не нашел, он наверное единственный выход.

Еще Вы писали про:
Viper пишет:
вместо showingMenu.hide();
showingMenu.animate({opacity: 'toggle'}, 1000);
или showingMenu.fadeOut(1000);
аналогично для show(только fadeIn)


Я пробовал showingMenu.animate({opacity: 'toggle'}, 1000); она разворачивание/сворачивание не корректно выполняет.
В итоге добавил showingMenu.fadeOut(1000);, но в добавок к ней, Вы написали что еще нужно добавить аналогично для show(только fadeIn), но как это сделать? перепробовал все, никуда не добавляется.

В итоге вот какой код у меня сейчас: (Отобразить)
 
 Top
Viper
Отправлено: 27 Октября, 2011 - 15:07:11
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
вместо menu.show();
CODE (javascript):
скопировать код в буфер обмена
  1. menu.fadeIn(1000);

jonmodem пишет:
ничего не нашел

api.jquery.com/hide


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
jonmodem
Отправлено: 27 Октября, 2011 - 15:18:26
Post Id



Гость


Покинул форум
Сообщений всего: 95
Дата рег-ции: Июнь 2011  
Откуда: Москва


Помог: 0 раз(а)
Если вместо menu.show(); поставить menu.fadeIn(1000); то свертывание по повторному клику не происходит.
Про hide Я прочел, но ни какого представления о будущих действиях нету.
Скажите пожалуйста куда поставить click чтобы происходило нормально сворачивание.
 
 Top
Viper
Отправлено: 27 Октября, 2011 - 16:04:54
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
jonmodem пишет:
то свертывание по повторному клику не происходит.
ну так а с какого перепугу оно будет происходить?

Сделайте проверку на is(':hidden') и если true тогда показываете, иначе скрываете. Сейчас же у вас при клике меню показалось. При следующем клике меню скрылось и снова показалось. Ничего странного не находите?


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
jonmodem
Отправлено: 27 Октября, 2011 - 16:40:39
Post Id



Гость


Покинул форум
Сообщений всего: 95
Дата рег-ции: Июнь 2011  
Откуда: Москва


Помог: 0 раз(а)
Viper пишет:
Сейчас же у вас при клике меню показалось. При следующем клике меню скрылось и снова показалось.
Вот про это Я и спрашиваю, как мне от этого избавиться, что бы все нормально было. Если вместо
CODE (javascript):
скопировать код в буфер обмена
  1. menu.fadeIn(1000);
поставить
CODE (javascript):
скопировать код в буфер обмена
  1. menu.show();
то этого не будет. Но мне желательно это оставить, так как это расширяет функциональность.
У меня нет ни какой базы в JS, спасибо что меня обучаете.
Вот проверка, она неправильная, если не сложно исправьте пожалуйста.
CODE (javascript):
скопировать код в буфер обмена
  1. $('.dropdown-menu').is(':hidden') {
  2.         if(true) {
  3.                 showMenu();
  4.         }
  5.         else {
  6.                 hideMenu();
  7.         }
  8.   };


Пожалуйста дайте код, который кнопку оставит цветом свернутой при повторном нажатии. Я не знаю как это реализовать.
 
 Top
Viper
Отправлено: 28 Октября, 2011 - 07:30:36
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
вы неправильно делаете проверку.
CODE (javascript):
скопировать код в буфер обмена
  1. if ($('.dropdown-menu').is(':hidden')) {
  2. // Если скрыто то true


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
jonmodem
Отправлено: 28 Октября, 2011 - 12:43:14
Post Id



Гость


Покинул форум
Сообщений всего: 95
Дата рег-ции: Июнь 2011  
Откуда: Москва


Помог: 0 раз(а)
Вот так не работает
CODE (javascript):
скопировать код в буфер обмена
  1. if ($('.dropdown-menu').is(':hidden')) {
  2.                 showMenu();
  3.         }
  4.         else {
  5.                 hideMenu();
  6.         };

(Отредактировано автором: 31 Октября, 2011 - 06:42:09)

 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB