html5菜单代码,javascript菜单代码

怎样学习Web开发，纯html5+css3下拉导航菜单实现代码

//html结构

ul

lia href移动到这里来/a

span听说你想看见我？/span

/li

/ul

//css

span {height:0;overflow:hidden;transition:0.5s}

li:hover span {height:20px}

//方法很多 最主要的就是利用hover以及transition

//注意兼容写法

相关问答

Q1: dx html5怎样写下拉菜单

1）、普通下拉列表菜单

html代码如下：

form action="" method="get" 

label1、普通下拉列表菜单/label 

select name="" 

option value="0"DIVCSS5/option 

option value="1"DIVCSS5/option 

/select 

/form 

2）、跳转下拉列表菜单（如常见点击后跳转到选择网站）

常常一些网站做友情链接，与部门之间使用select下拉标签实现网址跳转。下面我们通过代码与案例接受select跳转菜单应用。

跳转菜单html代码如下：

form action="" method="get" 

label2、跳转的下拉列表菜单/label 

select name="jumpMenu" id="jumpMenu"

 onchange="MM_jumpMenu('parent',this,0)" 

option value=""Rothur/option 

option value=""Rothur/option 

/select 

/form 

实现跳转还需要在head标签内加入Js脚本动作代码：

script type="text/javascript" !-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } //-- /script

Q2: 微信公众号的菜单栏的html5代码中，如何跳转至小程序指定路径？

目前无法从网站的h5页面直接跳转到小程序，

无论是手机上浏览器、微信h5页面、亦或是QQ中的h5，

都不能跳转。

不过，你可以在微信H5的页面中加入小程序二维码图片的形式，长按识别，间接跳转到小程序。

Q3: html5左侧弹出菜单怎样实现

这个可以通过绝对定位，配合left设置 或者translate去实现

left的方法：

比如让class为menu的元素宽为300px，高100%的，设置left为-300px；在这期间可以加一个过渡transition:left 0.3s ...；

然后让class为menu active的元素设置 left设置为0就可以了 ，在这期间可以加一个过渡transition:left 0.3s ...；

然后可以通过Jquery的toggleClass('active');来实现切换

translate

比如让class为menu的元素宽为300px，高100%的，设置left为-300px；在这期间可以加一个过渡transition:left 0.3s ...；

然后让class为menu active的元素设置 transform:translate3d(-300px,0,0) ，在这期间可以加一个过渡transition:left 0.3s ...；

然后可以通过Jquery的toggleClass('active');来实现切换

这个过程中 需要注意 body需要overflow：hidden; (不然会有滚动条，可设置overflow-x即可)

left 和 translate 最好用translate ，translate3d可以开启GPU硬件加速，性能会更好，体验会更流畅

我github有类似小组件样式

github： IFmiss

希望能解决你的问题