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
(0)

相关推荐

  • jquery实现具有收缩功能的垂直导航菜单

    本文介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>垂直导航菜单</title> <style type="text/css"> body{ margin:0; padding:0 0 12px 0

  • jQuery 浮动导航菜单适合购物商品类型的网站

    单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单通过锚点实现: 2.滚动页面的时候,菜单项的选中状态要跟着改变,这就需要监听网页的滚动事件并通过一点计算来实现了: 计算 scrollTop 和 各个 div 的 offsetTop 的大小关系,判断现在网页显示的位置在什么地方,再根据计算的结果给对应的菜单项添加样式.比如第二个 div 的 off

  • jQuery实现个性翻牌效果导航菜单的方法

    本文实例讲述了jQuery实现个性翻牌效果导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • jquery实现无限分级横向导航菜单的方法

    本文实例讲述了jquery实现无限分级横向导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 1. jquery插件版本代码如下: 复制代码 代码如下: (function($){     $.fn.extend({         droplinemenu: function(configs) {             var configs = $.extend({                                over: 200,                 o

  • jQuery实现的动态伸缩导航菜单实例

    本文实例讲述了jQuery实现的动态伸缩导航菜单.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">&l

  • 基于jquery实现导航菜单高亮显示(两种方法)

    项目需求: 实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式. 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下: 示例代码一: 具体示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

  • JQuery 写的个性导航菜单

    (一):XHTML: 复制代码 代码如下: <div id="sidebar"> <ul> <li><a href="index.html" class="normalMenu">Home</a></li> <li><a href="services.html" class="normalMenu">Servic

  • jQuery垂直多级导航菜单代码分享

    这是一款基于jquery实现的垂直导航菜单特效代码,总共有三级,实现效果简单大方,最后一级还可以进行图片展示说明,是一款非常实用的导航菜单特效源码. 效果演示 源码下载 为大家分享的jQuery垂直多级导航菜单代码如下 <head> <title>jQuery垂直多级导航菜单代码</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

  • jquery 实现两级导航菜单附效果图

    主要用于运维系统, 对界面要求不高的场合. 深深感到自己页面设计能力弱爆了,只能借鉴一下了, 交互逻辑还可以胜任一点. 直接贴代码: 1. HTML 页面及 JS 交互, 注意引入 Jquery 文件 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

  • jQuery 实现侧边浮动导航菜单效果

    单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单通过锚点实现: 2.滚动页面的时候,菜单项的选中状态要跟着改变,这就需要监听网页的滚动事件并通过一点计算来实现了: 计算 scrollTop 和 各个 div 的 offsetTop 的大小关系,判断现在网页显示的位置在什么地方,再根据计算的结果给对应的菜单项添加样式.比如第二个 div 的 off

随机推荐