溫馨提示×

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

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

怎么用Css3實(shí)現(xiàn)響應(yīng)式滑動(dòng)菜單

發(fā)布時(shí)間：2022-03-05 09:57:02 來(lái)源：億速云 閱讀：141 作者：小新 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)怎么用Css3實(shí)現(xiàn)響應(yīng)式滑動(dòng)菜單，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

　　<!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)畫(huà)菜單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>


關(guān)于“怎么用Css3實(shí)現(xiàn)響應(yīng)式滑動(dòng)菜單”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(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
助
手