Нужна небольшая помощь с меню, сделал эффект, но меню изчезает?

Question

[Антон Вебсайтовский]

Здравствуйте, сделал горизонтальное меню, решил сделать необычный эффект, работает в ie9, не пришлось применять js и т.д.

Я вот не могу сформулировать так что бы было понятно ! допустим на фотке так сделано, эффект этот это фон зеленый, который увеличивается при наводе мышки, срабатывает scale(1.3); и так же opacity: 0;, выходит что зеленый фон увеличивается и исчезает, вот эффект и выходит ) а по верх данного фона, фотка ! у фотки размеры и у фона одни и те же, просто фон под фоткой его и не видно, наводим на фотку и срабатывает эффект ! фотка не исчезает! исчезает фон который увеличивается, фото остается.

Для меню выходит нужно сделать так, так же этот эффект зеленый фон стоит но срабатывает при наведении мышкой на меню, срабатывает scale(1.3); и opacity: 0;, зеленый фон увеличивается и исчезает, но надо чтобы по мимо этого применялся класс, который будет оставлять меню по верх эффекта ! то есть два класса, один эффект, другой это меню ! как то так.

Надеюсь меня понятно.

Стиль который хотелось бы что бы применялся. ( тот который будет оставаться после эффекта. )

.sky-mega-menu li:hover > a{
height: 45px;
line-height: 45px;
background:  #7FBB66;
color: #ffffff;
}

Вот рабочий пример меню: https://jsfiddle.net/xxoa2f88/

Answer 1

[zemka99]

https://jsfiddle.net/xxoa2f88/1/

Comments

[Антон Вебсайтовский]

спасибо большое.

[Антон Вебсайтовский]

Добавили сюда (overflow: hidden;)

.menushkabg{
background-color: #4C3F59;
width: 100%;
height: 55px;
line-height: 55px;
overflow: hidden;
}

из за этого подменю не вылезает. ну второй уровень.
я убрал и подменю стало вылезать.

щас шрифт остается его видно, а как сделать что бы еще выделенный раздел был допустим зеленым цветом #77BB66

[zemka99]

https://jsfiddle.net/xxoa2f88/2/

[Антон Вебсайтовский]

zemka99: это выделенное, можно сделать когда зашел в раздел ! а я хотел что бы просто мышкой навел сработал эффект и такое выделение было. если мышку держишь на разделе. еще проблема, меню теперь не кликабельно, ссылки не работают.

[zemka99]

Антон Вебсайтовский: https://jsfiddle.net/xxoa2f88/3/
мне кажется это такие доделки, которые вы бы могли сами легко сделать

[Антон Вебсайтовский]

zemka99: Большое спасибо, все работает, я только поправил чтобы было как я хотел, мне нужна ваша помощь, как мне сделать для кнопки button или для input кнопки такое. пытался но сам не смог.

[Антон Вебсайтовский]

zemka99: вот стили кнопки !

.autorezalkaknop input{
height: 40px;
width: 342px;
padding-left: 15px;
padding-right: 15px;
border: none;
font-size: 14px;
text-align: center;
color: #ffffff;
background-color: #4C3F59;
text-transform: uppercase;
margin-left: 4px;
margin-right: 5px;
}
.autorezalkaknop input:hover{
background-color: #77BB66;
}
.autorezalkaknop input:focus {
background-color: #77BB66;
}

[zemka99]

Антон Вебсайтовский: Антон, у вас есть все необходимые данные(а именно - пример, разобранный выше), чтобы решить эту проблему самостоятельно. Учитесь, думайте, смотрите больше примеров и все получится. Помочь советом или разобраться тут помогут, а делать вашу работу за вас - неправильно. Объективно вы можете справится с этой задачей

[Антон Вебсайтовский]

zemka99: я делал, span вставлял, но у меня не работает, я что то не так делаю, тут li, ul, а там без всего этого.

Answer 2

[Дмитрий]

.sky-mega-menu li:hover > a,
.sky-mega-menu li.current > a {
background:  #7FBB66;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
opacity: 1;    /* было opacity: 0;   */
color: #ffffff;
}

Comments

[Антон Вебсайтовский]

Я так делал< эффекта вспышки этого не будет. в том то и дело, понятно что opacity: 0; делает что бы меню исчезало ! а плавно из за scale(1.3);, так надо что бы какой то другой стиль применялся что бы оставалось меню и был эффект этот.

[Антон Вебсайтовский]

Я вот не могу сформулировать так что бы было понятно ! допустим на фотке так сделано, эффект этот это фон зеленый, который увеличивается при наводе мышки, срабатывает scale(1.3); и так же opacity: 0;, выходит что зеленый фон увеличивается и исчезает, вот эффект и выходит ) а по верх данного фона, фотка ! у фотки размеры и у фона одни и те же, просто фон под фоткой его и не видно, наводим на фотку и срабатывает эффект ! фотка не исчезает! исчезает фон который увеличивается, фото остается.

Для меню выходит нужно сделать так, так же этот эффект зеленый фон стоит но срабатывает при наведении мышкой на меню, срабатывает scale(1.3); и opacity: 0;, зеленый фон увеличивается и исчезает, но надо чтобы по мимо этого применялся класс, который будет оставлять меню по верх эффекта ! то есть два класса, один эффект, другой это меню ! как то так.

[Дмитрий]

Антон Вебсайтовский: Вы делаете целый элемент прозрачным, а потом пытаетесь показать его содержимое!!! так не будет работать, нужно искать другой путь решения.

[Антон Вебсайтовский]

Дмитрий: я уверен что можно сделать один элемент прозрачным уходит но по верх появляется нормальный.

[Антон Вебсайтовский]

Забыл написать, кнопки стали не кликабельные.