0 Пользователей и 1 Гость просматривают эту тему.
  • 9 Ответов
  • 464 Просмотров
*

Nargal

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

Дмитрий_76

  • Осваиваюсь на форуме
  • 128
  • 18
  • Троллей не кормлю.
Re: Выпадающее меню на CSS
« Ответ #1 : 14.05.2016, 09:55:35 »
Прятать через margin-left: -9999px;
Или position: absolute; left: -9999px;
В общем, куда-нибудь влево засовывать до наведения на родительский ul.
*

Nargal

  • Захожу иногда
  • 12
  • 0
Re: Выпадающее меню на CSS
« Ответ #2 : 14.05.2016, 11: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, 11:21:54 от Nargal »
*

Efanych

  • Группа развития
  • 4317
  • 605
Re: Выпадающее меню на CSS
« Ответ #3 : 14.05.2016, 12:52:00 »
Цитировать
вся проблема в том, что меню появляется не только тогда, когда я навожу мышь на родительский ul но и тогда когда я навожу на любой подпункт данного меню
А если для #mainmenu ul ul z-index не 600 а -1 поставить? а для ховера уже 600?
Создание сайтов, шаблонов, помощь в решении проблем.
*

fbr

  • Живу я здесь
  • 1284
  • 142
Re: Выпадающее меню на CSS
« Ответ #4 : 14.05.2016, 13:00:39 »
mainmenu ul > li:hover > ul { ..
попробуйте заменить на:
mainmenu > ul > li:hover > ul {
*

Nargal

  • Захожу иногда
  • 12
  • 0
Re: Выпадающее меню на CSS
« Ответ #5 : 15.05.2016, 10:50:56 »
А если для #mainmenu ul ul z-index не 600 а -1 поставить? а для ховера уже 600?

Вообще ничего не даёт...
*

Nargal

  • Захожу иногда
  • 12
  • 0
Re: Выпадающее меню на CSS
« Ответ #6 : 15.05.2016, 10:51:49 »
mainmenu ul > li:hover > ul { ..
попробуйте заменить на:
mainmenu > ul > li:hover > ul {

Ничего не меняется...
*

Nargal

  • Захожу иногда
  • 12
  • 0
Re: Выпадающее меню на CSS
« Ответ #7 : 15.05.2016, 10: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

  • Осваиваюсь на форуме
  • 128
  • 18
  • Троллей не кормлю.
Re: Выпадающее меню на CSS
« Ответ #8 : 16.05.2016, 10: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

  • Захожу иногда
  • 12
  • 0
Re: Выпадающее меню на CSS
« Ответ #9 : 16.05.2016, 14:35:10 »
Нужно анимировать не "all", а только нужные свойства. Допустим, вот то, что я говорил, прятать влево подменю - это анимировать не надо.

Спасибо, разобрался!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Странно ведет себя стандартное меню. Помогите, люди добрые

Автор Little Muk

Ответов: 0
Просмотров: 45
Последний ответ 24.09.2017, 23:20:34
от Little Muk
Меню во всю ширину

Автор mastamatey

Ответов: 9
Просмотров: 117
Последний ответ 20.09.2017, 13:25:44
от mastamatey
Пункт меню - Блог категорий

Автор Pusr

Ответов: 0
Просмотров: 32
Последний ответ 19.09.2017, 13:02:33
от Pusr
Как сделать два разных меню для конкретных страниц\?

Автор aniangeless

Ответов: 1
Просмотров: 70
Последний ответ 17.09.2017, 13:32:50
от vipiusss
не отображается привязка модуля к пунктам меню

Автор s0l0mka

Ответов: 3
Просмотров: 52
Последний ответ 04.09.2017, 13:40:08
от effrit