jquery实现个人中心导航菜单效果和美观都非常不错
2019/6/29 22:35:29
本文主要是介绍jquery实现个人中心导航菜单效果和美观都非常不错,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错。我们先一起看看效果图:
一起看下实现的代码:
html代码:
<nav class="animated bounceInDown"> <ul> <li><a href="#profile"> <div class="fa fa-user"> </div> Profile </a></li> <li><a href="#message"> <div class="fa fa-envelope"> </div> Messages <span class="badge right">12</span> </a></li> <li class="sub-menu"><a href="#settings"> <div class="fa fa-gear"> </div> Settings <div class="fa right fa-caret-up"> </div> </a> <ul style="display: block;"> <li><a href="#settings">Account </a></li> <li><a href="#settings">Profile </a></li> <li><a href="#settings">Secruity & Privacy </a></li> <li><a href="#settings">Password </a></li> <li><a href="#settings">Notification </a></li> </ul> </li> <li class="sub-menu"><a href="#message"> <div class="fa fa-question-circle"> </div> Help <div class="fa right fa-caret-down"> </div> </a> <ul style="display: none;"> <li><a href="#settings">FAQ's </a></li> <li><a href="#settings">Submit a Ticket </a></li> <li><a href="#settings">Network Status </a></li> </ul> </li> <li><a href="#message"> <div class="fa fa-sign-out"> </div> Logout </a></li> </ul> </nav>
css代码:
body { background: #f7f7f7 url("1.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family: "Roboto"; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body::before { content: ''; position: fixed; z-index: -1; top: 0; left: 0; background: #34495e; /* IE Fallback */ background: rgba(52, 73, 94, 0.8); width: 100%; height: 100%; } nav { position: absolute; top: 50%; left: 50%; width: 360px; margin: -78px 0 100px -180px; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { /* Sub Menu */ } nav ul li a { display: block; background: #3498db; padding: 10px 15px; color: #fff; text-decoration: none; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear; } nav ul li a:hover { background: #2980b9; } nav ul li a .fa { width: 16px; text-align: center; margin-right: 5px; } nav ul li a .badge { display: inline-block; background: #fff; /* IE Fallback */ background: rgba(255, 255, 255, 0.2); padding: 3px 7px; color: #fff; font-size: 12px; font-weight: 800; } nav ul li ul li a { background: #444; border-left: 4px solid transparent; padding: 10px 20px; } nav ul li ul li a:hover { background: #333; border-left: 4px solid #3498db; } /* Float Right/Left */ .right { float: right; } .left { float: left; }
js代码:
$('.sub-menu ul').hide(); $(".sub-menu").click(function () { $(this).children("ul").slideToggle("100"); $(this).find(".right").toggleClass("fa-caret-up fa-caret-down"); }); //@ sourceURL=pen.js
这篇关于jquery实现个人中心导航菜单效果和美观都非常不错的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06jquery对css样式(jquery中的css方法)-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧:如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器,bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习