circular-menu
Version:
cool,highly interactive circular menu
68 lines • 1.67 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>circle-menu</title>
<link rel="stylesheet" type="text/css" href="../../stylesheets/unskew.css"/>
</head>
<body>
<div class="cn-wrapper" id="cn-wrapper">
<ul>
<li>
<a href="">
<div class="reverse">
<span>menu1</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="reverse">
<span>菜单2</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="reverse">
<span>menu3</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="reverse">
<span>菜单4</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="reverse">
<span>菜单5</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="reverse">
<span>menu6</span>
</div>
</a>
</li>
<li>
<a href="">
<div class="reverse">
<span>菜单7</span>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
<script>
setTimeout(function () {
document.getElementById('cn-wrapper').setAttribute('class', 'cn-wrapper opened-nav');
}, 1000);
</script>