文档章节

【原创】css3+jquery 实现横线跟随菜单-含详细优化过程和思考

柴高八斗之父
 柴高八斗之父
发布于 2017/09/11 17:21
字数 913
阅读 16
收藏 0
点赞 0
评论 0

 前提:一直想自己写一个如下图的效果,虽然网上也有,但是考虑到不受将来设计图的多样性,自己写一个拓展性和维护性更佳。

版本01的实现过程

  • 只是效果实现;
  • 优化欠佳

html如下:

<div class="menu">
	<ul>
		<li>tab01</li>
		<li>tab02</li>
		<li>tab03</li>
		<li>tab04</li>
		<li>tab05</li>
	</ul>
	<div class="hover-line"></div>
</div>

css如下:(为每一个li定义了位移值。)

/*清全局*/
body{ padding: 200px; background: #ECECEC; font-size: 12px;}
*{ margin: 0; padding: 0;}
ul,li{ list-style: none;}
			
/*菜单*/
.menu{ position: relative; width: 600px; height:36px;}
.menu ul li{ transition: all 0.5s; float:left; width: 100px; height: 36px; line-height: 36px; text-align: center; background: #002A80; color: #fff;}
.menu ul li:hover{ background: #008080;}

/*线条*/
.hover-line{ transition: all 0.5s; opacity: 0; position: absolute; left: -100px; bottom: 0px; width: 100px; height: 3px; background: greenyellow;}
.hover-line-1{ transform: translateX(100px); opacity: 1;}
.hover-line-2{ transform: translateX(200px); opacity: 1;}
.hover-line-3{ transform: translateX(300px); opacity: 1;}
.hover-line-4{ transform: translateX(400px); opacity: 1;}
.hover-line-5{ transform: translateX(500px); opacity: 1;}

js如下:(用到了jquery的hover事件。hover就追加位移的样式,out就移除;)

$(function(){
	$(".menu ul li").eq(0).hover(
			function(){
				$(".hover-line").addClass("hover-line-1")
			},
			function(){
				$(".hover-line").removeClass("hover-line-1")
			}
	)
	$(".menu ul li").eq(1).hover(
			function(){
			$(".hover-line").addClass("hover-line-2")
			}
			,
			function(){
				$(".hover-line").removeClass("hover-line-2")
			}
		)
	$(".menu ul li").eq(2).hover(
			function(){
			$(".hover-line").addClass("hover-line-3")
			},
			function(){
				$(".hover-line").removeClass("hover-line-3")
			}
		)
	$(".menu ul li").eq(3).hover(
			function(){
			$(".hover-line").addClass("hover-line-4")
			},
			function(){
				$(".hover-line").removeClass("hover-line-4")
			}
		)
	$(".menu ul li").eq(4).hover(
			function(){
			$(".hover-line").addClass("hover-line-5")
			},
			function(){
				$(".hover-line").removeClass("hover-line-5")
			}
		)
})

 缺点:全部写死,代码过多。

 

版本02的优化过程:

  • 一定程度上优化了代码量,整理了思路。
  • 但是并非完美,比如随意新增或删除菜单项,位移值需要手动改。这个问题会在版本03里解决 ↓。

css如下(这一步将每次位移值都去掉了。放到了下面js中。)

/*清全局*/
body{ padding: 200px; background: #ECECEC; font-size: 12px;}
*{ margin: 0; padding: 0;}
ul,li{ list-style: none;}

/*菜单*/
.menu{ position: relative; width: 600px; height:36px;}
.menu ul li{ transition: all 0.5s; float:left; width: 100px; height: 36px; line-height: 36px; text-align: center; background: #002A80; color: #fff;}
.menu ul li:hover{ background: #008080;}

/*线条*/
.hover-line{ transition: all 0.5s; opacity: 0; position: absolute; left: -100px; bottom: 0px; width: 100px; height: 3px; background: greenyellow;}

js如下:(这一步的js做了  公共部分的提取,①:hover上的时候,将$(".hover-line").css("opacity",1))

这个提出来;②:out时,调用头部的回退函数,这个是每次鼠标一移开,跟随短线会回到起始地方。作为公共也会提取出来了,代码如下;
    function go_start(){
        $(".hover-line").css({transform:"translateX(-100px)",opacity:0})
    }

以上代码可以一定程度上的减少代码量。同时也是一个对思路的整理过程。

$(function(){
	//回退函数
	function go_start(){
		$(".hover-line").css({transform:"translateX(-100px)",opacity:0})
	}
	//事件响应
	$(".menu ul li").hover(
		function(){
			var this_index = $(this).index(); //得到索引号
			$(".hover-line").css("opacity",1) /*hover后,透明度可以作为公共样式抽到顶部来先执行掉。*/
			
			if(this_index==0)
			{
				$(".hover-line").css("transform","translateX(100px)")
			}
			if(this_index==1)
			{
				$(".hover-line").css("transform","translateX(200px)")
			}
			if(this_index==2)
			{
				$(".hover-line").css("transform","translateX(300px)")
			}
			if(this_index==3)
			{
				$(".hover-line").css("transform","translateX(400px)")
			}
			if(this_index==4)
			{
				$(".hover-line").css("transform","translateX(500px)")
			}
		},
		function(){
			return go_start(); /*回到起点可以作为公共的函数来调用*/
		}
	)
})

 

版本03的进一步优化过程:

  •  仅仅改了js部分,做了动态获取偏移值,带到hover的css控制中。
  • 动态添加菜单项均无需再另外改任何代码。
$(function(){
	
	//回退函数
	function go_start(){
		$(".hover-line").css({transform:"translateX(-100px)",opacity:0})
	}
	
	//事件响应
	$(".menu ul li").hover(
		function(){
			var this_index = $(this).index(); //得到索引号
			$(".hover-line").css("opacity",1)/*hover后,透明度可以作为公共样式抽到顶部来先执行掉。*/
			
			var this_left_px = (this_index+1)*100; //取到偏移值
			if(this_left_px!=="")
			{
				$(".hover-line").css("transform","translateX("+this_left_px+"px)") //带进来
			}
		},
		function(){
			return go_start(); /*回到起点可以作为公共的函数来调用*/
		}
	)
})

 

© 著作权归作者所有

共有 人打赏支持
柴高八斗之父
粉丝 4
博文 158
码字总数 83661
作品 0
宁波
前端工程师
以用户体验为导向的设计表现

海底捞的服务是设计出来的,沃尔玛等超市的商品摆位也是设计出来的,苹果的产品就更不用说了。而这一切的设计都要以“用户体验”为导向,要从满足用户最基本的心里需求出发,要不断的差异化 ...

力谱宿云 ⋅ 2016/07/26 ⋅ 1

KodExplorer 4.22 发布,拖拽增强,安全性优化

KodExplorer 4.22 发布了。KodExplorer可 道云,原名芒果云,是基于 Web 技术的私有云和在线文件管理系统,它提供了类windows经典用户界面,一整套在线文件管理、文件预览、编辑、上传下载、...

雾渺 ⋅ 2017/10/02 ⋅ 5

移动端IM中大规模群消息的推送如何保证效率、实时性?

本文原题为“大规模群消息推送如何保证实时性?”,来自瓜子二手车IM负责人:封宇,本次内容有修订,感谢原作者(原文链接在文末)。 1、编者注 众所周之,群聊是移动端IM的服务端技术难点所...

JackJiang2011 ⋅ 2017/11/20 ⋅ 0

移动端IM中大规模群消息的推送如何保证效率、实时性?

本文原题为“大规模群消息推送如何保证实时性?”,来自瓜子二手车IM负责人:封宇,本次内容有修订,感谢原作者(原文链接在文末)。 1、编者注 众所周之,群聊是移动端IM的服务端技术难点所...

JackJiang- ⋅ 2017/11/20 ⋅ 0

VS2010编译过程中遇到的一个问题

对.net不是太熟悉,平时都是从SVN直接下来代码编译,没注意到工程里属性的设置。 今天碰到一个问题就是将dll引入了,但是using 总是报错,找不到namespace,一直没头绪,后来发现将project t...

pczhangtl ⋅ 2014/02/20 ⋅ 0

SEO优化基本点大全ganxis

本文中,彭遣SEO优化基地主要就网站优化需要操作的基本点进行归纳: 为网站取名,然后根据网站名称选择域名进行注册,选择可靠的虚拟主机或者服务器以保障网站连通率 围绕网站核心的内容,规...

lizhiww ⋅ 05/16 ⋅ 0

Android软件开发之盘点常用系统控件界面大合集(三)

常用系统控件界面大合集 雨松MOMO原创文章如转载,请注明:转载自雨松MOMO的博客原文地址:http://blog.csdn.net/xys289187120/article/details/6613004 雨松MOMO带大家盘点Android 开发中的一...

彭博 ⋅ 2012/03/09 ⋅ 0

Android软件开发之盘点常用系统控件界面大合集(三)

常用系统控件界面大合集 雨松MOMO原创文章如转载,请注明:转载自雨松MOMO的博客原文地址:http://blog.csdn.net/xys289187120/article/details/6613004 雨松MOMO带大家盘点Android 开发中的一...

晨曦之光 ⋅ 2012/03/07 ⋅ 0

100+个最佳jQuery菜单与下拉菜单示例(1/10)

1) jQuery w菜单/下拉菜单示例教程 此教程是描述一个拥有全部不错的样式动画以及功能的菜单,也许这正式你一直在寻找的。我将细致描述 HTML 与 CSS 。我将假设你了解了 HTML 与 CSS 的知识并...

彭博 ⋅ 2012/04/22 ⋅ 7

iOS图片浏览器(功能强大/性能优越)

github地址:iOS图片浏览器组件 支持 cocopods,功能完善,性能不错,代码质量尚可,喜欢的朋友可以给个小星星😁。 为了适应组件的自定义需求,代码和逻辑有点多,所以尽量不要修改源码,有...

indulge_in ⋅ 04/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从零开始搭建Risc-v Rocket环境---(1)

为了搭建Rocke环境,我买了一个2T的移动硬盘,安装的ubuntu-16.04 LTS版。没有java8,gcc是5.4.0 joe@joe-Inspiron-7460:~$ java -version程序 'java' 已包含在下列软件包中: * default-...

whoisliang ⋅ 5分钟前 ⋅ 0

大数据学习路线(自己制定的,从零开始学习大数据)

大数据已经火了很久了,一直想了解它学习它结果没时间,过年后终于有时间了,了解了一些资料,结合我自己的情况,初步整理了一个学习路线,有问题的希望大神指点。 学习路线 Linux(shell,高并...

董黎明 ⋅ 11分钟前 ⋅ 0

systemd编写服务

一、开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件。 如果你想让该软件开机启动,就执行下面的命令(以httpd.service为例)。 ...

勇敢的飞石 ⋅ 13分钟前 ⋅ 0

mysql 基本sql

CREATE TABLE `BBB_build_info` ( `community_id` varchar(50) NOT NULL COMMENT '小区ID', `layer` int(11) NOT NULL COMMENT '地址层数', `id` int(11) NOT NULL COMMENT '地址id', `full_......

zaolonglei ⋅ 22分钟前 ⋅ 0

安装chrome的vue插件

参看文档:https://www.cnblogs.com/yulingjia/p/7904138.html

xiaoge2016 ⋅ 25分钟前 ⋅ 0

用SQL命令查看Mysql数据库大小

要想知道每个数据库的大小的话,步骤如下: 1、进入information_schema 数据库(存放了其他的数据库的信息) use information_schema; 2、查询所有数据的大小: select concat(round(sum(da...

源哥L ⋅ 47分钟前 ⋅ 0

两个小实验简单介绍@Scope("prototype")

实验一 首先有如下代码(其中@RestController的作用相当于@Controller+@Responsebody,可忽略) @RestController//@Scope("prototype")public class TestController { @RequestMap...

kalnkaya ⋅ 52分钟前 ⋅ 0

php-fpm的pool&php-fpm慢执行日志&open_basedir&php-fpm进程管理

12.21 php-fpm的pool pool是PHP-fpm的资源池,如果多个站点共用一个pool,则可能造成资源池中的资源耗尽,最终访问网站时出现502。 为了解决上述问题,我们可以配置多个pool,不同的站点使用...

影夜Linux ⋅ 今天 ⋅ 0

微服务 WildFly Swarm 管理

Expose Application Metrics and Information 要公开关于我们的微服务的有用信息,我们需要做的就是将监视器模块添加到我们的pom.xml中: 这将使在管理和监视功能得到实现。从监控角度来看,...

woshixin ⋅ 今天 ⋅ 0

java连接 mongo伪集群部署遇到的坑

部署mongo伪集群 #创建mongo数据存放文件地址mkdir -p /usr/local/config1/datamkdir -p /usr/local/config2/data mkdir -p /usr/local/config3/data mkdir -p /usr/local/config1/l......

努力爬坑人 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部