Пишем разметку:
Пишем стиль:
Пишем jquery:
Смотрим наш результат:
HTML:
<body>
<div class="nav-wrapper">
<nav>
<div class="navigation">
<ul class="nav-items">
<li><a href="https://facebook.com/amaurydiallo" target="_blank">Home</a></li>
<li><a href="https://facebook.com/amaury224" target="_blank">Portfolio</a></li>
<li><a href="https://facebook.com/amaurydiallo" target="_blank">About</a></li>
<li><a href="https://facebook.com/amaurydiallo" target="_blank" title="+224 06 17 85">Contact</a></li>
</ul>
<div class="nav-toogler"></div>
</div>
</nav>
</div>
</body>
CSS:
*, *::before, *::after{
box-sizing: border-box;
}
body{
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}
.nav-wrapper{
position: relative;
width: 100%;
height: 100%;
font-family: "Trebuchet MS" , Arial;
}
.nav-wrapper::before,
.nav-wrapper::after{
content: '';
position: relative;
display: block;
width: 100%;
height: 50%;
background-color: #EAFBFF;
}
.nav-wrapper::after{
background-color: #208FF9;
}
.nav-wrapper nav{
position: absolute;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.navigation{
max-width: 500px;
border-radius: 8px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
background-color: #fff;
padding-right: 30px;
line-height: 3;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-wrapper ul{
display: flex;
justify-content: space-between;
list-style: none;
width: 0;
overflow: hidden;
transition: .4s cubic-bezier(.77,0,.18,1);
}
.nav-wrapper.active ul{
width: 420px;
margin-right: 20px;
}
a{
color: #888;
text-decoration: none;
transition: .3s;
}
a:hover{
color: #3C9DFB;
}
.nav-toogler{
position: relative;
display: inline-block;
width: 40px;
height: 48px;
padding: 14px 5px;
cursor: pointer;
}
.nav-wrapper:not(.active) .nav-toogler{
margin-left: -10px;
}
.nav-toogler::before,
.nav-toogler::after{
content: '';
position: relative;
display: block;
width: 30px;
height: 3px;
background-color: #3C9DFB;
transition: .4s cubic-bezier(.77,0,.18,1);
}
.nav-toogler::after {
margin-top: 10px;
}
.nav-wrapper.active .nav-toogler::before,
.nav-wrapper.active .nav-toogler::after{
position: absolute;
top: 50%;
background-color: #3C9DFB;
transform: rotate(135deg);
}
.nav-wrapper.active .nav-toogler::after {
transform: rotate(-135deg);
margin-top: 0;
}
JavaScript:
let navWrapper = document.querySelector('.nav-wrapper'),
navToogler = document.querySelector('.nav-toogler')
navToogler.addEventListener('click', function (event) {
navWrapper.classList.toggle('active')
})