Hi all,
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.
You need to know about pseudo elements for better understanding of this type navigation.
Below is an example of rounded circle menu using pure css.
Html :
<nav class="menu">
<input id="menu-button" type="checkbox" href="#" checked="checked" class="menu-button"/>
<label for="menu-button" class="menu-button-icon">
<span class="hamburger hamburger-bar-1"></span>
<span class="hamburger hamburger-bar-2"></span>
<span class="hamburger hamburger-bar-3"></span>
</label>
<a href="#" class="menu-item">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="menu-item">
<i class="fa fa-rss"></i>
</a>
<a href="#" class="menu-item">
<i class="fa fa-instagram "></i>
</a>
<a href="#" class="menu-item">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="menu-item">
<i class="fa fa-wechat"></i>
</a>
<a href="#" class="menu-item">
<i class="fa fa-whatsapp"></i>
</a>
</nav>
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;
}
Out put :
0 Comment(s)