Еще один анимированный значек, который имеет оригинальный эффект. Специально для мобильных веб сайтов значок меню гамбургеры стал стандартом в наши дни. В этом уроке вы найдете быстрое и простое решение для создания раскрывающегося списка и значка гамбургера с 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")
}
Демонстрация
