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

之前为大家介绍了一款jquery和css3实现的很酷的菜单导航。这是一款由jquery开发的导航菜单。适合放在门户网站的个人用户中心后台。效果和美观都非常不错。我们先一起看看效果图

源码下载

一起看下实现的代码：

超文本标记语言代码：

' nav class='动画bounkheingdown ' ullia href=' # profile ' div class=' fa fa fa-user '/div profile/a/lilia href=' # message ' div class=' fa fa fa-envelope '/div messages span class=' badge right ' 12/span/a/Lili class='子菜单a href=' # settings ' div class=' fa right fa-caret-up '/div/aul style=' display : block；lia href=' #设置'帐户/a/lilia href=' #设置'配置文件/lia href=' #设置'常见问题解答/a/lilia href=' #设置'提交票证/a/lilia href=' #设置'网络状态/a/Li/ul/lilia href=' #消息' div class=' fa注销/divLogout /a/li/ul/navcss代码：

正文{背景： # f7f 7 URL(' 1。jpg’)无重复中心中心固定；-web kit-背景-尺寸：封面；-moz-背景-尺寸：封面；表示“具有…性质的”型背景-尺寸：封面；背景尺寸：封面；font-family :“机器人o”；font-size : 14px-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；{内容： }之前的} body:before之前位置：固定；z指数：-1;top : 0；左： 0；背景技术# 34495 e/* IE Fallback */后台： rgba(52，73，94，0.8)；宽度： 100%;高度： 100%;} nav { position : absolutetop : 50%；左侧： 50%;宽度： 360 px余量：-78px 0 100 px-180 px；-web kit-box-shadow : 0 3px rgba(0，0，0，0.1)；-moz-box-shadow : 0 3px rgba(0，0，0，0.1)；box-shadow: 0 0 3px rgba(0，0，0，0.1)；} nav ul {列表式：无；保证金： 0；padd : 0；}导航li{/*子菜单*/}导航阿利{显示：区块；背景# 3498 dbpadd : 10px 15 pcolor : # fff文本装饰：无；-网络套件-transit : 0.2s线性；-moz-transit : 0.2s线性；-ms-transit : 0.2s线性；-o-transit : 0.2s线性；跃迁：0.2s线性；} nav ul阿利：悬停{背景： # 2980 B9}导航ul阿利。fa { width: 16px文本对齐：中心；右边距： 5px}导航ul阿利徽章{显示：内嵌区块；背景# fff/* IE Fallback */后台： rgba(255，255，255，0.2)；padd : 3px 7pxcolor : # fffffont-size : 12px；字体粗细： 800；}导航ul li ul阿利{ background : # 444 border-left : 4px实心透明；padding: 10px 20px } nav ul Li ul阿利：悬停{背景： # 333；边框-左侧： 4px实心# 3498db}/*向右/向左浮动*/。右{右侧浮动： }。左{左侧浮动： } js代码：

$('.子菜单ul ').hide()；$('.子菜单')。单击(function () {$(this)).儿童(' ul ').滑动切换(' 100 ')；$(这个)。查找('。右')。切换类(' fa-插入符号-向上fa-插入符号-向下')；});//@ sourceURL=pen.js