CSS3导航菜单，容易扩展

2024-07-21 网页编程网 网页编程网

1.序

导航菜单，支持动态生成与扩展。

2.代码实现

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<style>
ul,li,a{margin:0;padding:0;}
:root{
--color:cyan;
--color2:white;
--fontcolor:purple;
}
a{
color:var(--fontcolor);
text-decoration:none;
}
a:visited{
color:var(--fontcolor);
}
.menu{
height:40px;
line-height:40px;
}
.menu li{
display:inline-block;
font-size:15pt;
background:gray;
width:100px;
}

/*------*/
.menu li{}
.menu li > ul{position: absolute;display:none;font-size:10pt;}
.menu li > ul li{display:block;}

/*---menu button--*/
.menuButton{
display:none;
position:absolute;
top:15px;
right:10px;
}
.icon{
font-size:25pt;
margin-right:5px;
}

/*--menuMobile-*/
.menuMobile{
display:block;
/*position:absolute;
top:68px;
left:0px;
*/
width:100%;
height:auto;
line-height:35px;
background:var(--color);
}

.menuMobile ul li{
padding-left:5px;
height:30px;
line-height:30px;
width:100%;
border-bottom:solid white 1px;
background:var(--color2);
}

/* 手机屏 当页面宽度小于750px*/
@media only screen and (max-width:750px){
.menu{display:none;}
.menuButton{
display:block;
}
.menuMobile li > ul{
display:none;
}

}//@media
/* pc端 适配 当页面宽度大于750px 小于1900px*/
@media screen and (min-width:750px) and (max-width:1900px){

}
</style>
</head>
<ul class="menu">
<li><a href='index.html'>首    页</a></li>
<li><a href='achievement.html'>最新成果</a></li>
<li><a href='news.html'>最新资讯</a></li>
<li onMouseOver="mShow(this,1)" onmouseout="mShow(this,0)"><a href='#'>技术支持</a><ul><li><a href="technology-ai.html">人工智能</a></li><li><a href="technology-im.html">信息管理</a></li><li><a href="technology-dt.html">数据传输</a></li></ul></li>
<li><a href='case.html'>客户列表</a></li>
<li onMouseOver="mShow(this,1)" onmouseout="mShow(this,0)"><a href='#'>关    于</a><ul><li><a href="about.html">网站简介</a></li><li><a href="belief.html">技术文化</a></li></ul></li>
</ul>
<div class="menuButton"><a href="javascript:void(0);" class="icon" onClick="menu()">?</a></div>
<script>
function menu(){
var x =document.querySelector('ul')
if(x.className === "menu") {
 x.className = "menuMobile"
}else{
x.className = "menu"
}//if
}//menu

function mShow(obj,s){
var subMenu=obj.getElementsByTagName("ul")[0]
subMenu.style.display=s?'block':'none'
}
</script>
</body>
</html>

阅读原文

阅读 417

123 显示电脑版