什么是html5純CSS的三級聯(lián)動級聯(lián)菜單

給你一個JQ的三級聯(lián)動：

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供望江網站建設、望江做網站、望江網站設計、望江網站制作等企業(yè)網站建設、網頁設計與制作、望江企業(yè)網站模板建站服務，十多年望江做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

!doctype?html

html

head

title/title

meta?charset?=?"utf-8"/

/head

style

/style

body

select?id="one"

option?value=""請選擇省份/option

/select

select?id="two"

option?value=""請選擇城市/option

/select

select?id="three"

option?value=""請選擇區(qū)域/option

/select

script?type="text/javascript"?src="js/jquery-1.12.0.js"/script

script?type="text/javascript"

/*

1.搭建框架

2.給省份和城市綁定change事件

*/

$(function(){

var?province?=?[

{"name"?:?"廣東省"?,

"city"?:?[

{

"name"?:?"廣州市"?,

"area"?:?["越秀區(qū)","荔灣區(qū)","海珠區(qū)","天河區(qū),白云區(qū)"]

},

{

"name"?:?"深圳市"?,

"area"?:?["福田區(qū)","羅湖區(qū)","南山區(qū)","寶安區(qū)","龍崗區(qū)"]

}

]

},

{"name"?:?"浙江省"?,

"city"?:?[

{

"name"?:?"杭州市"?,

"area"?:?["上城區(qū)","下城區(qū)","江干區(qū)","西湖區(qū)"]

},

{

"name"?:?"麗水"?,

"area"?:?["蓮都區(qū)","松陽縣","遂昌縣","云和縣"]

}

]

},

{"name"?:?"江西省"?,

"city"?:?[

{

"name"?:?"南昌市"?,

"area"?:?["東湖區(qū)","西湖區(qū)","青云譜區(qū)","灣里區(qū)"]

},

{

"name"?:?"九江市"?,

"area"?:?["潯陽區(qū)","廬山區(qū)","瑞昌市","九江縣"]

},

{

"name"?:?"贛州市"?,

"area"?:?["章貢區(qū)","南康區(qū)","上猶縣","贛縣"]

}

]

},

];

//?二級聯(lián)動

$("#two").change(function(){

var?one_index?=?$("#one?option:selected").index();

var?two_index?=?$("#two?option:selected").index();

var?three?=?$("#three");

three.empty().append("option請選擇區(qū)域/option");

if(two_index??0){

var?area?=?province[one_index-1].city[two_index-1].area;

for(var?i?=?0?;?i??area.length?;?i++){

three.append("option"+area[i]+"/option");

}

}

});

//?一級聯(lián)動

$("#one").change(function(){

var?one_index?=?$("#one?option:selected").index();

var?two?=?$("#two");

console.log(one_index)

two.empty().append("option請選擇城市/option");

$("#three").empty().append("option請選擇區(qū)域/option");//清除

if(one_index??0){

var?city?=?province[one_index-1].city;

console.log(province[one_index-1].city)

for(var?i?=?0?;?i??city.length?;?i++){

two.append("option"+city[i].name+"/option");

}

}

});

init();

function?init(){

for(var?i?=?0?;?i??province.length?;?i++){

$("#one").append("option"+province[i].name+"/option");

}

}

});

/script

/body

/html

CSS，滾動條的制作方式（橫向與豎向聯(lián)動），請問有盆友會嗎？灰常感謝！

很簡單的滾動樣式：

div.scroll{

scrollbar-arrow-color: #326BAB; /*三角箭頭的顏色*/

scrollbar-face-color: #CAEAFC; /*立體滾動條的顏色*/

scrollbar-3dlight-color: #98D1F5; /*立體滾動條亮邊的顏色*/

scrollbar-highlight-color: #CAEAFC; /*滾動條空白部分的顏色*/

scrollbar-shadow-color: #98D1F5; /*立體滾動條陰影的顏色*/

scrollbar-darkshadow-color: #CAEAFC; /*立體滾動條強陰影的顏色*/

scrollbar-track-color: #C9E1F9; /*立體滾動條背景顏色*/

scrollbar-base-color:#f8f8f8; /*滾動條的基本顏色*/

}

夠詳細了吧

如果你要很個性化的樣式，就用jQuery的滾動條插件吧

css兼容多中瀏覽器的橫豎向下拉菜單

這里有一個js的多級聯(lián)動下拉菜單

可以自定義位置和樣式 比較實用

里面有教程和源碼

jquery的css方法更改樣式，怎么在改變的過程中加點過渡動畫？能舉個例子嗎？謝謝！

這里主要有以下幾種方法：

一、在顯示和隱藏的時候，可以設置顯示隱藏的時間，$("#id").show("500")和$("#id").hide("500")，這樣看上去有一個過渡的效果。

二、在菜單（尤其的聯(lián)動菜單時）的下拉和收起時，使用$("#id").slideDown("500")和slideUp("500")，可以設置時間的長短。

三、一般的動畫過渡用$("#id").animate()這個方法。如樓上的animate(({

opacity

:

"0.3"

},500)。

希望可以綁到你！