HTML5+CSS3小实例:全屏导航栏菜单

HTML5+CSS3小实例:全屏导航栏菜单,第1张

HTML5+CSS3实现全屏导航栏菜单,悬停在右上角的小图标,点击以圆形扩散的方式绽开全屏导航栏,这种方式的导航栏很吸睛,运用也越来越广,赶紧学起来呀!

效果

源码:

给你一个JQ的三级联动:

<!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="">请选择区域</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" : ["越秀区","荔湾区","海珠区","天河区,白云区"]

},

{

"name" : "深圳市" ,

"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]

}

]

},

{"name" : "浙江省" ,

"city" : [

{

"name" : "杭州市" ,

"area" : ["上城区","下城区","江干区","西湖区"]

},

{

"name" : "丽水" ,

"area" : ["莲都区","松阳县","遂昌县","云和县"]

}

]

},

{"name" : "江西省" ,

"city" : [

{

"name" : "南昌市" ,

"area" : ["东湖区","西湖区","青云谱区","湾里区"]

},

{

"name" : "九江市" ,

"area" : ["浔阳区","庐山区","瑞昌市","九江县"]

},

{

"name" : "赣州市" ,

"area" : ["章贡区","南康区","上犹县","赣县"]

}

]

},

]

// 二级联动

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

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

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

var three = $("#three")

three.empty().append("<option>请选择区域</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>")

}

}

})

// 一级联动

$("#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>请选择区域</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>

【方法步骤】:

写好HTML代码以实现下拉菜单。

在网页上看到初步效果。

添加JavaScript代码实现功能,hide()函数实现display的隐藏。

在HTML代码中引用show()和hide()函数。

CTR+S保存代码,在浏览器中F5刷新网页查看效果。

【其他方法】:

利用Html5+css实现的下拉菜单炫酷效果。<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

margin: 0

padding: 0

}

#nav{

background-color: #EEEEEE

height: 40px

<!DOCTYPE html>。

使用JavaScript实现下拉菜单的效果。<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

通过JQuery方法实现的下拉菜单的炫酷效果。<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

【注意事项】:记得CTR+S常记得保存的备份,F5刷新网页。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6243895.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存