jquery实现个人中心导航菜单效果和美观都非常不错


Posted in Javascript onSeptember 02, 2014

之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错。我们先一起看看效果图:
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
Javascript 相关文章推荐
Javascript 类与静态类的实现
Apr 01 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
JavaScript判断文件上传类型的方法
Sep 02 #Javascript
JavaScript中九种常用排序算法
Sep 02 #Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 #Javascript
解决jquery版本冲突的有效方法
Sep 02 #Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 #Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 #Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 #Javascript
You might like
PHP初学者头疼问题总结
2006/07/08 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
python实现手机销售管理系统
2019/03/19 Python
python实现维吉尼亚加密法
2019/03/20 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
上班玩手机检讨书
2014/02/17 职场文书
节约用水演讲稿
2014/05/21 职场文书
委托书格式
2014/08/01 职场文书
办理收楼委托书范本
2014/10/09 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
中学教师教学工作总结
2015/08/13 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP