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 相关文章推荐
jquery 图片轮换效果
Jul 29 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
浅谈angular.copy() 深拷贝
Sep 14 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
Vue + ts实现轮播插件的示例
Nov 10 Javascript
使用javascript解析二维码的三种方式
Nov 11 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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
stripos函数知识点实例分享
2019/02/11 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
用jquery来定位
2007/02/20 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
对vue生命周期的深入理解
2020/12/03 Vue.js
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python模块导入的细节详解
2018/12/10 Python
Python可迭代对象操作示例
2019/05/07 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
Python pip使用超时问题解决方案
2020/08/03 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
高三上学期学习自我评价
2014/04/23 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏