Проблеми с самописной менюшкой, поможете?

Question

[Hyubert]

Привет.

есть такая менюшки

нужно помочь решить 2 проблеми:

1) Как оптимизировать JS, я уверен что такое же можно сделать используя 2-3 строчки кода вместо моих 13

$(document).ready(function()  {
  $("a").hover(function() {       
$(".back").toggleClass("active");
});
  $("#home").hover(function() {       
  $(".home-a").toggleClass("active");
});
  $("#category").hover(function() {       
  $(".category-a").toggleClass("active");
});
  $("#about").hover(function() {       
  $(".about-a").toggleClass("active");
});
});

2) Можно как-то заменить мой способ анимации visibility и opacity , и заанимировать свойство display?

Спасибо.

Answer 1

[Stalker_RED]

Например: codepen.io/anon/pen/JGqRea

Но я бы не цеплялся за id, а лучше переписал бы классы которые должны реагировать в data-атрибуты.

Comments

[Hyubert]

Можете обяснить ето $('.'+this.id+'-a') ?

[Stalker_RED]

Hyubert: Берем id элемента, на котором сработал hover, дописываем точку в начале и '-a' в конце.
И получаем селектор для блока, который нужно показывать.
Говнокод конечно.

[Hyubert]

Stalker_RED: А что на счет второй проблемы?

[Stalker_RED]

Hyubert: список свойств, которые анимируются через CSS https://developer.mozilla.org/en-US/docs/Web/CSS/C...

Среди них нет display.

[Hyubert]

Stalker_RED: жаль

Answer 2

[lega]

как вариант: codepen.io/anon/pen/BjeQdW?editors=1000

Comments

[lega]

А вот так он при клике активным остается
codepen.io/anon/pen/obRYpN?editors=1000

Answer 3

[Михаил Чирский]

Зачем вы для hover используете JS, это все делается на CSS, если нужно чтобы меню запоминалось, то да можно использовать JS для клика.

P.S. Учите верстку, смотрите примеры, JS нужно использовать когда он необходим, ну ваша задача решается стилями

Comments

[Hyubert]

я умею делать через псевдо hover, но я учусь JS по етому пробую разние варианты