Belajar CSS

Membuat Dropdown Menu Animasi Responsive Dengan CSS3

Posted on September 18, 2013

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.

• Home
• Services
  • Printing & Framing
    Photo Editing
    Storage & Backup
    
• Contacts
  • Support
    Sales
    Buying
    Photographers
    Stockist
    General
    
• Stores Location
  • South West Region
    North East Region
    Central Region
    
• Contact Us
  • Email Addresses
    By Post
    Telephone Numbers
    
• Sales
  • Digital SLR Cameras
    Interchangeable Lenses
    Flash Guns & Accessories
    Professional Tripods
    Filters & Lens Hoods
    
• Privacy Policy

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.