左側分類導航菜單（續）

左側分類導航菜單，是電商購物導航的最直接的分類形式。

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多任務上傳添加進度條