『壹』 怎麼用js和css做一個滑動折疊的菜單
1、在網頁<head>區添加以下樣式定義 ：
<style type="text/css">
#dlmenu {height:10em;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center center; color:#ff0; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:20em; background:#b4be9c url(sub_grad.gif);}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 15em; margin: 0; background: #6f9c6f; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background:#949e7c url(top_grad.gif) center center;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#b4be9c url(sub_grad.gif);}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#7aa; color:#ff0;}
</style>
2、在網頁<body>區添加菜單HTML代碼
<div id="dlmenu">
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="../menu/index.html">DEMOS</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
<dd><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="index.html">MENUS</a></dt>
<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>
<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
<dd><a href="circles.html" title="circular links">circular links</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="../layouts/index.html">LAYOUTS</a></dt>
<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
<dd><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="../mozilla/index.html">MOZILLA</a></dt>
<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>
<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>
<dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
<dd><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
『貳』 求jQuery或js實現淘寶上面的圖標菜單在手機上滑動的效果。m.taobao.com
在PC端的網頁上，用CSS加個滾動條就可以滑動了，樣式為overflow-x:auto;，
但是在手機端這個樣試是不起作用的，在目前三個主流手機端 ios 、android、wp的系統上，只有wp的系統支持這個樣式，ios和android都不支持，要想在手機端實現同樣的功能，那麼你可以用手機端屬的JS事件來控制
xxx.addEventListener("touchstart",function(e){
//這里放手指移上去的代碼，可以取到手指移上去的屏幕坐標，在e中取。
},false);
document.addEventListener("touchend",function(e){
//這里放手指移出去的代碼，可以取到手指移出後屏幕上的坐標，在e中取。
},false);
document.addEventListener("touchmove",function(e){
//這里放手機在屏幕上劃動的代碼，可以隨時取得手指的坐標，並對元素做相應的調整。
},false);
以上的手機觸屏事件分別對應著PC網頁端的
onmousedown事件、onmouseup事件和onmousemove事年，
注意以上的手機端的JS事件在網頁端是無效的(touchstart,touchend,touchmove)
『叄』 關於javascript中菜單欄過長 實現左右箭頭滑動項~
<style>
ul{
margin:0px;
padding:0px;
}
li{
float:left;
cursor:pointer;
}
.map_div{
width:900px;
height:40px;
background-color:#000000;
overflow:hidden;
}
#dh_li{
width:800px;
height:40px;
background-color:#000000;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
text-overflow:ellipsis;
display:block;
after:content:"...";
}
#dh_li li{
width:150px;
height:40px;
background-color:#000000;
color:#FF0000;
border-right:1px solid #FF0000;
text-align:center;
padding-top:10px;
overflow:hidden;
}
#dh_li li a:link{
color:#FF0000;
}
#dh_li li a:visited{
color:#FF0000;
}
#dh_li li a:hover{
color:#FF0000;
}
.dh_li{
width:50px;
height:40px;
font-size:20px;
font-weight:bold;
color:#FF0000;
text-align:center;
padding-top:10px;
background-color:#CCCCCC;
}
</style>
<body>
<div class="map_div">
<ul>
<li id="dh_li">
<div style="width:1500px;">
<ul>
<li><a href="#">網站首頁</a></li>
<li><a href="#">公司簡介</a></li>
<li><a href="#">產品展示</a></li>
<li><a href="#">新聞咨詢</a></li>
<li><a href="#">熱點咨詢</a></li>
<li><a href="#">合作夥伴</a></li>
<li><a href="#">網站論壇</a></li>
<li><a href="#">在線咨詢</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>
</li>
<li id="left_" class="dh_li" onclick="move_left();">←</li>
<li id="right_" class="dh_li" onclick="move_right();">→</li>
</ul>
</div>
</body>
<script>
var demo=document.getElementById("dh_li");
function move_right()
{
if(dh_li.scrollLeft<=(1500-800))
dh_li.scrollLeft+=150;
}
function move_left()
{
if(dh_li.scrollLeft>=0)
dh_li.scrollLeft-=150;
}
</script>
『肆』 哪個手機網站滑動菜單是實現手動，自動滾動
在PC端的網頁上，用CSS加個滾動條就可以滑動了，樣式為overflow-x:auto;， 但是在手機端這個樣試是不起作用的，在目前三個主流手機端 ios 、android、wp的系統上，只有wp的系統支持這個樣式，ios和android都不支持，要想在手機端實現同樣的功能，那麼你可以用手機端屬的JS事件來控制 xxx.addEventListener("touchstart",function(e){ //這里放手指移上去的代碼，可以取到手指移上去的屏幕坐標，在e中取。 },false); document.addEventListener("touchend",function(e){ //這里放手指移出去的代碼，可以取到手指移出後屏幕上的坐標，在e中取。 },false); document.addEventListener("touchmove",function(e){ //這里放手機在屏幕上劃動的代碼，可以隨時取得手指的坐標，並對元素做相應的調整。 },false); 以上的手機觸屏事件分別對應著PC網頁端的 onmousedown事件、onmouseup事件和onmousemove事年， 注意以上的手機端的JS事件在網頁端是無效的(touchstart,touchend,touchmove)
『伍』 css 滑動門菜單製作
<style>
body {font-size:12px;font-family:宋體}
ul.TabBarLevel1{
list-style:none;
margin:0;
padding:0;
height:29px;
background-image:url( http://www.webjx.com/upfiles/20060409/20060409082237_tabbar_level1_bk.gif);
}
ul.TabBarLevel1 li{
float:left;
padding:0;
height:29px;
margin-right:1px;
background:url( http://www.webjx.com/upfiles/20060409/20060409082248_tabbar_level1_slice_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li a{
display:block;
line-height:29px;
padding:0 20px;
color:#333;
background:url( http://www.webjx.com/upfiles/20060409/20060409082257_tabbar_level1_slice_right_bk.gif) right top no-repeat;
white-space: nowrap;
}
ul.TabBarLevel1 li.Selected{
background:url( http://www.webjx.com/upfiles/20060409/20060409082312_tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li.Selected a{
background:url( http://www.webjx.com/upfiles/20060409/20060409082323_tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;
}ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{
color:#333;
}
ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{
color:#F30;
text-decoration:none;
}
ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{
color:#000;
}
ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{
color:#F30;
text-decoration:none;
}
div.HackBox {
padding : 2px 2px ;
border-left: 2px solid #6697CD;
border-right: 2px solid #6697CD;
border-bottom: 2px solid #6697CD;
display:none;
}</style> <div id="Whatever">
<ul class="TabBarLevel1" id="TabPage1">
<li id="Tab1"><a href=" http://www.webjx.com/htmldata/2006-04-09/1144542386.html#" onclick="javascript:switchTab('TabPage1','Tab1');">寶貝詳情</a></li>
<li id="Tab2" class="Selected"><a href=" http://www.webjx.com/htmldata/2006-04-09/1144542386.html#" onclick="javascript:switchTab('TabPage1','Tab2');">其他信息</a></li>
<li id="Tab3"><a href=" http://www.webjx.com/htmldata/2006-04-09/1144542386.html#" onclick="javascript:switchTab('TabPage1','Tab3');">出價記錄</a></li>
<li id="Tab4"><a href=" http://www.webjx.com/htmldata/2006-04-09/1144542386.html#" onclick="javascript:switchTab('TabPage1','Tab4');">留言簿</a></li>
</ul>
<div id="cnt">
<div id="dTab1" class="HackBox">代碼如下：
<!--這里放入信息-->
哈哈哈哈1
</div>
<div id="dTab2" class="HackBox" style="display:block">代碼如下：
<!--這里放入信息-->
哈哈哈哈2
</div>
<div id="dTab3" class="HackBox">代碼如下：
<!--這里放入信息-->
哈哈哈哈3
</div>
<div id="dTab4" class="HackBox">代碼如下：
<!--這里放入信息-->
哈哈哈哈4
</div>
</div>
</div>
<script language="JavaScript">
//Switch Tab Effect
function switchTab(tabpage,tabid){
var oItem = document.getElementById(tabpage);
for(var i=0;i<oItem.children.length;i++){
var x = oItem.children(i);
x.className = "";
var y = x.getElementsByTagName('a');
y[0].style.color="#333333";
}
document.getElementById(tabid).className = "Selected";
var dvs=document.getElementById("cnt").getElementsByTagName("div");
for (var i=0;i<dvs.length;i++){
if (dvs[i].id==('d'+tabid))
dvs[i].style.display='block';
else
dvs[i].style.display='none';
}
}</script>