html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果

对于导航栏的实现对于前端人员来说再简单不过了，但是如何让我们的导航看起来生动，给用户一种很高大上的感觉，却需要我们好好设计一下。今天我给大家带来的是我自己在项目中用到的一个例子，当我们鼠标滑过导航栏时li下会出现一个下划线动画效果，一起看一下具体效果是什么样子的：

jquery css实现鼠标滑过导航菜单栏动画效果

是不是很牛掰的样子，不着急，源码马上呈上来：

HTML代码

码云笔记

HTML/CSS
JavaScript
Node.js
手机移动
前端安全
性能优化
类库框架
开发调试
浏览器
面试经验

css代码

*{ margin:0; padding:0; list-style:none;}

.header{ width:100%; background:#3E4147;height:50px;}

.logo{float:left;height:50px;margin:0 25px;}

.logo img{display:block;width:60px;height:40px;float:left;margin:5px 0;}

.logo span{display:block;float:left;font-size:22px;color:#fff;line-height:50px;margin-left:15px;cursor:pointer;}

.nav{width:767px;height:50px;float:left;overflow:hidden;}

.nav ul{width:767px;height:50px;}

.nav ul li{ height:30px; line-height:30px; float:left; padding:10px 5px; margin:0px 5px;position:relative;}

.nav ul li a{ color:#cbcbcb; font-family:'Microsoft Yahei'; font-size:14px; text-decoration:none;}

.nav ul li a:hover{ color:#6bc30d;}

.nav ul li span{ display:block; position:absolute; width:0px; height:0px; background:#6bc30d; top:48px; left:50%;}

jQuery代码

$(function(){

$('.nav li').hover(function(){

$(this).find('span').stop().css('height','2px');

$(this).find('span').animate({

left:'0',

width:'100%',

},200);

},function(){

$(this).find('span').stop().animate({

left:'50%',

width:'0'

},200);

});

注意：记得引入jQuery库哦！

整个实现流程代码都在这里了，用到的时候直接拿去就可以用，项目亲测相当给力，当然还有更好的设计大家可以根据自己的需要在修改。

当然上面只是我的实现思路，当然你也可以纯css hover加伪元素也是可以做到的，更多的方法欢迎留言讨论。

html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果相关推荐

300+Jquery, CSS, MooTools 和 JS的导航菜单资源
如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手.本文要为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以应用于自己的网站了. ...
html鼠标悬停多个图片变灰,怎样用CSS让鼠标悬停在图片上图片变灰
我们常常在网页中看到这样一种效果,当你的鼠标移动到图片上的时候,图片变灰,或者变暗,这实际是图片被CSS设置为半透明样式.下面就给大家做一个实例看一下这种效果怎么实现a:hover img{filte ...
多种类型的导航条制作【css3,jquery】
导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下 ...
解决css内容高度不固定，transition手风琴效果失效的情况（展开收起）
最近写了一个筛选功能,要使用手风琴效果展开内容,但是高度不固定,故此添加的动画效果失效,对此有两种解决方案动画失效的原理是: 如果当前设置动画的元素他的父元素高度为auto的时候,且当前元素未设置p ...
html鼠标滑过导航条展开导航条,JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用J ...
css 鼠标滑过li变背景图,CSS定义鼠标滑过变换背景的导航菜单
我们经常看到的网站基本上都有导航菜单,有的网站看上去非常酷,鼠标一移动到上面自动改变颜色,这样的导航有两种方法可以实现:一种是鼠标经过图像,一种是CSS定义. 鼠标经过图像是把菜单做成两张文字相同但颜 ...
html中导航条置顶的代码,一个DIV+CSS代码布局的简单导航条
一个蓝色主题的导航条结构案例,本CSS小实例,采取DIV CSS实现.同时不必图片做靠山,直接运用布景致完成,鼠标经由过程悬停对应栏目称说是对应背景蓝色变深. 导航条一小块成就截图通常导航条接纳ul ...
一个完美的导航条html,一个DIV CSS代码布局的简单导航条
简单的DIV CSS代码布局实现导航条一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航 ...
jQuery 设计和自定义一个带展开动画效果的导航栏
设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码完成一个完全自己设计的导航栏 ...

html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果

html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果相关推荐

最新文章

热门文章