Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Dropdown Menu using PureCSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 312
    Comment on it

    Dropdown Menu is used where user has to show list of items for example in selecting countries and state name or finding this list of any latest technology , movies or it should be anything that gives us option to do a choice. This dropdown menu allows multi-level sub-menu which results to many other menus that could be possible using the jQuery in some way. But it's possible using pureCSS and HTML by adding effects of transition to it and uses animation property also, that will help to open the list downwards or it will just work as accordian.

    HTML code:-

    
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    </head>
    <body>
    <div class="container">
      <h1 class="title">Dropdown Menu</h1> <!-- this is heading tag -->
      <ul>
        <li class="dropdown">
          <input type="checkbox" />
          <a href="#" data-toggle="dropdown">First Menu</a> <!-- this is first div displaying the dropdown -->
          <ul class="dropdown-menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <input type="checkbox" />
          <a href="#" data-toggle="dropdown">Second Menu</a> <!-- this is second div displaying the dropdown -->
          <ul class="dropdown-menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <input type="checkbox" />
          <a href="#" data-toggle="dropdown">Third Menu</a> <!-- this is third div displaying the dropdown -->
          <ul class="dropdown-menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </li>
      </ul>
    </div>
    </body>
    </html>

    CSS code:-

    @import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
    @import url(http://fonts.googleapis.com/css?family=Pacifico); /*link is used for supporting fonts*/
    body {
      font-family: "Lato", Helvetica, Arial;
      font-size: 16px;
    }
    
    *, *:before, *:after {
      -webkit-border-sizing: border-box;
      -moz-border-sizing: border-box;
      border-sizing: border-box;
    }
    
    .container {
      width: 350px;
      margin: 50px auto;
    }
    .container > ul {
      list-style: none;
      padding: 0;
      margin: 0 0 20px 0;
    }
    
    .title {
      font-family: 'Pacifico'; /*Title of the text will be in pacifico font-family*/
      font-weight: norma;
      font-size: 40px;
      text-align: center;
      line-height: 1.4;
      color: #C0392B;
    }
    
    .dropdown {
      position: relative;
    }
    .dropdown a {
      text-decoration: none;
    }
    .dropdown [data-toggle="dropdown"] {
      display: block;
      color: white;
      background: #C0392B;
      -moz-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
      -webkit-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
      box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
      padding: 10px;
    }
    .dropdown [data-toggle="dropdown"]:hover {
      background: #cd3d2e;
    }
    .dropdown [data-toggle="dropdown"]:before { /*this is used for the drop-down icon*/
      position: absolute;
      display: block;
      content: '\25BC';
      font-size: 0.7em;
      color: #fff;
      top: 13px;
      right: 10px;
      pointer-events:none;
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -moz-transition: -moz-transform 0.6s;
      -o-transition: -o-transform 0.6s;
      -webkit-transition: -webkit-transform 0.6s;
      transition: transform 0.6s;
    }
    .dropdown > .dropdown-menu {
      max-height: 0;
      overflow: hidden;
      list-style: none;
      padding: 0;
      margin: 0;
      -moz-transform: scaleY(0);
      -ms-transform: scaleY(0);
      -webkit-transform: scaleY(0);
      transform: scaleY(0);
      -moz-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
      -webkit-transform-origin: 50% 0%;
      transform-origin: 50% 0%;
      -moz-transition: max-height 0.6s ease-out;
      -o-transition: max-height 0.6s ease-out;
      -webkit-transition: max-height 0.6s ease-out;
      transition: max-height 0.6s ease-out;
      animation: hideAnimation 0.4s ease-out;
      -moz-animation: hideAnimation 0.4s ease-out;
      -webkit-animation: hideAnimation 0.4s ease-out;
    }
    .dropdown > .dropdown-menu li {
      padding: 0;
    }
    .dropdown > .dropdown-menu li a {
      display: block;
      color: #6f6f6f;
      background: #EEE;
      -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
      -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
      box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
      text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
      padding: 10px 10px;
    }
    .dropdown > .dropdown-menu li a:hover {
      background: #f6f6f6;
    }
    .dropdown > input[type="checkbox"] {
      opacity: 0;
      display: block;
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
    .dropdown > input[type="checkbox"]:checked ~ .dropdown-menu { /*adding animation on the div*/
      max-height: 9999px;
      display: block;
      -moz-transform: scaleY(1);
      -ms-transform: scaleY(1);
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
      animation: showAnimation 0.5s ease-in-out;
      -moz-animation: showAnimation 0.5s ease-in-out;
      -webkit-animation: showAnimation 0.5s ease-in-out;
      -moz-transition: max-height 2s ease-in-out;
      -o-transition: max-height 2s ease-in-out;
      -webkit-transition: max-height 2s ease-in-out;
      transition: max-height 2s ease-in-out;
    }
    .dropdown > input[type="checkbox"]:checked + a[data-toggle="dropdown"]:before {
      -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      -webkit-transform: rotate(-180deg);
      transform: rotate(-180deg);
      -moz-transition: -moz-transform 0.6s;
      -o-transition: -o-transform 0.6s;
      -webkit-transition: -webkit-transform 0.6s;
      transition: transform 0.6s;
    }
    
    @keyframes showAnimation { /*keyframe used for animating the dropdown*/
      0% {
        -moz-transform: scaleY(0.1);
        -ms-transform: scaleY(0.1);
        -webkit-transform: scaleY(0.1);
        transform: scaleY(0.1);
      }
      40% {
        -moz-transform: scaleY(1.04);
        -ms-transform: scaleY(1.04);
        -webkit-transform: scaleY(1.04);
        transform: scaleY(1.04);
      }
      60% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
      }
      80% {
        -moz-transform: scaleY(1.04);
        -ms-transform: scaleY(1.04);
        -webkit-transform: scaleY(1.04);
        transform: scaleY(1.04);
      }
      100% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
      }
      80% {
        -moz-transform: scaleY(1.02);
        -ms-transform: scaleY(1.02);
        -webkit-transform: scaleY(1.02);
        transform: scaleY(1.02);
      }
      100% {
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }
    }
    @-moz-keyframes showAnimation {
      0% {
        -moz-transform: scaleY(0.1);
        -ms-transform: scaleY(0.1);
        -webkit-transform: scaleY(0.1);
        transform: scaleY(0.1);
      }
      40% {
        -moz-transform: scaleY(1.04);
        -ms-transform: scaleY(1.04);
        -webkit-transform: scaleY(1.04);
        transform: scaleY(1.04);
      }
      60% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
      }
      80% {
        -moz-transform: scaleY(1.04);
        -ms-transform: scaleY(1.04);
        -webkit-transform: scaleY(1.04);
        transform: scaleY(1.04);
      }
      100% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
      }
      80% {
        -moz-transform: scaleY(1.02);
        -ms-transform: scaleY(1.02);
        -webkit-transform: scaleY(1.02);
        transform: scaleY(1.02);
      }
      100% {
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }
    }
    /**/
    @keyframes hideAnimation {
      0% {
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }
      60% {
        -moz-transform: scaleY(0.98);
        -ms-transform: scaleY(0.98);
        -webkit-transform: scaleY(0.98);
        transform: scaleY(0.98);
      }
      80% {
        -moz-transform: scaleY(1.02);
        -ms-transform: scaleY(1.02);
        -webkit-transform: scaleY(1.02);
        transform: scaleY(1.02);
      }
      100% {
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
      }
    }

    OUTPUT:- Just do copy the above code and get output on your screen.

    Keep Coding!

 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: