JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > jquery实现的个人中心导航菜单

jquery实现的个人中心导航菜单

这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错。我们先一起看看效果图:




在线预览   源码下载


一起看下实现的代码:

html代码:

  1. <nav class="animated bounceInDown">
  2.         <ul>
  3.             <li><a href="#profile">
  4.                 <div class="fa fa-user">
  5.                 </div>
  6.                 Profile </a></li>
  7.             <li><a href="#message">
  8.                 <div class="fa fa-envelope">
  9.                 </div>
  10.                 Messages <span class="badge right">12</span> </a></li>
  11.             <li class="sub-menu"><a href="#settings">
  12.                 <div class="fa fa-gear">
  13.                 </div>
  14.                 Settings
  15.                 <div class="fa right fa-caret-up">
  16.                 </div>
  17.             </a>
  18.                 <ul style="display: block;">
  19.                     <li><a href="#settings">Account </a></li>
  20.                     <li><a href="#settings">Profile </a></li>
  21.                     <li><a href="#settings">Secruity & Privacy </a></li>
  22.                     <li><a href="#settings">Password </a></li>
  23.                     <li><a href="#settings">Notification </a></li>
  24.                 </ul>
  25.             </li>
  26.             <li class="sub-menu"><a href="#message">
  27.                 <div class="fa fa-question-circle">
  28.                 </div>
  29.                 Help
  30.                 <div class="fa right fa-caret-down">
  31.                 </div>
  32.             </a>
  33.                 <ul style="display: none;">
  34.                     <li><a href="#settings">FAQ's </a></li>
  35.                     <li><a href="#settings">Submit a Ticket </a></li>
  36.                     <li><a href="#settings">Network Status </a></li>
  37.                 </ul>
  38.             </li>
  39.             <li><a href="#message">
  40.                 <div class="fa fa-sign-out">
  41.                 </div>
  42.                 Logout </a></li>
  43.         </ul>
  44.     </nav>
复制代码
css代码:
  1. body
  2.         {
  3.             background: #f7f7f7 url("1.jpg") no-repeat center center fixed;
  4.             -webkit-background-size: cover;
  5.             -moz-background-size: cover;
  6.             -o-background-size: cover;
  7.             background-size: cover;
  8.             font-family: "Roboto";
  9.             font-size: 14px;
  10.             -webkit-font-smoothing: antialiased;
  11.             -moz-osx-font-smoothing: grayscale;
  12.         }
  13.         body::before
  14.         {
  15.             content: '';
  16.             position: fixed;
  17.             z-index: -1;
  18.             top: 0;
  19.             left: 0;
  20.             background: #34495e; /* IE Fallback */
  21.             background: rgba(52, 73, 94, 0.8);
  22.             width: 100%;
  23.             height: 100%;
  24.         }
  25.         nav
  26.         {
  27.             position: absolute;
  28.             top: 50%;
  29.             left: 50%;
  30.             width: 360px;
  31.             margin: -78px 0 100px -180px;
  32.             -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  33.             -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  34.             box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  35.         }
  36.         nav ul
  37.         {
  38.             list-style: none;
  39.             margin: 0;
  40.             padding: 0;
  41.         }
  42.         nav ul li
  43.         {
  44.             /* Sub Menu */
  45.         }
  46.         nav ul li a
  47.         {
  48.             display: block;
  49.             background: #3498db;
  50.             padding: 10px 15px;
  51.             color: #fff;
  52.             text-decoration: none;
  53.             -webkit-transition: 0.2s linear;
  54.             -moz-transition: 0.2s linear;
  55.             -ms-transition: 0.2s linear;
  56.             -o-transition: 0.2s linear;
  57.             transition: 0.2s linear;
  58.         }
  59.         nav ul li a:hover
  60.         {
  61.             background: #2980b9;
  62.         }
  63.         nav ul li a .fa
  64.         {
  65.             width: 16px;
  66.             text-align: center;
  67.             margin-right: 5px;
  68.         }
  69.         nav ul li a .badge
  70.         {
  71.             display: inline-block;
  72.             background: #fff; /* IE Fallback */
  73.             background: rgba(255, 255, 255, 0.2);
  74.             padding: 3px 7px;
  75.             color: #fff;
  76.             font-size: 12px;
  77.             font-weight: 800;
  78.         }
  79.         nav ul li ul li a
  80.         {
  81.             background: #444;
  82.             border-left: 4px solid transparent;
  83.             padding: 10px 20px;
  84.         }
  85.         nav ul li ul li a:hover
  86.         {
  87.             background: #333;
  88.             border-left: 4px solid #3498db;
  89.         }
  90.         /* Float Right/Left */
  91.         .right
  92.         {
  93.             float: right;
  94.         }
  95.         .left
  96.         {
  97.             float: left;
  98.         }
复制代码
js代码:
  1. $('.sub-menu ul').hide();
  2.         $(".sub-menu").click(function () {
  3.             $(this).children("ul").slideToggle("100");
  4.             $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
  5.         }); //@ sourceURL=pen.js
复制代码
via:http://www.w2bc.com/Article/5663

【jquery实现的个人中心导航菜单】相关文章

1. jquery实现的个人中心导航菜单

2. jquery+html5笔触导航菜单

3. 一款基于jquery和css3的响应式二级导航菜单

4. 使用 jQuery 和 CSS3 制作滑动导航菜单

5. 26款免费CSS3导航菜单及jQuery插件

6. JQuery实现的 超简单的菜单缩放效果

7. 用CSS3设计响应式导航菜单

8. 基于 jQuery 实现的精致作品集图片导航效果

9. 5款基于jQuery实现的动画的源码

10. 一款基于css3和jquery实现的动画弹出层

本文来源:https://www.51html5.com/a1326.html

点击展开全部

﹝jquery实现的个人中心导航菜单﹞相关内容

「jquery实现的个人中心导航菜单」相关专题

其它栏目

也许您还喜欢