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