css3實現響應式滑動菜單的完整代碼

最後更新：2018-08-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇文章給大家帶來的內容是關於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,' '+className2+' ');                 }                 else{                     r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');                 }                 return r.className;             };            var menuElements = document.getElementById('menu');             menuElements.insertAdjacentHTML('afterBegin','<button  type="button" id="menutoggle"  aria-hidden="true"><i aria-hidden="true">  </i> Menu</button>');            document.getElementById('menutoggle').onclick = function() {                 changeClass(this, 'navtoogle active', 'navtoogle');             }         </script>     </body> </html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More