特效描述:利用jQuery實現 右下角 懸浮圖標 菜單特效,利用jQuery實現右下角懸浮圖標菜單特效
代碼結構
1. 引入CSS
<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css">
2. 引入JS
<script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script>
3. HTML代碼
<div style="height:2000px;"></div> <div id="cd-nav"> <a href="#0" class="cd-nav-trigger">Menu<span></span></a> <nav id="cd-main-nav"> <ul> <li><a href="#0">Homepage</a></li> <li><a href="#0">Services</a></li> <li><a href="#0">Portfolio</a></li> <li><a href="#0">Pricing</a></li> <li><a href="#0">Contact</a></li> </ul> </nav> </div> <script src="js/main.js"></script> <!-- Resource jQuery --> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff"> </div>