АРМАДА
Как сделать выпадающее меню? (код есть)
На страницу 1, 2  След.
Новая тема Написать ответ Advanced Hosters - профессиональный хостинг

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 6:46 pmДобавить в избранноеОтветить с цитатой
Всем привет!
тут такая проблема, хз как решить, ломаю голову :`(

Есть меню (выводится через модуль меню Джумлы):
Код:

<div class="clear custom-wrapper-center">
<div class="boxIndent">
<ul class="menu">
<li class="item20"><a href="/index.php/catalogue"><span>Каталог продукции</span></a></li>
<li class="item21"><a href="#"><span>Контакты</span></a>
 <div style="display: none;" class="ulwrapper">
 <ul>
 <li class="item22"><a href="/index.php/contacts/map"><span>Посмотреть на карте</span></a></li>
 <li class="item24"><a href="/index.php/contacts/form"><span>Форма обратной связи</span></a></li>
 <li class="item23"><a href="/index.php/contacts/contacts"><span>Контактная информация</span></a></li>
 </ul>
 </div>
</li>
</ul>                             
</div>
</div>
 



Есть к нему CSS (здоровый, но где-то здесь этот класс ulwrapper):
Код:
.ulwrapper  {
   display: none;
    position:absolute;
   background:url(../images/menu_wra.png) 0 0 no-repeat;
   padding:8px 0 0 0;
   margin:37px 0 0 0px !important;
   *margin:37px 0 0 -99px !important;
   width:152px  !important;
   height:300px !important;
}
.ulwrapper ul { margin:0 !important; display: inline-block; width:151px; //display:block; //zoom:1; background:url(../images/menu_wrb.png) bottom left no-repeat; padding:0 0 12px 0; list-style:none;}

.parent .ulwrapper ul li, .parent .ulwrapper ul li a, .parent .ulwrapper ul li a span{
   float:none !important;
   width:auto !important;
   display:inline-block;
   background:none !important;
   font-size:12px  !important;
   color:#363636!important;
   margin:0 !important;
   *margin:0 0 -5px 0 !important;
   text-align:left;
   text-decoration:none;
   line-height:18px !important;
   padding:0 !important;
}

.ulwrapper  .ulwrapper  {
   display: none;
    position:absolute;
   padding:8px 0 0 0;
   margin:-40px 0 0 152px !important;
   *margin:-5px 0 0 87px !important;
   background:none;
}
.ulwrapper  .ulwrapper   .ulwrapper     {
   display: none;
    position:absolute;
   padding:0 0 0 0;
}
.row-top-menu .ulwrapper ul li{ margin:0  !important; padding:0  !important; min-height:1px; display:block; background:url(../images/menu_wrc.png) 0 0 repeat !important;}
.row-top-menu .ulwrapper ul li a{text-transform:capitalize !important; color:#ADBE6F!important;   margin:0  !important; padding:0  !important; font-size:12px;}
.row-top-menu .ulwrapper ul li a span{   display:block; color:#ADBE6F!important; width:128px !important; padding:7px 4px 7px 19px !important; *padding:4px 4px 4px 19px !important; background:url(../images/menu_wrd.png) bottom left repeat-x !important;  font-size:12px;}
.row-top-menu .ulwrapper ul li a:hover, .row-top-menu .ulwrapper > ul > li#current > a , .row-top-menu .ulwrapper ul li#current a strong, .row-top-menu .ulwrapper > ul > li#current > a > span{ color:#FFF !important;}
.row-top-menu .ulwrapper ul li a:hover span{ color:#FFF !important;}


Нужно, чтобы при наведении на пункт, если есть подпункты - они показывались (вниз списком или сбоку).

Подскажите, где здесь подправить, чтобы подпункты показывались, ведь в коде страницы они есть, просто не отображаются!

Заранее спасибо и +++ в репутацию Drinks or Beer :thup:
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

Seele
Свой
Зарегистрирован: 30.06.2010
Сообщений: 14
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 6:59 pmОтветить с цитатой
посмотри в настройках меню есть где-то галочка типо "разворачивать меню"
я не волшебник, я только учусь!

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 7:03 pmОтветить с цитатой
Seele, не помогает, уже включил :`(
Видимо, в CSS что-то, но я в нем не понимаю.
Кто шарит - подскажите, почему подпункты не отображаются?
Спасибо!
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

Seele
Свой
Зарегистрирован: 30.06.2010
Сообщений: 14
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 7:09 pmОтветить с цитатой
кинь ссылку на сайт
я не волшебник, я только учусь!

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 7:16 pmОтветить с цитатой
Seele, http://vegetables.kz
Меню слева.
Там пункт Контакты нужно чтобы при наведении раскрывал 3 подпункта.
Как сделать - хз, уже час хожу по CSS :`(
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

Seele
Свой
Зарегистрирован: 30.06.2010
Сообщений: 14
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 7:49 pmОтветить с цитатой
попробуй в CSS ниже дописать
Код:
.boxIndent .menu .ulwrapper  {
   display: none;
    position:absolute;
   top:0px;
    left:100%;

}


хотя не уверена, не сработает удалишь :bw:
я не волшебник, я только учусь!

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 8:00 pmОтветить с цитатой
Seele, не, не хочет :`( bums
Блин, как же сделать, чтобы выпадали меню Shout
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

deBrain
V.I.P.
Зарегистрирован: 03.06.2010
Сообщений: 1569
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 8:16 pmОтветить с цитатой
jq
элемент hidden
на событие "при наведении мыши" или по щелчку.
в jq есть toggle, оно должно подойти.
http://api.jquery.com/toggle/
подойдёт такое?) код можно будет сварганить)
Правильно вкладываем свободные средства в ПАММ
Правильный хостинг: DigitalOcean

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 8:18 pmОтветить с цитатой
deBrain, о, вообще было бы круть! :thup:
Там в шаблоне jquery подключен уже, вот код (если не ошибаюсь):
Код:
<script type="text/javascript">
   var $j = jQuery.noConflict();
      $j(document).ready(function(){
      $j('.menu-nav li').hover(
         function() {
            $j(this).find('.ulwrapper').stop(false, true).slideDown();
            $j(this).find('.ulwrapper .ulwrapper').stop(false, true).slideUp('fast');
         },
         function() {       
            $j(this).find('div').stop(false, true).slideUp('fast');
         }
      );
      $j('.ulwrapper').hover(
         function() {
            $j('.parent').addClass("active_tab");
         },
         function() {
            $j('.parent').removeClass("active_tab");       
         }
      );   
      });
</script>


Если не тяжело, поколдуй над задачей Drinks or Beer :thup: Yahoo!
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

Seele
Свой
Зарегистрирован: 30.06.2010
Сообщений: 14
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 8:23 pmОтветить с цитатой
не хочу тебя огорчать, но в скрипте jQuery возможность выпадения меню прописана только для верхнего меню, при этом в CSS блок прописан только темно-зеленый Pardon
я не волшебник, я только учусь!

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 8:27 pmОтветить с цитатой
Seele, :`( bums
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

deBrain
V.I.P.
Зарегистрирован: 03.06.2010
Сообщений: 1569
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 8:27 pmОтветить с цитатой
$(".item21").hover(function(){$(".ulwrapper ul li").toggle("slow");});

Или что-то в этом роде.
не гарантирую, что будет работать=\
и в css скорее всего надо будет позиции править.
Правильно вкладываем свободные средства в ПАММ
Правильный хостинг: DigitalOcean

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 8:32 pmОтветить с цитатой
deBrain, а куда это добавить?
CSS подкручу, главное чтобы выпадало :thup:
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

Seele
Свой
Зарегистрирован: 30.06.2010
Сообщений: 14
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 8:40 pmОтветить с цитатой
Yabuti, в шаблон в jQuery
а попробуй по-ламерски (самой интересно) Smile
в jQuery перед </script>
вставить
Код:
var $jq = jQuery.noConflict();
      $jq(document).ready(function(){
      $jq('.menu li').hover(
         function() {
            $jq(this).find('.ulwrapper').stop(false
, true).slideDown();
            $jq(this).find('.ulwrapper .ulwrapper').stop(false, true).slideUp('fast');
         },
         function() {       
            $jq(this).find('div').stop(false, true).slideUp('fast');
         }
      );
      $jq('.ulwrapper').hover(
         function() {
            $jq('.parent').addClass("active_tab"&
#41;;
         },
         function() {
            $jq('.parent').removeClass("active_tab&quo
t;);       
         }
      );   
      });

я не волшебник, я только учусь!

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Сб Апр 16, 2011 9:03 pmОтветить с цитатой
Seele, не, не пашет bums

Я пробовал еще так:
Код:
<div class="wrapper-box-extra custom-wrapper module">
<div class="boxTitle">
<h3>Навигация</h3>
</div>
<div class="clear custom-wrapper-center">
<div class="boxIndent">
<ul class="menu">
<li class="item6"><a href="index.php/catalogue"><span>Каталог продукции</span></a></li>
<li>
<div onmouseover="document.all['menu2'].style.display=''" onmouseout="document.all['menu2'].style.display='none'"><a href="#"><span>Закупки</span></a>
<div id="menu2" style="display:none">
<li class="item4"><a href="index.php/2011-04-16-14-38-11/concurses"><span> Конкурсы</span></a></li>
<li class="item5"><a href="index.php/2011-04-16-14-38-11/cenovie-predlozheniya"><span> Ценовые предложения</span></a></li>
</div>
</div>
</li>
<li>
<div onmouseover="document.all['menu3'].style.display=''" onmouseout="document.all['menu3'].style.display='none'"><a href="#"><span>Контакты</span></a>
<div id="menu3" style="display:none">
<li class="item9"><a href="index.php/map"><span> Посмотреть на карте</span></a></li>
<li class="item10"><a href="index.php/form"><span> Форма обратной связи</span></a></li>
<li class="item8"><a href="index.php/contact-info"><span> Контактная информация</span></a></li>
</div>
</div>
</li>
<li class="item18"><a href="index.php/ovoshehranilishe"><span>Овощехранилище</span></a></li>
<li class="item7"><a href="index.php/clients-and-partners"><span>Клиенты и партнеры</span></a></li>
</ul>
</div>
<div><img src="templates/agrocom/images/custom_y.png" border="0" /></div>
</div>
</div>
<p><br /><br /></p>


В виде mod_custom просто вставлял на место меню. В Опере и ФФ работает - при наведении на пункт Контакты (и Закупки) ниже появляются новые пункты в меню. А вот в ИЕ эти вложенные пункты рвут шаблон - идут списком.

Может прям кодом вставить, только я не знаю, как подогнать, чтобы и ИЕ тоже мог нормально видеть.
Посоветуйте, пожалуйста Drinks or Beer :thup:
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--
Новая тема Написать ответ    ГЛАВНАЯ ~ ТЕХНИЧЕСКИЕ ВОПРОСЫ

Перейти:  





Генеральный спонсор



Партнеры