An interesting CSS trick is the creation of circles navigation, sometimes we need this type of navigation, mainly for mobile. Hence it can be useful.
Below is an example of rounded circle menu using pure css.
body {
background: #fce4ec;
}
.menu {
position: absolute;
left: 50%;
top: 42.5%;
transform: translate(0, -50%);
}
.menu {
font-size: 20px;
width: 380px;
height: 250px;
margin-left: -190px;
margin-top: 5em;
padding-left: 190px;
padding-top: 20px;
}
.menu-button {
display: none;
}
.menu-button:checked + .menu-button-icon {
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transition-duration: 0.2s;
transition-timing-function: linear;
}
.menu-button:checked + .menu-button-icon > .hamburger-bar-1 {
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-button:checked + .menu-button-icon > .hamburger-bar-2 {
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-button:checked + .menu-button-icon > .hamburger-bar-3 {
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu-button:checked ~ .menu-item {
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-button:checked ~ .menu-item:nth-of-type(1) {
transition-duration: 0.18s;
transform: translate3d(0px, -105px, 0);
background: #088dc5;
}
.menu-button:checked ~ .menu-item:nth-of-type(2) {
transition-duration: 0.28s;
transform: translate3d(90.93266742px, -52.5px, 0);
background: #ca6615;
}
.menu-button:checked ~ .menu-item:nth-of-type(3) {
transition-duration: 0.38s;
transform: translate3d(90.93266742px, 52.5px, 0);
background: #673f0b;
}
.menu-button:checked ~ .menu-item:nth-of-type(4) {
transition-duration: 0.48s;
transform: translate3d(0px, 105px, 0);
background: #0a4785;
}
.menu-button:checked ~ .menu-item:nth-of-type(5) {
transition-duration: 0.58s;
transform: translate3d(-90.93266742px, 52.5px, 0);
background: #24680f;
}
.menu-button:checked ~ .menu-item:nth-of-type(6) {
transition-duration: 0.68s;
transform: translate3d(-90.93266742px, -52.5px, 0);
background: #3e7115;
}
.menu-button-icon {
background: #c364ac none repeat scroll 0 0;
border-radius: 100%;
color: #fff;
cursor: pointer;
height: 90px;
line-height: 80px;
margin-left: -55px;
position: absolute;
text-align: center;
top: 5px;
width: 90px;
z-index: 2;
}
.menu-button-icon:hover {
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-button-icon > .hamburger {
background: #fff;
display: block;
width: 25px;
height: 3px;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
position: absolute;
top: 50%;
transition: transform 0.2s;
}
.menu-button-icon > .hamburger-bar-1 {
transform: translate3d(0, -8px, 0);
}
.menu-button-icon > .hamburger-bar-2 {
transform: translate3d(0, 0, 0);
}
.menu-button-icon > .hamburger-bar-3 {
transform: translate3d(0, 8px, 0);
}
.menu-item {
background: #c364ac ;
border-radius: 100%;
color: #fff;
height: 60px;
line-height: 60px;
margin-left: -40px;
position: absolute;
text-align: center;
top: 20px;
transform: translate3d(0, 0, 0);
transition: transform 0.2s ease-out;
width: 60px;
font-size: 1.5em;
border: 2px solid transparent;
}
.menu-item:nth-of-type(1) {
transition-duration: 0.18s;
}
.menu-item:nth-of-type(2) {
transition-duration: 0.18s;
}
.menu-item:nth-of-type(3) {
transition-duration: 0.18s;
}
.menu-item:nth-of-type(4) {
transition-duration: 0.18s;
}
.menu-item:nth-of-type(5) {
transition-duration: 0.18s;
}
.menu-item:nth-of-type(6) {
transition-duration: 0.18s;
}
.menu-item:hover {
border: 2px solid #d997c9;
}
.menu-item:active,
.menu-item:focus {
border: 2px solid #d376bc;
}
0 Comment(s)