左侧分类导航菜单（续）

左侧分类导航菜单，是电商购物导航的最直接的分类形式。

js方面主要以下几点注意

1、事件有mouseover、mouseleave

onmouseover 事件会在鼠标指针移动到指定的对象上时发生。

onmouseleave 事件会在鼠标指针移出到指定的对象时发生。

2、setTimeout、clearTimeout

setTimeout 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout() 只执行 code 一次。

clearTimeout 方法可取消由 setTimeout() 方法设置的 timeout。

代码片段：

鼠标移动到li元素上和移出元素时执行的动作

css方面主要一下几点注意

1、position: relative 和 position的使用

2、清楚浮动

3、hover伪类的使用

代码演示：

如果设置显示将"navSwitch": "navopen"，默认隐藏。

<!DOCTYPE html>

<html>

<head>

<style>

*{ margin: 0px; padding: 0px; list-style: none; color: #333; }

body{ padding-top: 20px; height: 1000px; }

.cfl{*zoom:1;}

.cfl:after{content:"\0020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}

.nav{ position: relative; width: 960px; margin: 0px auto; }

.navswitch{ width: 230px; height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; }

.navswitch a{ position: relative; display: block; height: 100%; font-weight: 700; text-decoration: none; padding-left: 30px; background: #f1f1f1; }

.navswitch a .tri{ position: absolute; right: 20px; top: 22px; z-index: 1; display: block; width: 0px; height: 0px; line-height: 0px; font-size: 0px; border: 8px solid #ffffff; border-color: #ffffff transparent transparent transparent; border-style: solid dashed dashed dashed; display: none; }

.navlist{ position: absolute; left: 0px; top: 51px; width: 230px; height: 650px; background: #f1f1f1; display: none; }

.navlist .item{ position: relative; height: 40px; border-bottom: 1px solid #ccc; }

.navlist .item .tit{ display: block; line-height: 40px; font-size: 16px; text-decoration: none; background: #f1f1f1; padding-left: 30px; }

.navlist .item .tit:hover{ background: #ccc; }

.navlist .item .on{ background: #ccc; }

.navlist .item .tri{ position: absolute; right: -1px; top: 10px; z-index: 2; display: block; width: 0px; height: 0px; line-height: 0px; font-size: 0px; border: 10px solid #f3f3f3; border-color:transparent #f3f3f3 transparent transparent; border-style: dashed solid dashed dashed; display: none; }

.navlist .item .tri i{ position: absolute; left: -4px; top: -8px; display: block; width: 0px; height: 0px; line-height: 0px; font-size: 0px; border: 8px solid #ffffff; border-color:transparent #ffffff transparent transparent; border-style: dashed solid dashed dashed; }

.navlist .item .show{ position: absolute; left: 230px; top: 0px; z-index: 1; width: 535px; border: 3px solid rgba(0,0,0,0.05); padding: 10px 0px 10px 0px; }

.navlist .item .show .lt{ float: left; width: 225px; font-size: 12px; line-height: 20px; }

.navlist .item .show .lt a{ text-decoration: none; }

.navlist .item .show .lt a:hover{ text-decoration: underline; }

.navlist .item .show .lt dl{ padding-left: 16px; margin-bottom: 10px; }

.navlist .item .show .lt dt{ font-weight: 700; font-size: 14px; line-height: 30px; }

.navlist .item .show .rt{ float: right; width: 300px; margin-right: 10px; }

</style>

</head>

<body>

<dl>

</dl>

<dd><a href="#">热门商品一</a></dd>

<dd><a href="#">热门商品二</a></dd>

</div>

</a>

</li>

</ul>

var nav = {

init: function(params){

var _this = this;

this.params = $.extend({"delay": 200, "navSwitch": "navoff"},params);

this.showlist = $("#showlist");

this.navswitch = $(".navswitch");

this.isshowlist = false;

this.stopswitch = null;

this.stopswitchup = null;

_this.events();

events: function(){

_this.domInitAction();

_this.navSwitchAction();

_this.liAction();

domInitAction: function(){

if(_this.params.navSwitch === "navopen"){

_this.showlist.show();

_this.navswitch.find(".tri").hide();

} else {

_this.showlist.hide();

_this.navswitch.find(".tri").fadeIn();

}

navSwitchAction: function(){

_this.navswitch.hover(function(){

if(_this.params.navSwitch !== "navopen"){

if(!!_this.stopswitch){

clearTimeout(_this.stopswitch);

if(!!_this.stopswitchup){

clearTimeout(_this.stopswitchup);

_this.showlist.fadeIn();

},function(){

_this.stopswitch = setTimeout(function(){

_this.showlist.fadeOut();

},_this.params.delay);

});

liAction: function(){

var _this = this,stopOver = null,stopLeave = null;

_this.showlist.find(".item").live("mouseover",function(){

var $this = $(this), show = _this.showlist.find(".show"), len = show.length;

if(!!stopOver){

clearTimeout(stopOver);

if(!!stopLeave){

clearTimeout(stopLeave);

stopOver = setTimeout(function(){

_this.showlist.find(".show,.tri").hide();

_this.showlist.find(".tit").removeClass("on");

var index = $this.index(),tmpheight = $this.find(".show").height(),topval = 0;

if(index < 5){

topval = index * (-41);

show.css({"top": topval + "px"});

} else if(index > ( len - 5)) {

topval = -tmpheight + (len - 1 -index) * 41 + 20;

} else{

var tmpheight = $this.find(".show").height();

topval = -tmpheight/2 + 10;

$this.find(".show,.tri").show();

$this.find(".tit").addClass("on");

_this.showlist.find(".item").live("mouseleave",function(){

var $this = $(this);

stopLeave = setTimeout(function(){

$this.find(".show,.tri").hide();

$this.find(".tit").removeClass("on");

_this.showlist.hover(function(){

_this.stopswitchup = setTimeout(function(){

};

nav.init({"navSwitch": "navopen"});

</script>

</body>

</html>

运行代码

默认效果如下：

nav.init();

左侧分类导航菜单（续）

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条