用JQuery制作简单实用的下拉菜单

#boyicss
{ margin: 0;
padding: 0}
#boyicss li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}
#boyicss li a
{ display: block;
background: #324143;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}
#boyicssm li a:hover
{ background: #24313C}
#boyicss li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}
#boyicss li ul li
{ float: none;
display: inline}
#boyicss li ul li a
{ width: auto;
background: #000;
color: #ffffff}
#boyicss li ul li a:hover
{ background: #8EA344}

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#boyicss > li').bind('mouseover', jsddm_open);
$('#boyicss > li').bind('mouseout', jsddm_timer);});
document.onclick = jsddm_close;

博客园首页

.NET技术

.NET新手

ASP.NET

C#

WINFORM

编程语言

.NET新手

ASP.NET

C#

WINFORM

软件工程

.NET新手

ASP.NET

C#

WINFORM

新闻

1 <script src="jquery.min.js" type="text/javascript"></script>

2

3 <style type="text/css">

4 #boyicss

5 { margin: 0;

6 padding: 0}

7

8 #boyicss li

9 { float: left;

10 list-style: none;

11 font: 12px Tahoma, Arial}

12

13 #boyicss li a

14 { display: block;

15 background: #324143;

16 padding: 5px 12px;

17 text-decoration: none;

18 border-right: 1px solid white;

19 width: 70px;

20 color: #EAFFED;

21 white-space: nowrap}

22

23 #boyicssm li a:hover

24 { background: #24313C}

25

26 #boyicss li ul

27 { margin: 0;

28 padding: 0;

29 position: absolute;

30 visibility: hidden;

31 border-top: 1px solid white}

32

33 #boyicss li ul li

34 { float: none;

35 display: inline}

36

37 #boyicss li ul li a

38 { width: auto;

39 background: #000;

40 color: #ffffff}

41

42 #boyicss li ul li a:hover

43 { background: #8EA344}

44 </style>

45 <script type="text/javascript">

46 var timeout = 500;

47 var closetimer = 0;

48 var ddmenuitem = 0;

49

50 function jsddm_open()

51 { jsddm_canceltimer();

52 jsddm_close();

53 ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

54

55 function jsddm_close()

56 { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

57

58 function jsddm_timer()

59 { closetimer = window.setTimeout(jsddm_close, timeout);}

60

61 function jsddm_canceltimer()

62 { if(closetimer)

63 { window.clearTimeout(closetimer);

64 closetimer = null;}}

65

66 $(document).ready(function()

67 { $('#boyicss > li').bind('mouseover', jsddm_open);

68 $('#boyicss > li').bind('mouseout', jsddm_timer);});

69

70 document.onclick = jsddm_close;

71 </script>

72

73 <ul id="boyicss">

74 <li><a href="#" target="_blank">博客园首页</a></li>

75 <li><a href="#" target="_blank">.NET技术</a>

76 <ul>

77 <li><a href="#" target="_blank">.NET新手</a></li>

78 <li><a href="#" target="_blank">ASP.NET</a></li>

79 <li><a href="#" target="_blank">C#</a></li>

80 <li><a href="#" target="_blank">WINFORM</a> </li>

81 </ul>

82 </li>

83 <li><a href="#" target="_blank">编程语言</a></li>

84 <li><a href="#" target="_blank">软件工程</a></li>

85 <li><a href="#" target="_blank">新闻</a> </li>

86 </ul>