Форум русской поддержки Joomla!® CMS
04.12.2016, 07:58:27 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Выпадающее меню на CSS

 (Прочитано 264 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Nargal
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 11


« : 14.05.2016, 10:22:42 »

Здравствуйте ув. форумчане! Помогите разобраться с выпадающем меню. В общем написал шаблон с использованием Bootstrap. Так как JQuery пока знаю плохо, решил реализовать выпадающее меню на CSS. В принципе всё работает нормально и сложного ничего нет, но... использовать свойство display: block и none не интересно, смотрится всё довольно уныло, поэтому использую следующие свойства transition: <переход> [, <переход> ]*, а так же transform: rotate(), и вот тут есть загвоздка! Дело в том что transition не работает со свойством display, поэтому я использую свойство opacity, всё работает нормально и смотрится интереснее чем просто скрывать свойством display:none , но вся проблема в том, что меню появляется не только тогда, когда я навожу мышь на родительский ul но и тогда когда я навожу на любой подпункт данного меню, то есть свойство display: block уже включено и меню скрывается свойством opacity, поэтому когда я вожу мышкой просто по тексту и подвожу мышь к тому место где есть пункт подменю, оно сразу открывается... каким образом можно решить данную проблему, что бы оно появлялось только при наведении родительского ul?
Записан
Дмитрий_76
Осваиваюсь на форуме
***

Репутация: +9/-0
Offline Offline

Пол: Мужской
Сообщений: 99

Троллей не кормлю.


« Ответ #1 : 14.05.2016, 10:55:35 »

Прятать через margin-left: -9999px;
Или position: absolute; left: -9999px;
В общем, куда-нибудь влево засовывать до наведения на родительский ul.
Записан
Nargal
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 11


« Ответ #2 : 14.05.2016, 12:07:49 »

Спасибо, в принципе работает, но теперь оно вылетает слева при наведении на ul

Код:
mainmenu ul > li:hover > ul {
   left: 0px;
   opacity: 1;
}

Код:
/* First Level Dropdown */
#mainmenu ul ul {
    position: absolute;
    z-index: 600;
    opacity: 0;
    padding: 0;
    margin:0 0 0 0;
    top: 60;
    background: #3D3D3D;
    background: rgba( 50, 50, 50, .95 );
    border: 1px solid rgba( 255, 255, 255, .1 );
    border-top: none;
    border-bottom: none;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .2s ease-out;
    left: -9999px;
}

вот код, тут оно плавно появляется и исчезает, а при  left: -9999px; margin-left: -9999px? оно вылетает слева... Есть ещё какой нибудь способ?
« Последнее редактирование: 14.05.2016, 12:21:54 от Nargal » Записан
Efanych
Группа развития
*****

Репутация: +602/-0
Offline Offline

Пол: Мужской
Сообщений: 4318



« Ответ #3 : 14.05.2016, 13:52:00 »

Цитировать
вся проблема в том, что меню появляется не только тогда, когда я навожу мышь на родительский ul но и тогда когда я навожу на любой подпункт данного меню
А если для #mainmenu ul ul z-index не 600 а -1 поставить? а для ховера уже 600?
Записан
fbr
Живу я здесь
******

Репутация: +136/-6
Offline Offline

Сообщений: 1250


« Ответ #4 : 14.05.2016, 14:00:39 »

mainmenu ul > li:hover > ul { ..
попробуйте заменить на:
mainmenu > ul > li:hover > ul {
Записан
Nargal
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 11


« Ответ #5 : 15.05.2016, 11:50:56 »

А если для #mainmenu ul ul z-index не 600 а -1 поставить? а для ховера уже 600?

Вообще ничего не даёт...
Записан
Nargal
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 11


« Ответ #6 : 15.05.2016, 11:51:49 »

mainmenu ul > li:hover > ul { ..
попробуйте заменить на:
mainmenu > ul > li:hover > ul {

Ничего не меняется...
Записан
Nargal
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 11


« Ответ #7 : 15.05.2016, 11:59:30 »

МБ в CSS ещё как нибудь можно сделать плавное появление или выпад какой нибудь, пробовал делать на JQuery но слишком криво работает... В принципе меню работает нормально, вся соль в том, что появление выглядит не очень красиво... резко появилось, резко исчезло, кстати меню 3 уровня работает правильно то есть нормально исчезает и поворачивается ...

Код:
#mainmenu ul ul > li:hover > ul {
   opacity: 1;
   transform: rotate(0deg);
   -ms-transform: rotate(0deg); /* IE 9 */
   -webkit-transform: rotate(0deg); /* Safari and Chrome */
   left: 0px;
}

/* Second Level Dropdown */
#mainmenu ul ul ul {
    display: block;
    position: absolute;
    margin-left: 260px;
    margin-top: -34px;
    left: 100px;
    opacity: 0;
    z-index:99999;
    transform: rotate(10deg);
    -ms-transform: rotate(10deg); /* IE 9 */
    -webkit-transform: rotate(10deg); /* Safari and Chrome */
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
}

... а работает оно нормально потому, что я в псевдоклассе hover не использую свойство display
Записан
Дмитрий_76
Осваиваюсь на форуме
***

Репутация: +9/-0
Offline Offline

Пол: Мужской
Сообщений: 99

Троллей не кормлю.


« Ответ #8 : 16.05.2016, 11:07:32 »

Цитировать
Код:
-webkit-transition: all .2s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .2s ease-out;
Нужно анимировать не "all", а только нужные свойства. Допустим, вот то, что я говорил, прятать влево подменю - это анимировать не надо.
Записан
Nargal
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 11


« Ответ #9 : 16.05.2016, 15:35:10 »

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

Спасибо, разобрался!
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet