级联菜单全国省市县三级导航_省市区级联菜单资源-CSDN文库

共1个文件

htm：1个

需积分: 10 46 浏览量 2009-10-09 15:27:42 上传评论收藏 13KB RAR 举报

级联菜单，也称为下拉菜单或嵌套菜单，是一种常见的用户界面元素，广泛应用于网页设计、软件开发以及各种应用程序中。它允许用户通过多级选择来导航复杂的数据结构，如在本例中用于全国省市县三级导航。这种菜单设计能够节省屏幕空间，提高用户体验，尤其是在需要展示大量分类信息时。全国省市县三级导航是指在中国地理行政结构中的省、市、县三个层级之间建立的导航链接。中国有34个省级行政区（包括23个省、5个自治区、4个直辖市、2个特别行政区），每个省下面又有多个地级市，地级市下又包含若干个县级行政单位（县、市辖区、自治县、旗等）。在级联菜单中，用户首先选择省份，接着展开对应的市级菜单，最后再选择具体的县级区域，从而实现快速定位。构建这样的级联菜单通常涉及以下技术点： 1. **HTML 结构**：HTML 是网页的基础，级联菜单的框架由`<ul>`和`<li>`元素构建。`<li>`元素中的子级菜单可以使用`<ul>`嵌套实现，通过CSS控制显示和隐藏。 2. **CSS 样式**：CSS 用于定义级联菜单的外观，包括颜色、字体、位置、过渡效果等。级联菜单的展开和收起可以通过改变`display`属性实现。例如，初始状态设置为`display:none`，点击父级菜单项时，通过JavaScript改变为`display:block`。 3. **JavaScript 动态交互**：为了实现菜单的动态交互，通常会用到JavaScript或jQuery库。当用户点击某个菜单项时，JavaScript负责监听事件，控制子菜单的显示和隐藏，同时可能还需要处理鼠标悬停和离开的效果。 4. **数据结构**：为了存储和处理全国省市县的数据，可以使用数组或对象。数组中的每个元素代表一个级别，包含该级别的所有项，项内包含下一级别的引用或数据。 5. **Ajax 技术**：对于大型数据集，为了优化加载速度，可以采用Ajax异步加载，只在需要时请求并渲染对应级别的数据。 6. **响应式设计**：为了适应不同设备的屏幕大小，级联菜单需要进行响应式设计，确保在手机、平板电脑等移动端也能良好工作。 7. **无障碍访问**：考虑到残障人士的使用，级联菜单应遵循无障碍网页设计原则，如添加`aria`属性和键盘导航支持。通过上述技术，我们可以创建出一个功能完备且易用的全国省市县三级导航级联菜单。在实际应用中，还可以结合后台数据库动态获取数据，提供更灵活的扩展性和维护性。

资源推荐

资源详情

资源评论

收起资源包目录

.rar （1个子文件）

全国省市县三级导航.htm 35KB

<html><head><title>全国省市县三级导航</title> <style> body,select{font-size:9pt;font-family:Verdana;} a{color:red;text-decoration:none;} a:hover{text-decoration:underline;} </style> <SCRIPT LANGUAGE="JavaScript"> function Dsy(){ this.Items={};} Dsy.prototype.add=function(id,iArray){ this.Items[id]=iArray;} Dsy.prototype.Exists=function(id){ if(typeof(this.Items[id])=="undefined"){ return false;} return true;} function change(v){ var str="0"; for(i=0;i<v;i++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1));}; var ss=document.getElementById(s[v]); with(ss){ length=0; options[0]=new Option(opt0[v],opt0[v]); if(v&&document.getElementById(s[v-1]).selectedIndex>0||!v){ if(dsy.Exists(str)){ ar=dsy.Items[str]; for(i=0;i<ar.length;i++){ options[length]=new Option(ar[i],ar[i]);} if(v){ options[1].selected=true;}}} if(++v<s.length){ change(v);}}} var dsy=new Dsy(); dsy.add("0",["安徽","北京","福建","甘肃","广东","广西","贵州","海南","河北","河南","黑龙江","湖北","湖南","吉林","江苏","江西","辽宁","内蒙古","宁夏","青海","山东","山西","陕西","上海","四川","天津","西藏","新疆","云南","浙江","重庆"]); dsy.add("0_0",["安庆","蚌埠","巢湖","池州","滁州","阜阳","合肥","淮北","淮南","黄山","六安","马鞍山","宿州","铜陵","芜湖","宣城","亳州"]); dsy.add("0_0_0",["安庆市","怀宁县","潜山县","宿松县","太湖县","桐城市","望江县","岳西县","枞阳县"]); dsy.add("0_0_1",["蚌埠市","固镇县","怀远县","五河县"]); dsy.add("0_0_2",["巢湖市","含山县","和县","庐江县","无为县"]); dsy.add("0_0_3",["池州市","东至县","青阳县","石台县"]); dsy.add("0_0_4",["滁州市","定远县","凤阳县","来安县","明光市","全椒县","天长市"]); dsy.add("0_0_5",["阜南县","阜阳市","界首市","临泉县","太和县","颖上县"]); dsy.add("0_0_6",["长丰县","肥东县","肥西县"]); dsy.add("0_0_7",["淮北市","濉溪县"]); dsy.add("0_0_8",["凤台县","淮南市"]); dsy.add("0_0_9",["黄山市","祁门县","休宁县","歙县","黟县"]); dsy.add("0_0_10",["霍邱县","霍山县","金寨县","六安市","寿县","舒城县"]); dsy.add("0_0_11",["当涂县","马鞍山市"]); dsy.add("0_0_12",["灵璧县","宿州市","萧县","泗县","砀山县"]); dsy.add("0_0_13",["铜陵市","铜陵县"]); dsy.add("0_0_14",["繁昌县","南陵县","芜湖市","芜湖县"]); dsy.add("0_0_15",["广德县","绩溪县","郎溪县","宁国市","宣城市","泾县","旌德县"]); dsy.add("0_0_16",["利辛县","蒙城县","涡阳县","亳州市"]); dsy.add("0_1",["北京"]); dsy.add("0_1_0",["北京市","密云县","延庆县"]); dsy.add("0_2",["福州","龙岩","南平","宁德","莆田","泉州","三明","厦门","漳州"]); dsy.add("0_2_0",["长乐市","福清市","福州市","连江县","罗源县","闽侯县","闽清县","平潭县","永泰县"]); dsy.add("0_2_1",["长汀县","连城县","龙岩市","上杭县","武平县","永定县","漳平市"]); dsy.add("0_2_2",["光泽县","建阳市","建瓯市","南平市","浦城县","邵武市","顺昌县","松溪县","武夷山市","政和县"]); dsy.add("0_2_3",["福安市","福鼎市","古田县","宁德市","屏南县","寿宁县","霞浦县","周宁县","柘荣县"]); dsy.add("0_2_4",["莆田市","仙游县"]); dsy.add("0_2_5",["安溪县","德化县","惠安县","金门县","晋江市","南安市","泉州市","石狮市","永春县"]); dsy.add("0_2_6",["大田县","建宁县","将乐县","明溪县","宁化县","清流县","三明市","沙县","泰宁县","永安市","尤溪县"]); dsy.add("0_2_7",["厦门市"]); dsy.add("0_2_8",["长泰县","东山县","华安县","龙海市","南靖县","平和县","云霄县","漳浦县","漳州市","诏安县"]); dsy.add("0_3",["白银","定西","甘南藏族自治州","嘉峪关","金昌","酒泉","兰州","临夏回族自治州","陇南","平凉","庆阳","天水","武威","张掖"]); dsy.add("0_3_0",["白银市","会宁县","景泰县","靖远县"]); dsy.add("0_3_1",["定西县","临洮县","陇西县","通渭县","渭源县","漳县","岷县"]); dsy.add("0_3_2",["迭部县","合作市","临潭县","碌曲县","玛曲县","夏河县","舟曲县","卓尼县"]); dsy.add("0_3_3",["嘉峪关市"]); dsy.add("0_3_4",["金昌市","永昌县"]); dsy.add("0_3_5",["阿克塞哈萨克族自治县","安西县","敦煌市","金塔县","酒泉市","肃北蒙古族自治县","玉门市"]); dsy.add("0_3_6",["皋兰县","兰州市","永登县","榆中县"]); dsy.add("0_3_7",["东乡族自治县","广河县","和政县","积石山保安族东乡族撒拉族自治县","康乐县","临夏市","临夏县","永靖县"]); dsy.add("0_3_8",["成县","徽县","康县","礼县","两当县","文县","武都县","西和县","宕昌县"]); dsy.add("0_3_9",["崇信县","华亭县","静宁县","灵台县","平凉市","庄浪县","泾川县"]); dsy.add("0_3_10",["合水县","华池县","环县","宁县","庆城县","庆阳市","镇原县","正宁县"]); dsy.add("0_3_11",["甘谷县","秦安县","清水县","天水市","武山县","张家川回族自治县"]); dsy.add("0_3_12",["古浪县","民勤县","天祝藏族自治县","武威市"]); dsy.add("0_3_13",["高台县","临泽县","民乐县","山丹县","肃南裕固族自治县","张掖市"]); dsy.add("0_4",["潮州","东莞","佛山","广州","河源","惠州","江门","揭阳","茂名","梅州","清远","汕头","汕尾","韶关","深圳","阳江","云浮","湛江","肇庆","中山","珠海"]); dsy.add("0_4_0",["潮安县","潮州市","饶平县"]); dsy.add("0_4_1",["东莞市"]); dsy.add("0_4_2",["佛山市"]); dsy.add("0_4_3",["从化市","广州市","增城市"]); dsy.add("0_4_4",["东源县","和平县","河源市","连平县","龙川县","紫金县"]); dsy.add("0_4_5",["博罗县","惠东县","惠阳市","惠州市","龙门县"]); dsy.add("0_4_6",["恩平市","鹤山市","江门市","开平市","台山市"]); dsy.add("0_4_7",["惠来县","揭东县","揭西县","揭阳市","普宁市"]); dsy.add("0_4_8",["电白县","高州市","化州市","茂名市","信宜市"]); dsy.add("0_4_9",["大埔县","丰顺县","蕉岭县","梅县","梅州市","平远县","五华县","兴宁市"]); dsy.add("0_4_10",["佛冈县","连南瑶族自治县","连山壮族瑶族自治县","连州市","清新县","清远市","阳山县","英德市"]); dsy.add("0_4_11",["潮阳市","澄海市","南澳县","汕头市"]); dsy.add("0_4_12",["海丰县","陆丰市","陆河县","汕尾市"]); dsy.add("0_4_13",["乐昌市","南雄市","曲江县","仁化县","乳源瑶族自治县","韶关市","始兴县","翁源县","新丰县"]); dsy.add("0_4_14",["深圳市"]); dsy.add("0_4_15",["阳春市","阳东县","阳江市","阳西县"]); dsy.add("0_4_16",["罗定市","新兴县","郁南县","云安县","云浮市"]); dsy.add("0_4_17",["雷州市","廉江市","遂溪县","吴川市","徐闻县","湛江市"]); dsy.add("0_4_18",["德庆县","封开县","高要市","广宁县","怀集县","四会市","肇庆市"]); dsy.add("0_4_19",["中山市"]); dsy.add("0_4_20",["珠海市"]); dsy.add("0_5",["百色","北海","崇左","防城港","桂林","贵港","河池","贺州","来宾","柳州","南宁","钦州","梧州","玉林"]); dsy.add("0_5_0",["百色市","德保县","靖西县","乐业县","凌云县","隆林各族自治县","那坡县","平果县","田东县","田林县","田阳县","西林县"]); dsy.add("0_5_1",["北海市","合浦县"]); dsy.add("0_5_2",["崇左市","大新县","扶绥县","龙州县","宁明县","凭祥市","天等县"]); dsy.add("0_5_3",["东兴市","防城港市","上思县"]); dsy.add("0_5_4",["恭城瑶族自治县","灌阳县","桂林市","荔浦县","临桂县","灵川县","龙胜各族自治县","平乐县","全州县","兴安县","阳朔县","永福县","资源县"]); dsy.add("0_5_5",["桂平市","贵港市","平南县"]); dsy.add("0_5_6",["巴马瑶族自治县","大化瑶族自治县","东兰县","都安瑶族自治县","凤山县","河池市","环江毛南族自治县","罗城仡佬族自治县","南丹县","天峨县","宜州市"]); dsy.add("0_5_7",["富川瑶族自治县","贺州市","昭平县","钟山县"]); dsy.add("0_5_8",["合山市","金秀瑶族自治县","来宾市","武宣县","象州县","忻城县"]); dsy.add("0_5_9",["柳城县","柳江县","柳州市","鹿寨县","融安县","融水苗族自治县","三江侗族自治县"]); dsy.add("0_5_10",["宾阳县","横县","隆安县","马山县","南宁市","上林县","武鸣县","邕宁县"]); dsy.add("0_5_11",["灵山县","浦北县","钦州市"]); dsy.add("0_5_12",["苍梧县","蒙山县","藤县","梧州市","岑溪市"]); dsy.add("0_5_13",["北流市","博白县","陆川县","容县","兴业县","玉林市"]); dsy.add("0_6",["安顺","毕节","贵阳","六盘水","黔东南苗族侗族自治州","黔南布依族苗族自治州","黔西南布依族苗族自治州","铜仁","遵义"]); dsy.add("0_6_0",["安顺市","关岭布依族苗族自治县","平坝县","普定县","镇宁布依族苗族自治县","紫云苗族布依族自治县"]); dsy.add("0_6_1",["毕节市","大方县","赫章县","金沙县","纳雍县","黔西县","威宁彝族回族苗族自治县","织金县"]); dsy.add("0_6_2",["贵阳市","开阳县","清镇市","息烽县","修文县"]); dsy.add("0_6_3",["六盘水市","六枝特区","盘县","水城县"]); dsy.add("0_6_4",["从江县","丹寨县","黄平县","剑河县","锦屏县","凯里市","雷山县","黎平县","麻江县","三穗县","施秉县","台江县","天柱县","镇远县","岑�

评论收藏

内容反馈