简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Vollständiger Code zum Implementieren eines responsiven Schiebemenüs in CSS3

Vollständiger Code zum Implementieren eines responsiven Schiebemenüs in CSS3

不言
不言Original
2018-08-30 10:49:123160Durchsuche

本篇文章给大家带来的内容是关于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技巧

Das obige ist der detaillierte Inhalt vonVollständiger Code zum Implementieren eines responsiven Schiebemenüs in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS realisiert den Animationseffekt der parabolischen Bewegung des Balls (Code)Nächster Artikel：CSS realisiert den Animationseffekt der parabolischen Bewegung des Balls (Code)

In Verbindung stehende Artikel

Mehr sehen