菜单点击展开，超过四个则进行向右滑动显示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">
<!--header content begin-->

<!--header content end-->
<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' onclick="GetMaoUrl('nav1',this)">
<section class="home10_60" et_role="navIcon"></section>
<section et_role="classifyText">产品一</section>
</li>
<li hasChild='child2' onclick="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' onclick="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' onclick="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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</a>
<li><a et_role="classifyConValueText">&nbsp;</a>
<li><a et_role="classifyConValueText">&nbsp;</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;

var nObj=$("[data-etControl='e_style']").find("[et_role='classify']");
var liNum = nObj.find("li").length+1;
if(nObj.find("li").length < 5)
{
nObj.find("li").css("width",liNum+"%");
}
else
{
var liWidth =parseInt($("[data-etControl='e_style']").parent().width()/4);
console.log(liWidth,liNum)
nObj.find("li").css("width",liWidth+"px").parent().css("width",liWidth*liNum+"px");
document.querySelector("[data-etControl='e_style']").addEventListener(touchStart,touchStarts,false);
document.querySelector("[data-etControl='e_style']").addEventListener(touchEnd,touchEnds,false);
}
function locationUl(val){ //动画赋值
$("[data-etControl='e_style'] [et_role='classify']").css({
"transform":"translateX("+val+"px)",
"-ms-transform":"translateX("+val+"px)",
"-moz-transform":"translateX("+val+"px)",
"-webkit-transform":"translateX("+val+"px)"
});
}
function touchStarts(event){
event.pageX ? startPosition = event.pageX : startPosition = event.changedTouches[0].pageX;
movePosition = startPosition;
transitionTime(0);
document.querySelector("[data-etControl='e_style']").addEventListener(touchMove,touchMoves,false);
$("[et_role='classifyConDiv']").hide();
}
function touchMoves(event){
event.preventDefault();
var offsetPosition;
event.pageX ? offsetPosition = event.pageX : offsetPosition = event.changedTouches[0].pageX;
movePosition = offsetPosition - movePosition ;
//console.log("movePosition:",movePosition,offsetPosition)
locationUl(movePosition+getLocation());
movePosition = offsetPosition;
}
function touchEnds(event){
event.pageX ? endPosition = event.pageX: endPosition = event.changedTouches[0].pageX;
getLocation() > 0 && locationUl(0);
transitionTime(.3);
var panelWidth = $("[data-etControl='e_style']").width();
var ulWidthPanel = $("[data-etControl='e_style'] [et_role='classify']").width();
var panelLastPosition = ulWidthPanel-panelWidth;
getLocation() < -panelLastPosition && locationUl(-panelLastPosition);
transitionTime(.3);
}
function getLocation(){ //获取动画层当前位置
//console.log($("[data-etControl='e_style'] [et_role='classify']").css("transform"))
var transform,data;
if($("[data-etControl='e_style'] [et_role='classify']").css("transform"))
{
transform = $("[data-etControl='e_style'] [et_role='classify']").css("transform");

}
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>

posted @   Gaochunling  阅读(203)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae