Home > Article > Web Front-end > Complete code for implementing responsive sliding menu in css3
Complete code for implementing responsive sliding menu in css3
- 不言Original
- 2018-08-30 10:49:123156browse
本篇文章给大家带来的内容是关于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>相关推荐：
CSS3响应式滑动菜单_html/css_WEB-ITnose
JS+CSS实现简单滑动门(滑动菜单)效果_javascript技巧
The above is the detailed content of Complete code for implementing responsive sliding menu in css3. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS realizes the animation effect of the parabolic movement of the ball (code)Next article：CSS realizes the animation effect of the parabolic movement of the ball (code)