> 웹 프론트엔드 > JS 튜토리얼 > Javascript는 드롭다운 submenu_javascript 기술을 사용하여 탐색 메뉴 효과를 구현합니다.

Javascript는 드롭다운 submenu_javascript 기술을 사용하여 탐색 메뉴 효과를 구현합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
풀어 주다: 2016-05-16 15:59:09
원래의
1103명이 탐색했습니다.

本文实例讲述了javascript实现带下拉子菜单的导航菜单效果。分享给大家供大家参考。具体实现方法如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>带下拉子菜单的导航菜单</title>

<style type="text/css">

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { float:left; margin-left:2px;}

#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; font-size:14px;}

#menu ul li a#current { font-weight:bold; color:#fff;}

#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}

#menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}

#menu ul li ul li a { background:none;}

#menu ul li ul li a:hover { background:#333; color:#fff;}

#menu ul li:hover ul { display:block;}

#menu ul li.sfhover ul { display:block;}

</style>

<script type="text/javascript"><!--  //--><![CDATA[//><!--

function menuFix() {

  var sfEls = document.getElementById("menu").getElementsByTagName("li");

  for (var i = 0; i < sfEls.length; i++) {

    sfEls[i].onmouseover = function () {

      this.className += (this.className.length > 0 &#63; " " : "") + "sfhover";

    }

    sfEls[i].onMouseDown = function () {

      this.className += (this.className.length > 0 &#63; " " : "") + "sfhover";

    }

    sfEls[i].onMouseUp = function () {

      this.className += (this.className.length > 0 &#63; " " : "") + "sfhover";

    }

    sfEls[i].onmouseout = function () {

      this.className = this.className.replace(new RegExp("( &#63;|^)sfhover\\b"),

    "");

    }

  }

}

window.onload = menuFix;

//--><!]]>

</script>

</head>

<body>

<div id="menu">

<ul>

  <li><a id="current" href="#">首页</a></li>

  <li><a href="#">网页版式</a>

    <ul>

      <li><a href="#">自适应宽度</a></li>

      <li><a href="#">固定宽度</a></li>

    </ul>

  </li>

  <li><a href="#">web教程</a>

    <ul>

      <li><a href="#">新手入门</a></li>

      <li><a href="#">视频教程</a></li>

      <li><a href="#">常见问题</a></li>

    </ul>

  </li>

  <li><a href="#">web实例</a></li>

  <li><a href="#">常用代码</a></li>

</ul>

</div>

</body>

</html>

로그인 후 복사

希望本文所述对大家的javascript程序设计有所帮助。

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿