• Страница 1 из 1
  • 1
Форум » Создание сайта на HTML + CSS » Скрипты сайтов HTML » Меняющееся гамбургер меню на CSS и jQuery (Как создать боковое выпадающее меню с помощью CSS и jQuery)
Меняющееся гамбургер меню на CSS и jQuery
Kosten
Дата: Вторник, 03.07.2018, 17:21 | Сообщение 1
Администраторы
Сообщений:17326
Награды: 55


Еще один анимированный значек, который имеет оригинальный эффект. Специально для мобильных веб сайтов значок меню гамбургеры стал стандартом в наши дни. В этом уроке вы найдете быстрое и простое решение для создания раскрывающегося списка и значка гамбургера с CSS. JQuery позволяет вам создать функцию переключения с несколькими строками кода, который добавляет и удаляет классы css, и на самом деле вам не нужно больше.

Тот же эффект можно использовать в навигационных барах, кнопках и так далее.И они отлично смотрятся в каждом крупном браузере, кроме Internet Explorer 8 и ниже, поскольку они не поддерживают градиенты и тени теней. Пожалуйста, взгляните на исходный код, чтобы больше узнать о них.

В этой статье мы объясним, как разработать меню типа гамбургера, состоящее из фиксированной кнопки на панели навигации, которая при щелчке отображает или скрывает боковое меню, содержащее список ссылок, как мы видим ниже.



HTML

Код
<div class="dilopresa-lsanum" id="amipoloqtugsa" onclick="loperntumag()"></div>


CSS

Код
@charset "utf8";

*,
*:after,
*:before,
html
    {box-sizing:border-box}

body
    {margin:0;padding:0}

div,
div:before,
div:after
    {display:block;position:absolute}

.dilopresa-lsanum{
    width:49.9px;
    height:49.9px;
    top:49.9%;
    left:49.9%;
    cursor:pointer;
    transform:translate(-49.9%,-49.9%);
    animation:hide-show 2.5s ease
    }

@keyframes hide-show{0%,99%{opacity:0}100%{opacity:1}}

.dilopresa-lsanum:before,
.dilopresa-lsanum:after{
    background:#000;
    content:"";
    height:5px;
    border-radius:2px;
    transition:all 2s ease
    }

.dilopresa-lsanum:before
    {animation:open-before 2s ease both}

@keyframes open-before{
    0%{
  width:100%;
  top:15px;
  left:0;
  transform:rotate(45deg) translate(5px,5px)
  }
    25%{
  width:0;
  top:0;
  left:0;
  transform:rotate(45deg) translate(0,0)
  }
    50%{
  width:0;
  top:0;
  left:0;
  transform:rotate(0deg) translate(0,0)
  }
    90%{width:100%;top:0;left:0}
    100%{width:100%;top:15px;left:0}
    }

.dilopresa-lsanum:after
    {animation:open-after 2s ease both}

@keyframes open-after{
    0%{
  width:100%;
  bottom:15px;
  left:0;
  transform:rotate(-45deg) translate(-5px,-5px)
  }
    25%{
  width:0;
  bottom:0;
  left:0;
  transform:rotate(-45deg) translate(0,0)
  }
    50%{
  width:0;
  bottom:0;
  right:0;
  transform:rotate(0deg) translate(0,0)
  }
    90%{width:100%;bottom:0;right:0}
    100%{width:100%;bottom:15px;right:0}
    }

.dilopresa-lsanum:before,
.dilopresa-lsanum:after
    {background:#292627}

.kilosanum:before
    {animation:close-before 2s ease both}

@keyframes close-before{
    0%{width:100%;top:15px;right:0}
    25%{width:100%;top:0;right:0}
    50%{
  width:0;
  top:0;
  right:0;
  transform:rotate(0deg) translate(0,0)
  }
    90%{
  width:0;
  bottom:0;
  right:0;
  transform:rotate(-45deg) translate(0,0)
  }
    100%{
  width:100%;
  top:15px;
  right:0;
  transform:rotate(-45deg) translate(-5px,5px)
  }
    }

.kilosanum:after
    {animation:close-after 2s ease both}

@keyframes close-after{
    0%{width:100%;bottom:15px;left:0}
    25%{width:100%;bottom:0;left:0}
    50%{
  width:0;
  bottom:0;
  right:0;transform:rotate(0deg) translate(0,0)
  }
    90%{
  width:0;
  bottom:0;
  right:0;
  transform:rotate(45deg) translate(0,0)
  }
    100%{
  width:100%;
  bottom:15px;
  right:0;
  transform:rotate(45deg) translate(-5px,-5px)
  }
    }


JS

Код
function loperntumag(){
   document.getElementById("amipoloqtugsa").classList.toggle("kilosanum")
}


Демонстрация
Прикрепления: 0330955.png(19.1 Kb)
Страна: (RU)
Форум » Создание сайта на HTML + CSS » Скрипты сайтов HTML » Меняющееся гамбургер меню на CSS и jQuery (Как создать боковое выпадающее меню с помощью CSS и jQuery)
  • Страница 1 из 1
  • 1
Поиск: