Making Animated Dropdown Menu by Using Pure CSS Like Bootstrap does

Question

I'm working with my own project to build a stylesheet(CSS) as what bootstrap does. However, I try to use only PURE CSS - no javascript or jquery even flash to do that.

Now, I'm having trouble with the Animated Menu Dropdown when small resizing as what mobile version looks like.

What I want is:

First, When the browser resize less then 768 and 480 or (55%), the animated circle menu appears, animating and Menu is hidden. After that, on hover (<div class="acn-menu"></div>), the animated circle menu runs again. When user click or touch the animated circle menu, the animated circle menu stops and the dropdown menu appears and push the content below it with no scrollbar at the same time as the animated circle rolls back and stops.

Second, How to be compatible with all browsers (even, in IE).

Here's what I have done more than a week: (Sorry for my bad English): I have just uploaded the sample in this site below:

Demo The Dropdown-Menu

HTML:

<header>
<div id="acn-border"></div><div class="acn-title"><a href="#">
<h1>Appacyber</h1></a></div>
    <div class="menu-container">
        <div class="acn-menu"></div>
            <nav>
                <ul class="main-menu">
                    <li><a href="#" class="home"><span class="fa 
fa-home"></span> Home</a></li>
                    <li><a href="#">Produk <span class="fa fa-caret-
down"></span> </a>
                        <ul class="sub-menu">
                            <li><a href="#">Desain Website</a></li>
                            <li><a href="#">Desain/Edit CMS</a></li>
                            <li><a href="#">Order Template Blogspot</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown" href="#">Pembayaran <span 
class="fa fa-caret-down"></span> </a>
                        <ul class="sub-menu">
                            <li><a href="#">Via Transfer Bank</a></li>
                            <li><a href="#">Via Pulsa</a></li>
                            <li><a href="#">Via Paypal</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Order</a></li>
                    <li><a href="#">Contact</a></li>
                    <input type="text" class="input-acn-search" 
placeholder="search ..."/><button type="button" class="btn-search">&
gt;</button>
                </ul>
            </nav>

    </div>
</header>

<!--here the content to be pushed when the screen in small rezise-->

STYLESHEET:

<style>
.input-acn-search{
border:1px solid #979797;
padding:7px 34px 7px 7px;
font-size:14px;
font-weight:400;
color:#111;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:7px 0px 0px 10px;
}
.btn-search{
background:#006666;
color:#fff;
border:0px;
font-size:18px;
margin:0px 0px 0px -30px;
-webkit-border-radius:17px;
-moz-border-radius:17px;
border-radius:17px;
border:0px;
min-width:5%;
}
.input-acn-search:hover{
background:#fff;
border:1px solid #979797;
}
.input-acn-search placeholder{
color:#666666;
}
.acn-title{
margin:0px;
height:45px;
padding:0px 25px 0px 25px;
background:#FF9900;
line-height:normal;
vertical-align:middle;
display:table-cell!important;
}
.menu-container{
width:100%;
margin:0px;
height:45px;
padding:0px;
background:#222222;
line-height:normal;
vertical-align:middle;
display:table-cell!important;
}
.acn-title a,.acn-title a h1{
color:#FFFFFF;
font-size:19px;
font-weight:500;
font-style:normal;
font-size-adjust:inherit;
}
.acn-title a:hover,.acn-title a:hover h1{
color:#999;
}
#acn-border{
position:absolute;
width:20px;
height:20px;
border-top:17px solid transparent;
border-left:21px solid #FF9900;
border-bottom:17px solid transparent;
display:table-cell;
margin-top:7px;
margin-left:140px;
z-index:1;
}
ul,li,ul li{
list-style:none;
list-style-image:none;
background:none;
}
/*------menu-------*/
nav ul.main-menu li a{
color:#fff;
}
.home a{
background:#9966CC;
color:#e0e0e0;
-webkit-border-radius:0px 37px 37px 0px;
border-radius:0px 37px 37px 0px;
}
nav ul {
-webkit-font-smoothing:antialiased;
background:#222222;
margin:0;
padding:0;
height:45px;
}
nav li {
float:left;
margin:0;
padding:0;
position:relative;
min-width:110px;
}
nav a {
background:none;
display:block;
font:normal 14px/50px Ubuntu;
padding:0 25px;
text-align:center;
text-decoration: none;
}
li a{
color:#e0e0e0;
background:none;
}
nav li:hover a {
background:#000;
color:#e0e0e0;
}
nav li ul {
float:left;
left:0;
opacity:0.5;
position:absolute;
top:35px;
visibility:hidden;
z-index:1;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
nav li:hover ul {
opacity:1;
top:50px;
visibility:visible;
}
nav li ul li {
float:none;
width:100%;
}
nav li ul a:hover {
background:#666666;
color:#fff;
}
ul.sub-menu{
min-width:180px;
max-width:100%;
}
ul.sub-menu li:hover{
background-color:#000;
color:#fff;
border:0px;
border:none;
}

@media screen and (max-width:55%){/*bila screen maksimum 55% atau sama dengan #bingkai-mini*/}
@media screen and (max-width:768px) and (max-width:480px) {

    .acn-menu{
    display:block;
    visibility:visible;
    width:37px;
    height:37px;
    margin-top:0px;
    margin-right:17px;
    margin-left:17px;
    background:none;
    border:10px inset #428BCA;
    -webkit-transform:rotate(-180deg);
    -moz-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    transform:rotate(-180deg);
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -o-transition-duration:2s;
    transition-duration:2s;
    -webkit-border-radius:50%!important;
    -moz-border-radius:50%!important;
    -o-border-radius:50%!important;
    border-radius:50%!important;
    }
    .menu-container .acn-menu:hover{
    cursor:pointer;
    display:block;
    visibility:visible;
    width:37px;
    height:37px;
    margin-right:17px;
    margin-left:17px;
    background:none;
    border:10px inset #FF00FF;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -o-transition-duration:2s;
    transition-duration:2s;
    }
    .acn-title{
    width:100%;
    -webkit-border-radius:0px;
    border-radius:0px;
    position:relative;
    }
    .acn-border{
    display:none;
    }

/*---------------MENU------------------*/
    header{
    position:relative;
    }
    nav{
    position:absolute;
    right:0px;
    top:47px;
    width:100%;
    }
    .home a{
    background:#9966CC;
    color:#e0e0e0;
    -webkit-border-radius:0px;
    border-radius:0px;
    width:100%;
    }
    nav ul {
    -webkit-font-smoothing:antialiased;
    background:#222222;
    margin:0;
    padding:0;
    height:45px;
    }
    nav li {
    margin:0;
    padding:0;
    float:none!important;
    position:relative;
    text-align:right;
    background:#666666;
    }
    nav ul.main-menu li a{
    color:#fff;
    }
    nav a {
    background:none;
    display:block;
    font:normal 14px/50px Ubuntu;
    padding:0 25px;
    text-align:center;
    text-decoration: none;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    li a{
    color:#e0e0e0;
    background:none;
    }
    nav li:hover a {
    background:#000;
    color:#e0e0e0;
    }
    nav li ul {
    float:left;
    left:0;
    position:absolute;
    top:35px;
    visibility:hidden;
    z-index:1;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    nav li:hover ul {
    opacity:1;
    top:50px;
    visibility:visible;
    }
    nav li ul li {
    float:none;
    width:100%;
    }
    nav li ul a:hover {
    background:#666666;
    color:#fff;
    }
    ul.sub-menu{
    width:100%;
    min-width:0px;
    }
    ul.sub-menu li:hover{
    position:relative;
    background-color:#000;
    color:#fff;
    border:0px;
    border:none;
    }

}

</style>

Any helps will be great!

Answer 1

DEMO

html, body {
    margin:0;
}
.acn-menu {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.9);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    min-height: 74px;
    width: 100%;
}
.label_openclose {
    display: none;
}
.menu-tabs {
    height: 100%;
}
.menu-tabs .elem {
    box-sizing: border-box;
    padding: 0 20px;
    float: left;
    height: 100%;
    line-height: 70px;
    background-color: rgb(30, 30, 30);
    color: white;
}
@-webkit-keyframes spin {
    0% {
        transform: rotate(-180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(-180deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(-180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(-180deg);
    }
}
.menu-check:checked ~ .label_openclose {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.menu-check {
    display: none;
}
.menu-tabs .elem:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
/*@media screen and (max-width:55%)*/
 @media screen and (max-width:768px) {
    .label_openclose {
        -webkit-animation: spin 2s;
        animation: spin 2s;
        display: inline-block;
        transform: rotate(-180deg);
        transition-duration: 1s;
        margin: 10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border-top: 10px solid rgb(50, 50, 50);
        border-right: 10px solid rgb(100, 100, 100);
        border-bottom: 10px solid rgb(150, 150, 150);
        border-left: 10px solid rgb(200, 200, 200);
        background-color: transparent;
        cursor: pointer;
    }
    .label_openclose:hover {
        transform: rotate(180deg);
    }
    .menu-tabs .elem {
        transition: border 1s linear, height 1s;
        line-height: initial;
        float: initial;
        height: 0px;
        cursor: pointer;
        border-top: 0px solid #000;
        overflow: hidden;
    }
    .menu-tabs:hover .elem {
        height: 25px;
    }
    .menu-check:checked ~ .menu-tabs .elem {
        height: 25px;
        color: white;
        border-top: 2px solid rgba(255, 255, 255, 0.2);
    }
    .label_openclose:hover ~ .menu-tabs .elem {
        border-top: 2px solid rgba(255, 255, 255, 0.2);
        height: 25px;
    }
}

<div class="acn-menu">
    <input type="checkbox" id="openclose" class="menu-check" />
    <label class="label_openclose" for="openclose"></label>
    <div class="menu-tabs">
        <div class="elem">test</div>
        <div class="elem">nav</div>
        <div class="elem">bar</div>
        <div class="elem">with</div>
        <div class="elem">transitions</div>
    </div>
</div>
<main>
    test content of main page
</main>

Animated menu

When the browser resize less then 768 and 480 or (55%), the animated circle menu appears

This i have done with a media query in css: @media screen and (max-width:768px) and setting an animation:

After that, on hover (), the animated circle menu runs again.

This is done with an transform: rotate(180deg); inside an :hover statement.

When user click or touch the animated circle menu, the animated circle menu stops and the dropdown menu appears and push the content below it with no scrollbar at the same time as the animated circle rolls back and stops.

The click is done with an input type="checkbox" element. This is for a special css pseudo selector :checked. This lets us change the style of an :checked. What we do is combine it with an sibling selector so #input:checked ~ .sibling. Now we can style .sibling while we click on the checkbox. In addition to this added a label for the checkbox. label for="#ID" And hide the actual checkbox with display:none;

Rolling back the circle is done with transform: rotate(180deg);.

Browser support should be ok but, I haven't added all the prefixes for all the transforms and animations.

Transition and animation is CSS3 so IE9 doesn't support it.
Should work in IE10 and above.(probably missing -ms- prefixes)
Tested in Chrome 40.0.

Answer 2

DEMO

Please Try This CSS and your html

<style>
.input-acn-search{
border:1px solid #979797;
padding:7px 34px 7px 7px;
font-size:14px;
font-weight:400;
color:#111;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:7px 0px 0px 10px;
}
.btn-search{
background:#006666;
color:#fff;
border:0px;
font-size:18px;
margin:0px 0px 0px -30px;
-webkit-border-radius:17px;
-moz-border-radius:17px;
border-radius:17px;
border:0px;
min-width:5%;
}
.input-acn-search:hover{
background:#fff;
border:1px solid #979797;
}
.input-acn-search placeholder{
color:#666666;
}
.acn-title{
margin:0px;
height:45px;
padding:0px 25px 0px 25px;
background:#FF9900;
line-height:normal;
vertical-align:middle;
display:table-cell!important;
}
.menu-container{
width:100%;
margin:0px;
height:45px;
padding:0px;
background:#222222;
line-height:normal;
vertical-align:middle;
display:table-cell!important;
}
.acn-title a,.acn-title a h1{
color:#FFFFFF;
font-size:19px;
font-weight:500;
font-style:normal;
font-size-adjust:inherit;
}
.acn-title a:hover,.acn-title a:hover h1{
color:#999;
}
#acn-border{
position:absolute;
width:20px;
height:20px;
border-top:17px solid transparent;
border-left:21px solid #FF9900;
border-bottom:17px solid transparent;
display:table-cell;
margin-top:7px;
margin-left:140px;
z-index:1;
}
ul,li,ul li{
list-style:none;
list-style-image:none;
background:none;
}
/*------menu-------*/
nav ul.main-menu li a{
color:#fff;
}
.home a{
background:#9966CC;
color:#e0e0e0;
-webkit-border-radius:0px 37px 37px 0px;
border-radius:0px 37px 37px 0px;
}
nav ul {
-webkit-font-smoothing:antialiased;
background:#222222;
margin:0;
padding:0;
height:45px;
}
nav li {
float:left;
margin:0;
padding:0;
position:relative;
min-width:110px;
}
nav a {
background:none;
display:block;
font:normal 14px/50px Ubuntu;
padding:0 25px;
text-align:center;
text-decoration: none;
}
li a{
color:#e0e0e0;
background:none;
}
nav li:hover a {
background:#000;
color:#e0e0e0;
}
nav li ul {
float:left;
left:0;
opacity:0.5;
position:absolute;
top:35px;
visibility:hidden;
z-index:1;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
nav li:hover ul {
opacity:1;
top:50px;
visibility:visible;
}
nav li ul li {
float:none;
width:100%;
}
nav li ul a:hover {
background:#666666;
color:#fff;
}
ul.sub-menu{
min-width:180px;
max-width:100%;
}
ul.sub-menu li:hover{
background-color:#000;
color:#fff;
border:0px;
border:none;
}

@media screen and (max-width:55%){/*bila screen maksimum 55% atau sama dengan #bingkai-mini*/}
@media screen and (max-width:768px) {

    .acn-menu{
    display:block;
    visibility:visible;
    width:26px;
    height:26px;
    margin-top:0px;
    margin-right:17px;
    margin-left:17px;
    background:none;
    border:10px inset #428BCA;
    -webkit-transform:rotate(-180deg);
    -moz-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    transform:rotate(-180deg);
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -o-transition-duration:2s;
    transition-duration:2s;
    -webkit-border-radius:50%!important;
    -moz-border-radius:50%!important;
    -o-border-radius:50%!important;
    border-radius:50%!important;
    }
    .menu-container .acn-menu:hover{
    cursor:pointer;
    display:block;
    visibility:visible; 
    margin-right:17px;
    margin-left:17px;
    background:none;
    border:10px inset #FF00FF;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -o-transition-duration:2s;
    transition-duration:2s;
    }
    .acn-title{
    width:100%;
    -webkit-border-radius:0px;
    border-radius:0px;
    position:relative;
    }
    .acn-border{
    display:none;
    }
    .main-menu {
        max-height: 0px; 
        overflow:hidden;
        height: 250px;
        transition: max-height 1s;

    }
    .menu-container:hover .main-menu {
      max-height: 250px;
      overflow: visible; 
    }   
    #acn-border {
        margin-left: 50%;
    }
/*---------------MENU------------------*/
    header{
    position:relative;
    }
    nav{
    position:absolute;
    right:0px;
    top:47px;
    width:100%;
    }
    .home a{
    background:#9966CC;
    color:#e0e0e0;
    -webkit-border-radius:0px;
    border-radius:0px;
    width:100%;
    }
    nav ul {
    -webkit-font-smoothing:antialiased;
    background:#222222;
    margin:0;
    padding:0;
    height:45px;
    }
    nav li {
    margin:0;
    padding:0;
    float:none!important;
    position:relative;
    text-align:right;
    background:#666666;
    }
    nav ul.main-menu li a{
    color:#fff;
    }
    nav a {
    background:none;
    display:block;
    font:normal 14px/50px Ubuntu;
    padding:0 25px;
    text-align:center;
    text-decoration: none;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    li a{
    color:#e0e0e0;
    background:none;
    }
    nav li:hover a {
    background:#000;
    color:#e0e0e0;
    }
    nav li ul {
    float:left;
    left:0;
    position:absolute;
    top:35px;
    visibility:hidden;
    z-index:1;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    nav li:hover ul {
    opacity:1;
    top:50px;
    visibility:visible;
    }
    nav li ul li {
    float:none;
    width:100%;
    }
    nav li ul a:hover {
    background:#666666;
    color:#fff;
    }
    ul.sub-menu{
    width:100%;
    min-width:0px;
    }
    ul.sub-menu li:hover{
    position:relative;
    background-color:#000;
    color:#fff;
    border:0px;
    border:none;
    }

}

</style>

Answer 3

It's not necessary to not use javascript due that most peaple always have it enabled, and it has awesome functionalities.

Said the above i found an example on how to help you here: link

There you can find two options, the target pseudo-selector and a CSS3 selector trickery.

hope it helps :3