Navigasi Menu Transition

by dharlaferdana

HTML

<ul class="navbar color1">
    <li><a href="http://www.dhf.web.id/"><i class="icon20 home"></i><span>Home</span></a>
    </li>
    <li><a href="#"><i class="icon20 upload"></i><span>Upload</span></a>
    </li>
    <li class="drpdown"><a href="#"><i class="icon20 comments"></i><span>Posts</span></a>

        <ul class="drpcontent">
            <li><a href="#">Latest Posts</a>
            </li>
            <li><a href="#">Popular Posts</a>
            </li>
            <li><a href="#">Private Posts</a>
            </li>
        </ul>
    </li>
    <li><a href="#"><i class="icon20 login"></i><span>Login</span></a>
    </li>
    <li class="drpdown"><a href="http://www.dhf.web.id/"><i class="icon20 theme"></i><span>Themeselector</span></a>

        <ul class="drpcontent" id="themeselect">
            <li><a href="#" data-color="color1">Orange</a>
            </li>
            <li><a href="#" data-color="color2">Marine</a>
            </li>
            <li><a href="#" data-color="color3">Green</a>
            </li>
            <li><a href="#" data-color="color4">Purple</a>
            </li>
            <li><a href="#" data-color="color5">Red</a>
            </li>
        </ul>
    </li>
</ul>

CSS

body {
  background-color:#eee;
  text-align:center;
}

@import url(http://fonts.googleapis.com/css?family=Dosis:400,700);

.navbar {
    font-family: 'Dosis', sans-serif;
    position: relative;
    display: table;
    float: none;
    list-style-type: none;
    padding: 0;
    margin: 20px auto 250px auto;
}

.navbar:before {
    position: absolute;
    display: block;
    content: "";
    z-index: -1;
    width: 100%;
    height: 18px;
    bottom: -9px;
    left: 2px;
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 75%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.7)), color-stop(75%,rgba(0,0,0,0)));
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
    background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
    background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
    background: radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=1 );
    opacity: .4;
}

.navbar:after {
    position: absolute;
    display: block;
    content: "";
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.navbar > li {
    position: relative;
    float: left;
    display: inline-block;
    list-style-type: none;
    text-align: center;
    margin: 0;
    border-left: 0;
    border: 1px solid rgba(0,0,0,0.5);
    line-height: 35px;
    -webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
   ...