fbpx

Membuat Dropdown Menu Animasi Responsive Dengan CSS3

Membuat Dropdown Menu Animasi Responsive Dengan CSS3

Navigasi menu dropdown dengan fade in dan animasi cantik untuk geser sub menu ke atas. CSS animasi menu ini berjalan baik di semua browser modern termasuk Internet Explorer.

Menu ini juga memiliki border-radius dan box-shadow yang dapat terlihat sempurna dalam IE9 +

Untuk browser Safari yang digunakan pada handphone, iPad dll sub menu dapat ditutup dengan menekan layar dimana saja. Untuk lebih jelasnya silahkan coba Live Demo di Bawah ini:

<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#url">Services</a>
    <ul>
      <li>
        <span><a href="#">Printing &amp; Framing</a>
        <span><a href="#">Photo Editing</a>
        <span><a class="last" href="#">Storage &amp; Backup</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href="#url">Contacts</a>
    <ul>
      <li>
        <span><a href="#">Support</a>
        <span><a href="#">Sales</a>
        <span><a href="#">Buying</a>
        <span><a href="#">Photographers</a>
        <span><a href="#">Stockist</a>
        <span><a class="last" href="#">General</a>
        </span></span></span></span></span></span>
      </li>
    </ul></li>
    <li><a href="#url">Stores Location</a>
    <ul>
      <li>
        <span><a href="#">South West Region</a>
        <span><a href="#">North East Region</a>
        <span><a class="last" href="#">Central Region</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href="#url">Contact Us</a>
    <ul>
      <li>
        <span><a href="#">Email Addresses</a>
        <span><a href="#">By Post</a>
        <span><a class="last" href="#">Telephone Numbers</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href="#url"> Sales </a>
    <ul>
      <li>
        <span><a href="#">Digital SLR Cameras</a>
        <span><a href="#">Interchangeable Lenses</a>
        <span><a href="#">Flash Guns &amp; Accessories</a>
        <span><a href="#">Professional Tripods</a>
        <span><a class="last" href="#">Filters &amp; Lens Hoods</a>
        </span></span></span></span></span>
      </li>
    </ul></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</div>

/* Responsive Nav Menu Copyright @ ajatshare.blogspot.com */
.menu {position:relative; z-index:100;}
.menu ul {padding:0; margin:0;list-style:none; font-family: 'arial', sans-serif; font-size:14px;}
.menu > ul {height:35px; background:#555; border-radius:5px 5px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
.menu > ul > li {float:left; position:relative; white-space:nowrap;}
.menu > ul > li > a {line-height:35px; height:35px; display:block; margin-top:0; padding:0 10px; color:#fff; text-decoration:none; background:#555; border-radius:5px 5px 0 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.menu ul ul {position:absolute; left:-9999px; top:36px; margin-top:40px;
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a {display:block; float:left; height:30px; width:160px; line-height:30px; background:#69c; padding:0 10px; color:#fff; text-decoration:none; margin-top:50px;
box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a.last {border-radius:0 0 5px 5px;}
.menu ul li:hover {z-index:100;}
.menu > ul > li:hover > a {background:#69c; margin-top:-4px; height:40px;
 box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
 }
.menu ul li:hover ul {left:0; width:180px; margin-top:0;
-webkit-transition: margin 0.25s;
-moz-transition: margin 0.25s;
-ms-transition: margin 0.25s;
-o-transition: margin 0.25s;
transition: margin 0.25s;
}
.menu ul ul li span {display:block; opacity:0;
-webkit-transition: 0.5s 0.25s;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
.menu ul li:hover ul li span {opacity:1;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a {margin-top:0;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a:hover {background:#555;}
.menu ul + img {position:fixed; left:0; top:0; width:0; height:0; z-index:-1;}
.menu ul:hover + img {width:100%; height:100%;}

Menu support untuk IE7, IE8, IE9 Firefox, Safari, Opera, Chrome, Flock, SeaMonkey, Avant, iPhone, iPod Touch dan iPad.
Tags:
Previous Post

Breadcrumbs SEO Friendly dan Valid HTML5

Next Post

Dropdown Navigation Menu Responsive Cross Browser

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Hosting Unlimited Indonesia
0

Your Cart