Jump to content

Верхнее выпадающее меню как у Вас на форуме

Featured Replies

Posted
comment_30511

Добрый день. 
Подскажите пожалуйста как у Вас реализовано верхнее выпадающее меню? Это что то стороннее (если да то что?) или ручками писаное ...

Понравилось хотел бы такое же ... 

comment_30541

Да, на ProMenu такое тоже сделать можно, но у нас реализовано ручками, мы любим трудности :D

comment_30545

поставил promenu plus 2.1.5 

post-8414-0-36740000-1367819361.jpg

но получил вот такой результат :( 

как сделать что бы не было этого "Больше" - а все меню стояли в ряд ? 

comment_30547


как сделать что бы не было этого "Больше" - а все меню стояли в ряд ? 

Воспользоваться поиском:

comment_30548


Воспользоваться поиском

спасибо! удалил в 
globalTemplate

 

 

<li id='nav_other_apps' style='display: none'>
<a href='#' class='ipbmenu' id='more_apps'>{$this->lang->words['more_apps']} <img src='{$this->settings['img_url']}/useropts_arrow.png' /></a>
</li>

всё работет 

  • 6 месяцев спустя...
comment_48254

В globalTemplate после кода:

{IPSLib::getAppTitle($data['app_dir'])}</a>
Добавляем условие:

<if test="$data['app_dir'] == 'forums'">
<ul class='nav'>
<li>Пункт меню</li>
<li>Пункт меню</li>
<li>Пункт меню</li>
<li>Пункт меню</li>
</ul>
</if>
То есть подменю откроется у вкладки меню Форумы.

CSS не составит труда скопировать из исходного кода страницы.

comment_48261

Спасибо огромное, теперь структура понятна! Но проблема появилась, CSS вроде скопировал для проверки, но почему-то не выпадает меню... Если без CSS сделать, то видны пункты выпадающего меню рядом с главным пунктом самого меню, что наводит на мысль, что установлено все верно. Но как заставить выпадать его. Я правильно скопировал код?

#community_app_menu ul {
    background: none repeat scroll 0 0 #0E87B8;
    left: -9999px;
    list-style: none outside none;
    opacity: 0;
    position: absolute;
}
#community_app_menu ul li {
    float: none;
}
#community_app_menu ul a {
    display: block;
    white-space: nowrap;
}
#community_app_menu li:hover ul {
    background: none repeat scroll 0 0 #FF0000;
    left: 0;
    opacity: 1;
}

#community_app_menu li ul li a {
    background: none repeat scroll 0 0 #1C2431 !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
#community_app_menu li ul.nav {
    border-top: 3px solid #0B83B3;
    width: 200px;
    z-index: 1000;
}
#community_app_menu li ul a {
    color: #FFFFFF;
    font-size: 14px;
    padding: 7px;
}
#community_app_menu li:hover ul a {
    text-decoration: none;
}
#community_app_menu li:hover ul li a:hover {
    background: none repeat scroll 0 0 #0B83B3 !important;
    text-decoration: none;
}
#community_app_menu li ul li a:before {
    border: medium none;
    content: "";
    font-family: 'FontAwesome';
    font-size: 11px;
    font-weight: normal;
    left: 7px;
    margin-right: 8px;
    top: 7px;
}
comment_48271

Kinkl,надо смотреть на сайте, заочно трудно что-то предположить 

comment_48339

В общем, спустя аж 2 дня мне удалось заставить работать все это дело. Сегодня правил косяк отображения на хроме, меню "двоилось", еле нашел причину. Обрадовался, но рано. Хотел было вздохнуть спокойно - ан нет, теперь конфликтует с парой хуков, а именно:

  • community.invisionpower.com/files/file/2892-dp33-new-content-counter/
  • community.invisionpower.com/files/file/4420-pending-files-counter-in-ipdownloads-tab/

Также двоится, но уже на всех браузерах. Причину я  в общем то нашел, меню если что вот с этого скина: www.ipbfocus.com/premade/shift/ Обратите внимание на строение этого меню, там есть подписи под пунктами. Так вот, там все хитро устроено, что каким-то образом класс настроен так, что хук думает что это и есть основной пункт меню, и цепляется за него, вызывая тем самым его съезд вниз. Как побороть уже не знаю и если честно не хочу, так как 3 дня убил впустую, и вернулся с того, с чего начал. Лучше бы вообще ничего не делал.

Первый скрин - работает счетчик, но не выпадает меню, второй скрин - работает счетчик, но меню становится корявое и пункты двоятся. Вот такие дела...

 

post-407-0-76277800-1386263531.jpg post-407-0-96336800-1386263624.jpg

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.