햄버거 메뉴 디자인 제안
햄버거 메뉴는 점점 진화해, 아이콘 자체가 빙글빙글 돌고 ✗로 바뀌거나, 그 3개선이 여러가지 움직임을 하게 되었다.
그러나 메뉴 자체는 매우 간단하며 옆이나 위에서 슬라이드하는 것만 ...
뭔가 다른 움직임의 햄버거 메뉴의 디자인을 생각해 보자는 기사.
그러나
codepen
github
이번에는 햄버거를 클릭하면 원이 펼쳐지는 메뉴를 작성.
내용 설명
원의 크기는 고정으로 직경 600px로 하고, 위와 왼쪽으로 300px 시프트하고 있다.
css.hbg-menu {
position: fixed;
top: 12px;
left: 12px;
width: 60px;
height: 50px;
z-index: 1;
}
.hbg-menu-open {
top: -300px;
left: -300px;
width: 600px;
height: 600px;
border-radius: 300px;
}
마지막으로
햄버거 메뉴는 더 진화해 주었으면 한다!
이상
Reference
이 문제에 관하여(햄버거 메뉴 디자인 제안), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ut0n/items/2aa1c91e15aeb504df9c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
원의 크기는 고정으로 직경 600px로 하고, 위와 왼쪽으로 300px 시프트하고 있다.
css
.hbg-menu {
position: fixed;
top: 12px;
left: 12px;
width: 60px;
height: 50px;
z-index: 1;
}
.hbg-menu-open {
top: -300px;
left: -300px;
width: 600px;
height: 600px;
border-radius: 300px;
}
마지막으로
햄버거 메뉴는 더 진화해 주었으면 한다!
이상
Reference
이 문제에 관하여(햄버거 메뉴 디자인 제안), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ut0n/items/2aa1c91e15aeb504df9c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(햄버거 메뉴 디자인 제안), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ut0n/items/2aa1c91e15aeb504df9c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)