基于html5顶部导航3D翻转展开特效是一款基于jQuery+HTML5实现的3D翻转网站导航菜单代码。效果图如下:
实现的代码。
html代码:
<header class="cd-header"> <a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a> <a href="#0" class="cd-3d-nav-trigger"> Menu <span></span> </a> </header> <!-- .cd-header --> <main> <h1>3D Rotating Navigation</h1> <!-- all your content here --> </main> <nav class="cd-3d-nav-container"> <ul class="cd-3d-nav"> <li class="cd-selected"> <a href="#0">Dashboard</a> </li> <li> <a href="#0">Projects</a> </li> <li> <a href="#0">Images</a> </li> <li> <a href="#0">Settings</a> </li> <li> <a href="#0">New</a> </li> </ul> <!-- .cd-3d-nav --> <span class="cd-marker color-1"></span> </nav> <!-- .cd-3d-nav-container --> <script type="text/javascript" src="js/jquery-2.1.1.js"></script> <script type="text/javascript" src="js/main.js"></script>