简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

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

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

不言
不言original
2018-08-30 10:49:123156parcourir

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

<!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>

相关推荐：

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!

Déclaration：
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
Article précédent：CSS réalise l'effet d'animation du mouvement parabolique de la balle (code)Article suivant：CSS réalise l'effet d'animation du mouvement parabolique de la balle (code)

Articles Liés

Voir plus