Задать вопрос
@2slide
javascript

Как сделать выпадающее меню как Яндексе?

Как сделать появление меню как у Яндкса?
Плавное появление с легким выпадением.
35021007323a4616928c0d28e18af4d8.jpg

Пробовал и вот что осталось.
Плавного появления нет, задержка и сразу появление.
$("#more").click(function(){
	$('.more_menu').fadeIn(500).css('display', 'block');
 });

Спасибо.
  • Вопрос задан
  • 2894 просмотра
1 комментарий
Подписаться 5 Оценить 1 комментарий
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую. 
$('.more').click(function(){
  var menu = $('.menu');
  if (menu.css('display') == 'none') {
    menu.fadeIn(300);
  }
  else {
    menu.fadeOut(100);
  }
});

Пример:
codepen.io/iiil/pen/HEDeI
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 4
LuckyTrue
@LuckyTrue
JS-разработчик
Нельзя анимировать из display: none в display: block. Попробуйте через opacity и положение элемента.
Ответ написан
Комментировать
Комментировать
street
@street
Backend developer
Достаточно просто написать:

$("#more").click(function(){
	$('.more_menu').fadeIn('fast');
});


Элемент ".more_menu" должен быть изначально display:none;
Ответ написан
Комментировать
Комментировать
@lnked 
$("#more").click(function(){
	$('.more_menu').fadeIn(500).css('display', 'block');
 });

в вашем примере, начинается фейд и не успев отработать пол секунды, элементу сразу приписывается display block
что бы этого не было сделайте так:
$("#more").click(function(){
	$('.more_menu').fadeIn(500, function(){
             $(this).css('display', 'block');
        });
 });

то есть дисплей блок пропишется только после того как пройдет анимация.
Ответ написан
Комментировать
Комментировать
temp-market
@temp-market
Фронтэнд разработчик 
var moremenu = $('.more_menu');
moremenu.hide();
$("#more").click(function(){
	$('.more_menu').fadeIn(500);
 });


И все сделай переменную more_menu и скрой его через hide();, потом сделай через fadeIn(интервал). И все не нужно задавать css после fadeIn
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Помочь с запуском бота
20 апр. 2024, в 13:23
1000 руб./за проект
Младший системный аналитик
20 апр. 2024, в 12:50
30000 руб./за проект
Скопировать верстку, посадить на функционал
20 апр. 2024, в 12:01
20000 руб./за проект
Ещё заказы