html代码如下:
<form action="" method="get">
<label>1、普通下拉列表菜单</label>
<select name="">
<option value="0">DIVCSS5</option>
<option value="1">DIVCSS5</option>
</select>
</form>
2)、跳转下拉列表菜单(如常见点击后跳转到选择网站)
常常一些网站做友情链接,与部门之间使用select下拉标签实现网址跳转。下面我们通过代码与案例接受select跳转菜单应用。
跳转菜单html代码如下:
<form action="" method="get">
<label>2、跳转的下拉列表菜单</label>
<select name="jumpMenu" id="jumpMenu"
onchange="MM_jumpMenu('parent',this,0)">
<option value="http://www.Rothur.com/">Rothur</option>
<option value="http://www.Rothur.com/">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>
这个可以通过绝对定位,配合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
希望能解决你的问题