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 相关文章推荐
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
python集合是否可变总结
2019/06/20 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
Python中包的用法及安装
2020/02/11 Python
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
验房委托书
2014/08/30 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
三孔导游词
2015/02/05 职场文书
小学班主任自我评价
2015/03/11 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
二婚主持词
2015/06/30 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript
nginx内存池源码解析
2021/11/20 Servers
Python序列化模块JSON与Pickle
2022/06/05 Python
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python