用jQuery制作仿网易云课堂导航菜单效果
Posted 木西梧
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jQuery制作仿网易云课堂导航菜单效果相关的知识，希望对你有一定的参考价值。
最近做项目，用到类似的效果。
效果图如下：
直接上代码：
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="./css/index.css"> <script src="./js/jquery-1.11.3.min.js"></script> <script src="./js/index.js"></script> </head> <body> <!--nav--> <div class="nav-section"> <div class="nav-box center"> <ul class="left-menu"> <li class="menu-item"> <h2><a href="">出国英语</a></h2> <p><a href="">雅思</a><a href="">托福</a><a href="">GRE</a></p> </li> <li class="menu-item"> <h2><a href="">学历英语</a></h2> <p><a href="">四级</a><a href="">六级</a><a href="">考研英语</a></p> </li> <li class="menu-item"> <h2><a href="">职业英语</a></h2> <p><a href="">商务英语</a><a href="">翻译资格</a></p> </li> <li class="menu-item"> <h2><a href="">实用英语</a></h2> <p><a href="">新概念英语</a><a href="">应用英语</a></p> </li> <li class="menu-item"> <h2><a href="">小语种</a></h2> <p><a href="">日语</a><a href="">韩语</a><a href="">法语</a></p> </li> <li class="menu-item"> <h2><a href="">职称英语</a></h2> <p><a href="">基础班</a><a href="">精讲班</a></p> </li> </ul> <div class="right-nav"> <ul> <li class="nav-item all"><a href="">全部课程</a></li> <li class="nav-item"><a href="">首页</a></li> <li class="nav-item"><a href="">课程中心</a></li> <li class="nav-item"><a href="">在线模考</a></li> <li class="nav-item"><a href="">下载中心</a></li> <li class="nav-item"><a href="">名师风采</a></li> <li class="nav-item"><a href="">留言管理</a></li> </ul> </div> <div class="second-menu"> <div class="menu-list"> <div class="menu-list-item"> <a href="" class="primary-link">雅思</a> <ul> <li><a href="">雅思5.5分</a></li> <li><a href="">雅思6分</a></li> <li><a href="">雅思6.5分</a></li> <li><a href="">高分班</a></li> <li><a href="">雅思7分</a></li> <li><a href="">雅思基础</a></li> <li><a href="">雅思精讲</a></li> <li><a href="">雅思强化</a></li> <li><a href="">雅思单项</a></li> <li><a href="">剑桥雅思</a></li> <li><a href="">雅思预测班</a></li> <li><a href="">雅思应试技巧</a></li> <li><a href="">雅思微课堂</a></li> <li><a href="">雅思现场</a></li> <li><a href="">雅思精华班</a></li> <li><a href="">雅思串讲班</a></li> <li><a href="">CRS辅导课程</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">托福</a> <ul> <li><a href="">深度班</a></li> <li><a href="">托福基础班</a></li> <li><a href="">精品班</a></li> <li><a href="">精华班</a></li> <li><a href="">托福强化班</a></li> <li><a href="">托福单项</a></li> <li><a href="">托福现场班</a></li> <li><a href="">托福冲刺班</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">GRE</a> <ul> <li><a href="">GRE单项</a></li> </ul> </div> </div> <div class="menu-list"> <div class="menu-list-item"> <a href="" class="primary-link">英语四级</a> <ul> <li><a href="">速成班</a></li> <li><a href="">精品班</a></li> <li><a href="">冲刺班</a></li> <li><a href="">真题解析</a></li> <li><a href="">单项</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">英语六级</a> <ul> <li><a href="">精品班</a></li> <li><a href="">冲刺班</a></li> <li><a href="">单项</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">考研英语</a> <ul> <li><a href="">冲刺串讲班</a></li> <li><a href="">全程班</a></li> <li><a href="">基础班</a></li> <li><a href="">强化班</a></li> <li><a href="">研究生入学考试英语</a></li> <li><a href="">在职申硕</a></li> <li><a href="">在职攻硕</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">公共英语</a> <ul> <li><a href="">PETS一级</a></li> <li><a href="">PETS二级</a></li> <li><a href="">PETS三级</a></li> <li><a href="">PETS四级</a></li> </ul> </div> <div class="menu-list-item"> <a href="" class="primary-link">日语等级</a> <ul> <li><a href="">一级</a></li> <20款jquery下拉导航菜单特效代码分享