Wednesday 18 September 2013


Membuat Dropdown Menu Animasi Responsive Dengan CSS3

Posted on September 18, 2013

membuat dropdown menu
CSS3 Animasi Drop down menu responsive tanpa javacript ini telah di test di berbagai browser:

  • PC
    • IE7
    • Firefox
    • Opera
    • Safari
    • Chrome
  • Mac
    • Firefox
    • Safari
    • Chrome
  • Mobile
    • iPad
    • iPhone
    • iPod Touch

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.

copyright © belajar-wordpress.com

Mari kita buka isinya

HTML

1 <div class="menu">
2     <ul>
3         <li><a href="http://zifana.com">Home</a></li>
4         <li><a href="#url">Services</a>
5         <ul>
6             <li>
7                 <span><a href="http://zifana.com">Printing &amp; Framing</a>
8                 <span><a href="http://zifana.com">Photo Editing</a>
9                 <span><a class="last" href="http://zifana.com">Storage &amp; Backup</a>
10                 </span></span></span>
11             </li>
12         </ul>
13         </li>
14         <li><a href="#url">Contacts</a>
15         <ul>
16             <li>
17                 <span><a href="http://zifana.com">Support</a>
18                 <span><a href="http://zifana.com">Sales</a>
19                 <span><a href="http://zifana.com">Buying</a>
20                 <span><a href="http://zifana.com">Photographers</a>
21                 <span><a href="http://zifana.com">Stockist</a>
22                 <span><a class="last" href="http://zifana.com">General</a>
23                 </span></span></span></span></span></span>
24             </li>
25         </ul>
26         </li><li>
27         </li><li><a href="#url">Stores Location</a>
28         <ul>
29             <li>
30                 <span><a href="http://zifana.com">South West Region</a>
31                 <span><a href="http://zifana.com">North East Region</a>
32                 <span><a class="last" href="http://zifana.com">Central Region</a>
33                 </span></span></span>
34             </li>
35         </ul>
36         </li>
37         <li><a href="#url">Contact Us</a>
38         <ul>
39             <li>
40                 <span><a href="http://zifana.com">Email Addresses</a>
41                 <span><a href="http://zifana.com">By Post</a>
42                 <span><a class="last" href="http://zifana.com">Telephone Numbers</a>
43                 </span></span></span>
44             </li>
45         </ul>
46         </li>
47         <li><a href="#url"> Sales </a>
48         <ul>
49             <li>
50                 <span><a href="http://zifana.com">Digital SLR Cameras</a>
51                 <span><a href="http://zifana.com">Interchangeable Lenses</a>
52                 <span><a href="http://zifana.com">Flash Guns &amp; Accessories</a>
53                 <span><a href="http://zifana.com">Professional Tripods</a>
54                 <span><a class="last" href="http://zifana.com">Filters &amp; Lens Hoods</a>
55                 </span></span></span></span></span>
56             </li>
57         </ul>
58         </li>
59         <li><a href="http://zifana.com">Privacy Policy</a></li>
60     </ul>
61 </div>

CSS

Mungkin Sob perlu menyesuaikan warna background, ukuran dan jenis font dari navigasi menu ini dengan tampilan template yang sedang sob gunakan.

1 /* ================================================================
2 Responsive Nav Menu Copyright @ zifana.com
3 =================================================================== */
4 .menu {position:relative; z-index:100;}
5 .menu ul {padding:0; margin:0;list-style:none; font-family: 'arial', sans-serif; font-size:14px;}
6 .menu > ul {height:35px; background:#555; border-radius:5px 5px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
7 .menu > ul > li {float:left; position:relative; white-space:nowrap;}
8 .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;
9 -webkit-transition: 0.5s;
10 -moz-transition: 0.5s;
11 -ms-transition: 0.5s;
12 -o-transition: 0.5s;
13 transition: 0.5s;
14 }
15  
16 .menu ul ul {position:absolute; left:-9999px; top:36px; margin-top:40px;
17 -webkit-transition: 0s 0.75s;
18 -moz-transition: 0s 0.75s;
19 -ms-transition: 0s 0.75s;
20 -o-transition: 0s 0.75s;
21 transition: 0s 0.75s;
22 }
23 .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;
24 box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
25 -webkit-transition: 0s 0.75s;
26 -moz-transition: 0s 0.75s;
27 -ms-transition: 0s 0.75s;
28 -o-transition: 0s 0.75s;
29 transition: 0s 0.75s;
30 }
31 .menu ul ul li span a.last {border-radius:0 0 5px 5px;}
32 .menu ul li:hover {z-index:100;}
33  
34 .menu > ul > li:hover > a {background:#69c; margin-top:-4px; height:40px;
35  box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
36  }
37 .menu ul li:hover ul {left:0; width:180px; margin-top:0;
38 -webkit-transition: margin 0.25s;
39 -moz-transition: margin 0.25s;
40 -ms-transition: margin 0.25s;
41 -o-transition: margin 0.25s;
42 transition: margin 0.25s;
43 }
44  
45 .menu ul ul li span {display:block; opacity:0;
46 -webkit-transition: 0.5s 0.25s;
47 -moz-transition: 0.5s 0.25s;
48 -ms-transition: 0.5s 0.25s;
49 -o-transition: 0.5s 0.25s;
50 transition: 0.5s 0.25s;
51 }
52 .menu ul li:hover ul li span {opacity:1;
53 -webkit-transition:0.75s;
54 -moz-transition:0.75s;
55 -ms-transition:0.75s;
56 -o-transition:0.75s;
57 transition:0.75s;
58 }
59  
60 .menu ul li:hover ul li span a {margin-top:0;
61 -webkit-transition:0.75s;
62 -moz-transition:0.75s;
63 -ms-transition:0.75s;
64 -o-transition:0.75s;
65 transition:0.75s;
66 }
67 .menu ul li:hover ul li span a:hover {background:#555;}
68  
69 .menu ul + img {position:fixed; left:0; top:0; width:0; height:0; z-index:-1;}
70 .menu ul:hover + img {width:100%; height:100%;}

Catatan :

Untuk pengguna WordPress, tambahkan 'menu_class' =>'menu' pada panggilan menu di header.php, sehingga mungkin seperti ini:

1 <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' =>'menu' ) ); ?>

Hapus semua span di kode css.

alat bantu sex
Posted by at No comments:
Subscribe to: Posts (Atom)