Maison > interface Web > tutoriel CSS > Code complet pour implémenter un menu coulissant réactif en CSS3

Code complet pour implémenter un menu coulissant réactif en CSS3

不言
Libérer: 2018-08-30 10:49:12
original
3245 Les gens l'ont consulté

本篇文章给大家带来的内容是关于css3实现响应式滑动菜单的完整代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

<!DOCTYPE html>

 <html>

     <head>

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

         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

         <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <title>CSS3滑动动画菜单DEMO演示</title>

         <link rel="stylesheet" type="text/css" href="css/default.css" />

         <link rel="stylesheet" type="text/css" href="css/component.css" />

         <script src="js/modernizr.custom.js"></script>

     </head>

     <body>

         <div>

             <header>

                 <h1>CSS3响应式滑动菜单</h1>

             </header>

             <div class="main clearfix">

                 <nav id="menu">

                     <ul>

                         <li>

                             <a href="#">

                                 <span>

                                     <i aria-hidden="true"></i>

                                 </span>

                                 <span>Home</span>

                             </a>

                         </li>

                         <li>

                             <a href="#">

                                 <span>

                                     <i aria-hidden="true"></i>

                                 </span>

                                 <span>Services</span>

                             </a>

                         </li>

                         <li>

                             <a href="#">

                                 <span>

                                     <i aria-hidden="true"></i>

                                 </span>

                                 <span>Portfolio</span>

                             </a>

                         </li>

                         <li>

                             <a href="#">

                                 <span>

                                     <i aria-hidden="true"></i>

                                 </span>

                                 <span>Blog</span>

                             </a>

                         </li>

                         <li>

                             <a href="#">

                                 <span>

                                     <i aria-hidden="true"></i>

                                 </span>

                                 <span>The team</span>

                             </a>

                         </li>

                         <li>

                             <a href="#">

                                 <span>

                                     <i aria-hidden="true"></i>

                                 </span>

                                 <span>mail</span>

                             </a>

                         </li>

                     </ul>

                 </nav>

 <div style="text-align:center;clear:both"><br>

 <script src="/gg_bd_ad_720x90.js"  type="text/javascript"></script><script src="/follow.js"  type="text/javascript"></script></div>

             </div>

         </div><!-- /container -->

         <script>

            var changeClass = function (r,className1,className2) {

                 var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");

                 if( regex.test(r.className) ) {

                     r.className = r.className.replace(regex,&#39; &#39;+className2+&#39; &#39;);

                 }

                 else{

                     r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),&#39; &#39;+className1+&#39; &#39;);

                 }

                 return r.className;

             };

            var menuElements = document.getElementById(&#39;menu&#39;);

             menuElements.insertAdjacentHTML(&#39;afterBegin&#39;,&#39;<button  type="button" id="menutoggle"  aria-hidden="true"><i aria-hidden="true">  </i> Menu</button>&#39;);

            document.getElementById(&#39;menutoggle&#39;).onclick = function() {

                 changeClass(this, &#39;navtoogle active&#39;, &#39;navtoogle&#39;);

             }

         </script>

     </body>

 </html>

Copier après la connexion

相关推荐:

CSS3响应式滑动菜单_html/css_WEB-ITnose

JS+CSS实现简单滑动门(滑动菜单)效果_javascript技巧

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal