Thursday, 25 August 2016

CREATE AN ANIMATED DROP DOWN MENU

     
  No comments  
It's been a while when we created a simple drop down menu, so we thought it would be a good time to revisit the subject. Here we'll describe a few additional animations and effects you can add to your drop down menu to make your site look nicer

HTML

All of the examples use the same markup consisting of a simple unordered list. and a nav tag

<nav class="nav">
    <ul>
        <li>
            <a href="#">mother</a>
            <ul>
                <li><a href="#">son</a></li>
                <li><a href="#">son</a></li>
                <li><a href="#">son</a></li>
            </ul>
        </li>
        <li>
            <a href="#">father</a>
            <ul>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
            </ul>
        </li>
<li>
            <a href="#">father</a>
            <ul>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
            </ul>
        </li>
<li>
            <a href="#">father</a>
            <ul>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
            </ul>
        </li>
<li>
            <a href="#">father</a>
            <ul>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS


This CSS puts the top-level nav items in a line with some styling, and sets the groundwork for the various drop-down methods that follow. The most important thing here is the position: relative on .nav ul > li. Without this the dropdown menus would not be positioned "relative" to the parent item.
be conscious of what you set your position to it has the ability to influence your view

 .nav ul {
    *zoom:1;
    list-style:none;
    margin:0;
    padding:0;
    background:#333;
}
.nav ul:before,.nav ul:after {
    content:"";
    display:table;
}
.nav ul:after {
    clear:both;
}
.nav ul > li {
    float:left;
    position:relative;
}
.nav a {
    display:block;
    padding:10px 20px;
    line-height:1.2em;
    color:#fff;
    border-left:1px solid #595959;
}
.nav a:hover {
    text-decoration:none;
    background:#595959;
}
.nav li ul {
    background:#273754;
}
.nav li ul li {
    width:200px;
}
.nav li ul a {
    border:none;
}
.nav li ul a:hover {
    background:rgba(0,0,0,0.2);
}

today we will be discuss the fold out animated type

 FOLD OUT

 This approach uses a combination of transitioning max-height like in the second slide down example, but adds perspective and rotation to the transition. perspective gives us depth, where the lower the number is the "closer" the object appears which gives it a much more pronounced depth effect. Higher numbers would make the effect more subtle. rotate3d with a value of -90deg creates an effect where the element appears to have rotated away from you. Adding a transition to all of these results in the desired effect. Unfortunately this implementation only works with webkit, so only Chrome and Safari users get to see it.

.nav li ul {
    position:absolute;
    left:0;
    top:36px;
    z-index:1;
    max-height:0;
    overflow:hidden;
    -webkit-transform:perspective(400) rotate3d(1,0,0,-90deg);
    -webkit-transform-origin:50% 0;
    -webkit-transition:350ms;
    -moz-transition:350ms;
    -o-transition:350ms;
    transition:350ms;
}
.nav ul > li:hover ul {
    max-height:1000px;
    -webkit-transform:perspective(400) rotate3d(0,0,0,0);
}

here is your code in full


<html>
<head>
<style>
.nav ul {
    *zoom:1;
    list-style:none;
    margin:0;
    padding:0;
    background:teal;
}
.nav ul:before,.nav ul:after {
    content:"";
    display:table;
}
.nav ul:after {
    clear:both;
}
.nav ul > li {
    float:left;
    position:relative;
}
.nav a {
    display:block;
    padding:10px 20px;
    line-height:1.2em;
    color:#fff;
    border-left:1px solid #595959;
text-decoration:none;
}
.nav a:hover {
    text-decoration:none;
    background:#595959;
}
.nav li ul {
    background:#273754;
}
.nav li ul li {
    width:200px;
}
.nav li ul a {
    border:none;
}
.nav li ul a:hover {
    background:rgba(0,0,0,0.2);
}
.nav li ul {
    position:absolute;
    left:0;
    top:36px;
    z-index:1;
    max-height:0;
    overflow:hidden;
    -webkit-transform:perspective(400) rotate3d(1,0,0,-90deg);
    -webkit-transform-origin:50% 0;
    -webkit-transition:350ms;
    -moz-transition:350ms;
    -o-transition:350ms;
    transition:350ms;
}
.nav ul > li:hover ul {
    max-height:1000px;
    -webkit-transform:perspective(400) rotate3d(0,0,0,0);
}
</style>
</head>
<body>
<nav class="nav">
    <ul>
        <li>
            <a href="#">mother</a>
            <ul>
                <li><a href="#">son</a></li>
                <li><a href="#">son</a></li>
                <li><a href="#">son</a></li>
            </ul>
        </li>
        <li>
            <a href="#">father</a>
            <ul>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
            </ul>
        </li>
<li>
            <a href="#">father</a>
            <ul>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
            </ul>
        </li>
<li>
            <a href="#">father</a>
            <ul>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
            </ul>
        </li>
<li>
            <a href="#">father</a>
            <ul>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
                <li><a href="#">daugter</a></li>
            </ul>
        </li>
    </ul>
</nav>
</body>

 </html>


your result should look like this drag your mouse around it to see



Share:

0 comments:

Post a Comment