Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Rounded Circle Menu Example

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.35k
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: