怎样用JavaScript做横向导航菜单，当鼠标划过的时候二级菜单缓缓的出现？请教各位大虾!

JavaScript06

怎样用JavaScript做横向导航菜单，当鼠标划过的时候二级菜单缓缓的出现？请教各位大虾!,第1张

没有必要去自己写，除非你是专门做web前台的。可以去下载一个叫做“春天网页菜单”的软件，专门用来生成导航菜单的，里面有你说的那种效果。

当然自己写的话可以用楼上说的jquery的show函数或者动画函数来实现。

<!DOCTYPE html>

<html>

<head>

<meta charset=UTF-8>

<title>

RunJS 演示代码

</title>

<style>

*{

margin:0

padding:0

}

ul{

list-style:none

}

ul li{

height:20px

cursor:pointer

}

.wrap {

margin:0 auto

width: 100px

}

.menu{

border:1px solid black

}

.menu>li:not(:last-child){

border-bottom:1px solid black

}

.menu>li ul{

display:none

width:300px

height:20px

border:1px solid black

margin:-20px 0px 0px 99px

}

.menu li:hover{

background-color:#fd3

}

.menu li:hover ul{

display:block

background-color:#fd3

}

.menu>li ul li{

float:left

padding:0px 10px 0px 10px

}

</style>

  </head>

<body>

<div class="wrap">

<ul class="menu">

<li>

一级菜单a

<ul>

<li>

二级菜单a

</li>

<li>

二级菜单a

</li>

<li>

二级菜单a

</li>

</ul>

</li>

<li>

一级菜单b

<ul>

<li>

二级菜单b

</li>

<li>

二级菜单b

</li>

<li>

二级菜单b

</li>

</ul>

</li>

<li>

一级菜单c

<ul>

<li>

二级菜单c

</li>

<li>

二级菜单c

</li>

<li>

二级菜单c

</li>

</ul>

</li>

<li>

一级菜单d

<ul>

<li>

二级菜单d

</li>

<li>

二级菜单d

</li>

<li>

二级菜单d

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>

<meta charset="utf-8">

例如：

需求：导航栏实现横向滑动,适应移动端，当滑动到最后时，图标隐藏

css实现滑动效果：

style样式：

.scrollContainer{overflow:auto}

.box{

display:box

display:-webkit-box//也可使用display:flex

height:"40px"

}

.box span{

display: block !important//这是重点！！

width:"60px",

height: "40px"

line-height: "40px"

text-align:center

}

<div class="scrollContainer">

<div class="box">

<span>HT</span>

<span>CTC</span>

<span>SLT</span>

<span>AET</span>

<span>LET</span>

</div>

</div>

js中实现滑动效果：

思路：

当（滑动的距离=总滑动宽度-可视宽度 || 滑动的距离>总滑动宽度-可视宽度）时，隐藏图标，相反显示

domElement.scrollLeft(滑动距离)

domElement.scrollWidth(总滑动宽度-可视宽度)

domElement.clientWidth(可视宽度)