<!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>