사이트 제작시 많이 사용되는 풀메뉴 소스를 공유합니다.
HTML 소스
.plus-btn-pos
.plus-btn
.r1
.r2
.content
div
h1 Fullscreen Menu
h2 Flexbox Style
.menu-container
- for i in (1..3)
.menu-sliders
.menu
ul
li
a Home
li
a About
li
a Work
li
a Contact
CSS 소스
@import url(https://fonts.googleapis.com/css?family=Roboto:300,100);
.content {
display:flex;
justify-content: center;
align-items: center;
position: absolute;
height: 100vh;
width: 100vw;
z-index: 1;
text-align:center;
font-family: 'Roboto', sans-serif;
color: black;
h1 {
font-size: 60px;
margin-bottom: 15px;
font-weight: 300;
}
h2 {
font-size: 42px;
font-weight: 100;
}
}
.menu-container {
z-index: 2;
position: relative;
display:flex;
align-items: stretch;
overflow: hidden;
height: 100vh;
width: 100vw;
pointer-events:none;
}
.menu {
display:flex;
justify-content: center;
align-items: center;
position: absolute;
height: 100vh;
width: 100vw;
z-index: 3;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateY(-100%);
transition: transform 0.5s;
transition-delay:0.5s;
visibility: hidden;
ul {
li {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 45px;
color: white;
min-height: 45px;
padding: 15px;
text-align: center;
a{
cursor:pointer;
}
}
}
}
.menu-sliders {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
transition: flex 0.45s;
&:nth-child(2) {
flex:1 0 100%;
background: transparent;
}
&:nth-child(odd){
background: darken(dodgerblue,20%);
}
}
.plus-btn-pos {
position: absolute;
top: 20px;
right: 20px;
z-index: 5;
}
.plus-btn {
width: 40px;
height: 40px;
border-radius: 40px;
background: white;
position: relative;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
cursor:pointer;
div{
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 3px;
background: rgba(2, 89, 165, 1);
transition: transform 0.3s;
transition-delay: 0.5s;
}
.r1{
transform: translateX(-50%)translateY(-50%)rotate(-90deg);
}
.r2{
transform: translateX(-50%)translateY(-50%)rotate(-180deg);
}
&:hover{
background: rgba(2, 89, 165, 1);
div{
background: white;
}
}
&:active{
box-shadow: none;
}
}
body.menu-open {
.menu-sliders:nth-child(2) {
flex:0 0 0%;
}
.menu {
transform: translateY(0%);
visibility: visible;
pointer-events:all;
}
.plus-btn {
.r1{
transform: translateX(-50%)translateY(-50%)rotate(-45deg);
}
.r2{
transform: translateX(-50%)translateY(-50%)rotate(-135deg);
}
}
}
JS 소스
$('.plus-btn').click(function(){
$('body').toggleClass('menu-open');
})
|
