菜单点击展开，超过四个则进行向右滑动显示demo

<!doctype html>
<html>
<head>
<base href="http://test.qdetong.com/sites/3c2bb1c00f40463d6cc02cb3c3ba5263/">
<meta charset="utf-8">
<title>产品分类demo</title>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta property="wb:webmaster" content="c51923015ca19eb1">
<link href="demo.css" rel="stylesheet" type="text/css">
<style>
html {
font-size:62.5%;
}
* {
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
}
[data-etControl="content"] {
padding: 8px;
min-height: 400px;
max-width: 323px;
margin: 0 auto
}
[data-etControl="content"] > [data-etControl] {
margin: 10px 0;
}
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
[data-etcontrol="e_style"] [et_role="classifyList"] {
padding: 1em 0;
width: 100%;
}
[data-etcontrol="e_style"] [et_role="classify"] {
position: relative;
width: 100%;
color: #903;
display: block;
}
[data-etcontrol="e_style"] [et_role="classify"] li {
/*float: left;*/
display: inline-block;
position: relative;
padding: 1%;
width: 24%;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
[data-etcontrol="e_style"] [et_role="classify"] li a {
display: block;
padding: .375rem 0;
text-decoration: none;
}
[data-etcontrol="e_style"] [et_role="classify"] li [et_role="navIcon"] {
width: 60px!important;
height: 60px!important;
margin: 0 auto!important;
background-size: 50px 50px!important;
display: block!important;
position: relative!important;
}
[data-etcontrol="e_style"] [et_role="classify"] li [et_role="classifyText"] {
color: #999999;
font-size: 1.2rem;
text-decoration: none;
}
[data-etcontrol="e_style"] [et_role="classify"] li[hasChild='child2'] [et_role="classifyText"]{
background:url(http://test.qdetong.com//system/demotest/imore.png) no-repeat right 3px;
}
/*[data-etcontrol="e_style"] [et_role="classify"] li[hasChild='child2'] [et_role="classifyText"]:after{
position: relative;
content:"";
top:10px;
width:0;
height:0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #ccc;
}*/

.active [et_role="classifyText"]{

background:url(http://test.qdetong.com//system/demotest/imore.png) no-repeat right -10px !important;
}
[data-etcontrol="e_style"] [et_role="classify"] li [et_role="classifyCon"] {
display: none;
width: 100%;
background: #f3f3f3;
overflow: hidden;
transition: height .1s;
-webkit-transition: height .1s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
[data-etcontrol="e_style"] [et_role="classifyConBox"] [et_role="classifyCon"] li {
background: #f3f3f3;
float: left;
display: inline-block;
width: 25%;
margin-top: -4px;
text-align: center;
overflow: hidden;
border-left: 1px solid #ddd;
height: 4rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 1.5rem;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
}
[data-etcontrol="e_style"] [et_role="classifyConBox"] [et_role="classifyConDiv"] {
display: none;
}
/*[data-etcontrol="e_style"] [et_role="classifyConBox"] [et_role="classifyConDiv"] i {
position: relative;
top: -12px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgb(243, 243, 243);
}
[data-etcontrol="e_style"] [et_role="classifyConBox"] [et_role="classifyConDiv"]:nth-child(4n+1) i {
left: 10%;
}
[data-etcontrol="e_style"] [et_role="classifyConBox"] [et_role="classifyConDiv"]:nth-child(4n+2) i {
left: 35%;
}
[data-etcontrol="e_style"] [et_role="classifyConBox"] [et_role="classifyConDiv"]:nth-child(4n+3) i {
left: 60%;
}
[data-etcontrol="e_style"] [et_role="classifyConBox"] [et_role="classifyConDiv"]:nth-child(4n+4) i {
left: 60%;
}*/
.home10_60 {
background: url(http://www.eyingbao.com/system/styles/iconcolor60/home10_60.png) 45% 45% no-repeat;
background-size: 60px 60px;
}
.pen_60 {
background: url(http://www.eyingbao.com/system/styles/iconcolor60/pen_60.png) 45% 45% no-repeat;
background-size: 60px 60px;
}
.people3_60 {
background: url(http://www.eyingbao.com/system/styles/iconcolor60/people3_60.png) 45% 45% no-repeat;
background-size: 60px 60px;
}
</style>
</head>
<body>
<div data-etControl="et_Page" class="undefined" >
<div id="all_element">

<div data-etcontrol="content" class="ui-sortable" style="min-height: 486px; height: auto;">
<div data-etcontrol="e_style" attributiveetid="productlist_1435127045114" name="newsMenu">
<div et_role="classifyList">
<ul et_role="classify">
<li hasChild='child2' οnclick="GetMaoUrl('nav1',this)">
<section class="home10_60" et_role="navIcon"></section>
<section et_role="classifyText">产品一</section>
</li>
<li hasChild='child2' οnclick="GetMaoUrl('nav2',this)"> <a href="javascript:void(0)" et_role="classifyValueText">
<section class="pen_60" et_role="navIcon"></section>
<section et_role="classifyText">产品二</section>
</a></li>
<li hasChild='child2' οnclick="GetMaoUrl('nav3',this)"> <a href="javascript:void(0)" et_role="classifyValueText">
<section class="people3_60" et_role="navIcon"></section>
<section et_role="classifyText">产品三</section>
</a></li>
<li> <a href="#" et_role="classifyValueText">
<section class="home10_60" et_role="navIcon"></section>
<section et_role="classifyText">产品四</section>
</a></li>
<li> <a href="#" et_role="classifyValueText">
<section class="home10_60" et_role="navIcon"></section>
<section et_role="classifyText">产品5</section>
</a></li>
<li hasChild='child2' οnclick="GetMaoUrl('nav4',this)"> <a href="javascript:void(0)" et_role="classifyValueText">
<section class="home10_60" et_role="navIcon"></section>
<section et_role="classifyText">产品6</section>
</a></li>
</ul>
</div>
<div et_role="classifyConBox" >
<div et_role="classifyConDiv" id="nav1" class=""> <i></i>
<ul et_role="classifyCon">
<li><a et_role="classifyConValueText">分类1</a>
<li><a et_role="classifyConValueText">分类1</a>
<li><a et_role="classifyConValueText">分类1</a>
<li><a et_role="classifyConValueText">分类1</a>
<li><a et_role="classifyConValueText">分类1</a>
<li><a et_role="classifyConValueText">分类1</a>
<li><a et_role="classifyConValueText">分类1</a>
<li><a et_role="classifyConValueText"> </a>
</ul>
</div>
<div et_role="classifyConDiv" id="nav2"> <i></i>
<ul et_role="classifyCon">
<li><a et_role="classifyConValueText">分类2</a>
<li><a et_role="classifyConValueText">分类2</a>
<li><a et_role="classifyConValueText">分类2</a>
<li><a et_role="classifyConValueText"> </a>
</ul>
</div>
<div et_role="classifyConDiv" id="nav3"> <i></i>
<ul et_role="classifyCon">
<li><a et_role="classifyConValueText">分类3</a>
<li><a et_role="classifyConValueText">分类3</a>
<li><a et_role="classifyConValueText">分类3</a>
<li><a et_role="classifyConValueText">分类3</a>
<li><a et_role="classifyConValueText">分类3</a>
<li><a et_role="classifyConValueText">分类3</a>
<li><a et_role="classifyConValueText">分类3</a>
<li><a et_role="classifyConValueText">分类3</a>
<li><a et_role="classifyConValueText">分类3</a>
<li><a et_role="classifyConValueText">分类3</a>
<li><a et_role="classifyConValueText">分类33333</a>
<li><a et_role="classifyConValueText"> </a>
</ul>
</div>
<div et_role="classifyConDiv" id="nav4"> <i></i>
<ul et_role="classifyCon">
<li><a et_role="classifyConValueText">分类6</a>
<li><a et_role="classifyConValueText"> </a>
<li><a et_role="classifyConValueText"> </a>
<li><a et_role="classifyConValueText"> </a>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://J.bjyyb.net/jq.js"></script>
<script>
var touchStart = window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart";
var touchMove = window.navigator.msPointerEnabled ? "MSPointerMove" : "touchmove";
var touchEnd = window.navigator.msPointerEnabled ? "MSPointerUp" : "touchend";
var startPosition = 0;
var endPosition = 0;
var movePosition;
var ulLocation = 0;

}
if($("[data-etControl='e_style'] [et_role='classify']").css("-webkit-transform"))
{
transform = $("[data-etControl='e_style'] [et_role='classify']").css("-webkit-transform");

}
if($("[data-etControl='e_style'] [et_role='classify']").css("-moz-transform"))
{
transform = $("[data-etControl='e_style'] [et_role='classify']").css("-moz-transform");

}
if($("[data-etControl='e_style'] [et_role='classify']").css("-ms-transform"))
{
transform = $("[data-etControl='e_style'] [et_role='classify']").css("-ms-transform");

}
if(transform=="none"){
transform==ulLocation==0;
}else{
data = transform.split(",");
ulLocation = parseInt(data[4]);
}

return ulLocation;
}

function transitionTime(time){
$("[data-etControl='e_style'] [et_role='classify']").css({
"transition":"all "+time+"s",
"-ms-transition":"all "+time+"s",
"-moz-transition":"all "+time+"s",
"-webkit-transition":"all "+time+"s"
})
}

GetMaoUrl = function (maoid,e){
var str=location.href,
strs= new Array(),
navObj=$("#"+maoid);
strs=str.split("#");
location.href = strs[0] + '#' + maoid;

function exspend(){
var navClass=navObj.attr("class");

if(navClass=="exspend"){
navObj.removeClass("exspend").hide();
$(e).removeClass("active");
}else{
$("[haschild='child2']").removeClass("active");
navObj.show().addClass("exspend");
$("[et_role='classifyConDiv']").not("#"+maoid).hide().removeClass("exspend");
$(e).addClass("active");
}
}
exspend();

}

</script>
</body>
</html>

转载于:https://www.cnblogs.com/litterjoan/articles/4610141.html

菜单点击展开，超过四个则进行向右滑动显示demo相关推荐

echarts图表横坐标如果超过几个字就换行显示
/* *判断图表横坐标如果超过四个字就换行显示option是option,number是字数axis是x坐标轴还是y坐标 */ function newline(option, number, axi ...
jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果
html: <div class="col-sm-3 col-md-2 sidebar"><div class="totalt">< ...
jquery实现字数限制，超过部分...代替，后缀点击展开，点击后展开全文
<script type="text/javascript">$(function(){$("p").each(function(){var max ...
html点击展开菜单,简单实现js点击展开二级菜单功能
虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的.我最近就遇到做 ...
android点击展开全文,Android显示全文折叠控件使用方法详解
一般列表里文字太多的一个折叠效果的空间,效果图如下. 当文字超过设定的行数后就折叠,小于设定行数不显示展开按钮.下面上代码. 先看布局文件: android:layout_width="wr ...
vue项目-element UI-NavMenu 导航菜单始终只展开一个
vue项目-element UI-NavMenu 导航菜单始终只展开一个全局搜索:unique-opened找到该配置将其改成true unique-opened:是否只保持一个子菜单的展开 < ...
AS2:实现右滑删除，点击展开及点击跳转
目录一.右滑删除 1.设计界面 2.适应器adapter 3.在对应的fragment中设置 4.效果展示二.点击展开 1.设计界面 2.建立适应器 3.在对应的Activity的Frament中 ...
html 点击展开显示全部,多行溢出省略号显示及点击展开（css/js）实现！
关于多行溢出显示省略号的问题,如果是根据字符的长度个数限制超过部分替换为省略号,这种还是很好处理的,关键是根据行数,在未知情况下你不知道需要多少内容,去填满一个元素,做起来还是比较麻烦的,网上很多种 ...
jQuery实现下拉菜单(点击显示/隐藏)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...

菜单点击展开，超过四个则进行向右滑动显示demo

菜单点击展开，超过四个则进行向右滑动显示demo相关推荐

最新文章

热门文章