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

Nargal

  • Осваиваюсь на форуме
  • 12
  • 0 / 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

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

Nargal

  • Осваиваюсь на форуме
  • 12
  • 0 / 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

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

fbr

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

Nargal

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

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

Nargal

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

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

Nargal

  • Осваиваюсь на форуме
  • 12
  • 0 / 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

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

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

Один пункт меню думает что он главный

Автор DamaVbubi

Ответов: 4
Просмотров: 309
Последний ответ 13.02.2024, 19:49:10
от DamaVbubi
[Решено] Перестали работать переходы по меню сайта

Автор AlexP750

Ответов: 12
Просмотров: 538
Последний ответ 06.02.2024, 12:42:26
от AlexP750
Пропало главное меню, и контент на главной (после обновления)

Автор GTHack

Ответов: 15
Просмотров: 541
Последний ответ 07.01.2024, 16:00:15
от ProtectYourSite
Автоматическая снятие с публикации пункта меню

Автор all_zer

Ответов: 2
Просмотров: 341
Последний ответ 30.12.2023, 15:29:58
от all_zer
Отображение меню мобильной версии сайта

Автор AnSk

Ответов: 1
Просмотров: 346
Последний ответ 22.08.2023, 18:52:55
от arma