溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用css3實(shí)現(xiàn)響應(yīng)式滑動(dòng)菜單

發(fā)布時(shí)間：2022-03-01 11:33:02 來源：億速云 閱讀：242 作者：小新 欄目：web開發(fā)

小編給大家分享一下如何使用css3實(shí)現(xiàn)響應(yīng)式滑動(dòng)菜單，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　<!DOCTYPEhtml>

　　<html>

　　<head>

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

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

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

　　<title>CSS3滑動(dòng)動(dòng)畫菜單DEMO演示</title>

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

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

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

　　</head>

　　<body>

　　<div>

　　<header>

　　<h2>CSS3響應(yīng)式滑動(dòng)菜單</h2>

　　</header>

　　<divclass="mainclearfix">

　　<navid="menu">

　　<ul>

　　<li>

　　<ahref="#">

　　<span>

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

　　</span>

　　<span>Home</span>

　　</a>

　　</li>

　　<li>

　　<ahref="#">

　　<span>

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

　　</span>

　　<span>Services</span>

　　</a>

　　</li>

　　<li>

　　<ahref="#">

　　<span>

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

　　</span>

　　<span>Portfolio</span>

　　</a>

　　</li>

　　<li>

　　<ahref="#">

　　<span>

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

　　</span>

　　<span>Blog</span>

　　</a>

　　</li>

　　<li>

　　<ahref="#">

　　<span>

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

　　</span>

　　<span>Theteam</span>

　　</a>

　　</li>

　　<li>

　　<ahref="#">

　　<span>

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

　　</span>

　　<span>mail</span>

　　</a>

　　</li>

　　</ul>

　　</nav>

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

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

　　</div>

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

　　<script>

　　varchangeClass=function(r,className1,className2){

　　varregex=newRegExp("(?:^|\\s+)"+className1+"(?:\\s+|$)");

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

　　r.className=r.className.replace(regex,''+className2+'');

　　}

　　else{

　　r.className=r.className.replace(newRegExp("(?:^|\\s+)"+className2+"(?:\\s+|$)"),''+className1+'');

　　}

　　returnr.className;

　　};

　　varmenuElements=document.getElementById('menu');

　　menuElements.insertAdjacentHTML('afterBegin','<buttontype="button"id="menutoggle"aria-hidden="true"><iaria-hidden="true"></i>Menu</button>');

　　document.getElementById('menutoggle').onclick=function(){

　　changeClass(this,'navtoogleactive','navtoogle');

　　}

　　</script>

　　</body>

　　</html>
如何使用css3實(shí)現(xiàn)響應(yīng)式滑動(dòng)菜單如何使用css3實(shí)現(xiàn)響應(yīng)式滑動(dòng)菜單


以上是“如何使用css3實(shí)現(xiàn)響應(yīng)式滑動(dòng)菜單”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手