效果图如下：（此菜单可以应用于电商种类选择页面，此处是仿优车诚品官网首页）
代码如下，可直接复制粘贴查看效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.more{
width:570px;
height:315px;
background:white;
border:1px solid darkgray;
margin:100px auto;
overflow:hidden;
}
a:hover{
cursor:pointer;
}
ul li{
list-style-type:none;
}
#more-left,#more-middle,#more-right{
height:100%;
float:left;
}
#more-left{
width:20px;
background-color:lightgray;
}
#more-left ul{
width:20px;
height:315px;
}
#more-left ul li{
width:20px;
height:15.7px;
}
#more-left ul li a{
display:block;
width:20px;
height:15.7px;
font-size:12px;
color:black;
text-align:center;
line-height:15.7px;
}
#more-left ul li a:hover{
background-color:#e64346;
color:white;
}
#more-middle{
width:120px;
background-color:ghostwhite;
overflow-y: scroll;
overflow-x:hidden;
}
#more-middle a{
display:block;
width:120px;
height:27px;
line-height:27px;
text-indent:1em;
color:black;
font-size:12px;
}
#more-middle a:hover{
background-color:#e64346;
color:white;
}
#more-middle a:active{
background-color:#e64346;
}
#a,#b,#c,#d,#g,#h,#j,#k,#l,#m,#n,#o,#q,#r,#s,#w,#x,#y,#z{
border-bottom:1px solid lightgray;
}
#more-right{
width:410px;
background-color:ghostwhite;
color:gray;
font-size:10px;
padding-left:20px;
padding-top:20px;
}
#more-right p{
height:20px;
line-height:20px;
color:gray;
font-size:10px;
}
#more-right p a{
display:block;
color:gray;
font-size:10px;
font-weight:normal;
float:left;
margin-right:15px;
height:20px;
line-height:20px;
text-align:center;
}
#more-right p a:hover{
background-color:crimson;
color:white;
}
</style>
</head>
<body>
<div class="more">
<div id="more-left">
<ul id="scroll">
<li><a alt="1" onclick="scrollTo(this);">A</a></li>
<li><a alt="2" onclick="scrollTo(this);">B</a></li>
<li><a alt="10" onclick="scrollTo(this);">C</a></li>
<li><a alt="12" onclick="scrollTo(this);">D</a></li>
<li><a alt="14" onclick="scrollTo(this);">F</a></li>
<li><a alt="18" onclick="scrollTo(this);">G</a></li>
<li><a alt="21" onclick="scrollTo(this);">H</a></li>
<li><a alt="24" onclick="scrollTo(this);">J</a></li>
<li><a alt="29" onclick="scrollTo(this);">K</a></li>
<li><a alt="31" onclick="scrollTo(this);">L</a></li>
<li><a alt="38" onclick="scrollTo(this);">M</a></li>
<li><a alt="41" onclick="scrollTo(this);">N</a></li>
<li><a alt="42" onclick="scrollTo(this);">O</a></li>
<li><a alt="44" onclick="scrollTo(this);">Q</a></li>
<li><a alt="45" onclick="scrollTo(this);">R</a></li>
<li><a alt="47" onclick="scrollTo(this);">S</a></li>
<li><a alt="50" onclick="scrollTo(this);">W</a></li>
<li><a alt="51" onclick="scrollTo(this);">X</a></li>
<li><a alt="54" onclick="scrollTo(this);">Y</a></li>
<li><a alt="56" onclick="scrollTo(this);">Z</a></li>
</ul>
</div>
<div id="more-middle">
<a onclick="showRight('0')">热门</a>
<a onclick="showRight('1')" id="a">A 奥迪</a>
<a onclick="showRight('2')">B 比亚迪</a>
<a onclick="showRight('3')">B 宝马</a>
<a onclick="showRight('4')">B 标志</a>
<a onclick="showRight('5')">B 奔驰</a>
<a onclick="showRight('6')">B 别克</a>
<a onclick="showRight('7')">B 保时捷</a>
<a onclick="showRight('8')">B 奔腾</a>
<a onclick="showRight('9')" id="b">B 本田</a>
<a onclick="showRight('10')">C 长安轿车</a>
<a onclick="showRight('11')" id="c">C 长城</a>
<a onclick="showRight('12')">D 大众</a>
<a onclick="showRight('13')" id="d">D 道奇</a>
<a onclick="showRight('14')">F 丰田</a>
<a onclick="showRight('15')">F 福特</a>
<a onclick="showRight('16')">F 菲亚特</a>
<a onclick="showRight('17')" id="f">F 法拉利</a>
<a onclick="showRight('18')">G GMC</a>
<a onclick="showRight('19')">G 观致汽车</a>
<a onclick="showRight('20')" id="g">G 广汽</a>
<a onclick="showRight('21')">H 华泰</a>
<a onclick="showRight('22')">H 红旗</a>
<a onclick="showRight('23')" id="h">H 哈弗</a>
<a onclick="showRight('24')">J 捷豹</a>
<a onclick="showRight('25')">J 吉利帝豪</a>
<a onclick="showRight('26')">J Jeep</a>
<a onclick="showRight('27')">J 江淮</a>
<a onclick="showRight('28')" id="j">J 江铃</a>
<a onclick="showRight('29')">K 凯迪拉克</a>
<a onclick="showRight('30')" id="k">K 克莱斯勒</a>
<a onclick="showRight('31')">L 兰博基尼</a>
<a onclick="showRight('32')">L 雷克萨斯</a>
<a onclick="showRight('33')">L 铃木</a>
<a onclick="showRight('34')">L 猎豹汽车</a>
<a onclick="showRight('35')">L 林肯</a>
<a onclick="showRight('36')">L 路虎</a>
<a onclick="showRight('37')" id="l">L 雷诺</a>
<a onclick="showRight('38')">M 马自达</a>
<a onclick="showRight('39')">M MG</a>
<a onclick="showRight('40')" id="m">M MINI</a>
<a onclick="showRight('41')" id="n">N 纳智捷</a>
<a onclick="showRight('42')">O 欧宝</a>
<a onclick="showRight('43')" id="o">O 讴歌</a>
<a onclick="showRight('44')" id="q">Q 起亚</a>
<a onclick="showRight('45')">R 荣威</a>
<a onclick="showRight('46')" id="r">R 日产</a>
<a onclick="showRight('47')">S 斯柯达</a>
<a onclick="showRight('48')">S 斯巴鲁</a>
<a onclick="showRight('49')">S Smart</a>
<a onclick="showRight('50')" id="s">S 三菱</a>
<a onclick="showRight('51')" id="w">W 沃尔沃</a>
<a onclick="showRight('52')">X 雪佛兰</a>
<a onclick="showRight('53')">X 雪铁龙</a>
<a onclick="showRight('54')" id="x">X 现代</a>
<a onclick="showRight('55')">Y 野马汽车</a>
<a onclick="showRight('56')" id="y">Y 英菲迪尼</a>
<a onclick="showRight('57')">Z 中华</a>
<a onclick="showRight('58')" id="z">Z 众泰</a>
</div>
<div id="more-right" style="color:gray;"></div>
</div>
<script src="jquery-1.10.2.min.js"></script>
<script>
/*根据得到的下标在more-right里插入相应的内容*/
function showRight(index){
var i=parseInt(index);
switch (i){
case 0:
var c=$("#more-right").empty();
$("<p><a>奥迪：</a><a>A4L</a><a>A6L</a><a>A8L</a><a>Q3</a><a>Q5</a></p>").appendTo("#more-right");
$("<p><a>宝马：</a><a>3系</a><a>5系</a><a>7系</a><a>X1</a><a>X3</a><a>X5</a></p>").appendTo("#more-right");
$("<p><a>别克：</a><a>君越</a><a>凯越</a><a>君威</a><a>英朗GT</a><a>英朗XT</a></p>").appendTo("#more-right");
$("<p><a>大众：</a><a>宝来</a><a>高尔夫</a><a>速腾</a><a>迈腾</a><a>POLO</a><a>CC</a></p>").appendTo("#more-right");
$("<p><a>日产：</a><a>骊威</a><a>天籁</a><a>骐达</a><a>颐达</a><a>逍客</a><a>帕拉丁</a></p>").appendTo("#more-right");
$("<p><a>丰田：</a><a>普拉多</a><a>汉兰达</a><a>凯美瑞</a><a>RAV4</a><a>雅力士</a></p>").appendTo("#more-right");
$("<p><a>本田：</a><a>思域</a><a>CR-V</a><a>雅阁</a><a>奥德赛</a><a>飞度</a><a>锋范</a></p>").appendTo("#more-right");
$("<p><a>现代：</a><a>悦动</a><a>伊兰特</a><a>朗动</a><a>ix35</a><a>途胜</a><a>索纳塔</a></p>").appendTo("#more-right");
$("<p><a>马自达：</a><a>马自达3</a><a>马自达6</a><a>马自达6轿跑</a><a>睿翼</a><a>MPV</a></p>").appendTo("#more-right");
break;
case 1:
var c=$("#more-right").empty();
$("<p><a>奥迪A4L</a><a>奥迪A6L</a><a>奥迪Q3</a><a>奥迪Q5（进口）</a></p>").appendTo("#more-right");
$("<p><a>奥迪Q7（进口）</a><a>奥迪A8L（进口）</a><a>奥迪A4</a><a>奥迪TT（进口）</a></p>").appendTo("#more-right");
$("<p><a>奥迪A3（进口）</a><a>奥迪A1（进口）</a><a>奥迪A7（进口）</a><a>奥迪Q7</a></p>").appendTo("#more-right");
break;
case 2:
var c=$("#more-right").empty();
$("<p><a>比亚迪S3</a><a>比亚迪F6</a></p>").appendTo("#more-right");
break;
case 3:
var c=$("#more-right").empty();
$("<p><a>宝马3系</a><a>宝马5系</a><a>宝马X1</a><a>宝马1系</a></p>").appendTo("#more-right");
$("<p><a> 宝马1系(进口)</a><a>宝马X3(进口)</a><a>宝马3系GT</a><a>宝马5系GT(进口)</a></p>").appendTo("#more-right");
$("<p><a>宝马X5(进口)</a><a>宝马7系(进口)</a><a>宝马X6(进口)</a><a>宝马M3</a></p>").appendTo("#more-right");
$("<p><a> 宝马Z4(进口)</a><a>宝马X3</a></a></p>").appendTo("#more-right");
break;
//后面类似，此处先不写了
}
}
/*得到想到达的元素序号并以此得到要滚动的数值*/
function scrollTo(obj){
var con=$(obj).attr("alt");
var alt=parseInt(con);
var tar=alt*27;
$("#more-middle").scrollTop(tar);
// $("#more-middle").animate({scrollTop:tar},500);
}
</script>
</body>
</html>
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
