您的位置：首页 > Web前端 > HTML

HTML菜单（导航）优化

2018-03-07 13:46 127 查看
        到现在为止，一直在前端开发学习的最基础上，比如什么优化，什么美化之类。室友反而学的比我快。原因就是，我主要把时间放在基础知识的熟练掌握之上了，现在的CSS运用可以说是比较娴熟了。之后再进行更深一步的学习可能会更加轻松。

下面是我花一些时间写出的菜单优化，贴出源代码和效果，大家共同学习。
下面是最基础的导航效果：
先看下效果吧



鼠标移动到上面时是下面这种效果：



这是最基础的菜单。
源代码如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;
padding:0;
overflow:hidden;
display:table;
height:auto;
margin:0 auto;
}
a:link,a:visited{
color:#ffffff;
text-transform: uppercase;
background-color: #bebebe;
font-weight:bold;
display: block;
width:120px;
padding: 9px;
text-align: center;
text-decoration: none;
}
a:hover,a:active{
color:#ffffff;
text-transform: uppercase;
background-color:red;
font-weight:bold;
display: block;
width:120px;
padding: 9px;
text-align: center;
text-decoration: none;
}
li{
float:left;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">home</a></li>
<li><a href="#news">news</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#about">about</a></li>
</ul>

</body>
</html>下面是在上面基础上添加了二级菜单：




下面贴出源代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;
padding:0;
overflow:hidden;
display:table;
height:auto;
margin:0 auto;
}
ul li{
float: left;
}
a{
color: #fff;
width: 120px;
padding: 10px;
background: #bebebe;
text-decoration: none;
text-align: center;
font-weight: bold;
display: block;
}
a:hover{
background: red;
}
ul li ul{
display: none;
}
ul li ul li{
float: none;
list-style: none;
margin-top: 2px;
}
ul li ul li a:hover{
background: #06f;
}
ul li:hover ul{
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">HOME</a>
<ul>
<li><a href="#home1">home1</a
4000
></li>
<li><a href="#home2">home2</a></li>
</ul>
</li>

<li><a href="#new">NEW</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#about">ABOUT</a></li>
</ul>
</body>
</html>这是用CSS实现的代码，下面贴出用js实现的代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
text-decoration: center;
list-style: none;
padding:0;
overflow:hidden;
display:table;
height:auto;
margin:0 auto;
}
ul li{
float: left;
text-decoration: center;
position: relative;
}
a{
color: #fff;
width: 120px;
padding: 10px;
background: #bebebe;
text-decoration: none;
text-align: center;
font-weight: bold;
display: block;
}
a:hover{
background: red;
}
ul li ul{
display: none;
}
ul li ul li{
float: none;
list-style: none;
margin-top: 2px;
}
ul li ul li a:hover{
background: #06f;
}
</style>
<script type="text/javascript">
function show (li) {
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hide (li) {
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}
</script>
</head>
<body>
<ul>
<li onmousemove="show(this)" onmouseout="hide(this)"><a href="#home">HOME</a>
<ul>
<li><a href="#home1">home1</a></li>
<li><a href="#home2">home2</a></li>
</ul>
</li>
<li><a href="#new">NEW</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#about">ABOUT</a></li>
</ul>
</body>
</html>三级菜单：
三级菜单是在二级的基础上进行的，而掌握了三级菜单后，再写更高级菜单应该就比较容易了，下面给一个效果图：





这里我偷个懒，没有写a：hover的效果，这个不重要，三级菜单实现才重要：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
font-size: 14px;
font-weight: bold;
list-style: none;
padding: 0;
margin: 0 auto;
display: table;
}
ul li{
float: left;
}
ul li a{
line-height: 20px;
display: block;
color: #000;
text-align: center;
width: 80px;
padding: 10px;
background: #bebebe;
text-decoration: none;
}
ul li ul{
display: none;
list-style: none;
padding: 0;
position: relative;
}
ul li:hover ul{
display: block;
width: 100px;
}
ul li:hover ul li ul{
display: none;
}
ul li ul li:hover ul{
display: block;
top: 0;
left: 100px;
position: absolute
}

</style>
</head>
<body>
<ul>
<li><a href="#home">HOME+</a>
<ul>
<li><a href="#home1">home1+</a>
<ul>
<li><a href="#home1.1">home1.1</a></li>
</ul>
</li>
<li><a href="#home2">home2</a></li>
</ul>
</li>

<li><a href="#new">NEW</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#about">ABOUT</a></li>
</ul>
</body>
</html>中英文转换菜单：




嗯。。效果就是这样的，当鼠标移上去的时候，中文变成了英文。
下面看一下怎么实习的吧：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
text-align: center;
font-size: 14px;
font-weight: bold;
list-style: none;
border-bottom: 8px solid #DC4E1B;
overflow: auto;
}
ul li{
float: left;
}
ul li a{
line-height: 20px;
display: block;
color: #000;
text-align: center;
width: 80px;
padding: 10px;
background: #bebebe;
text-decoration: none;
}
span{
display: none;
padding-top: 20px;
}
ul li a:hover span{
display: block;
}
ul li a:hover{
margin-top: -40px;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">首页<span>HOME</span></a></li>
<li><a href="#new">消息<span>NEW</span></a></li>
<li><a href="#about">关于我们<span>ABOUT</span></a></li>
<li><a href="#more">更多<span>MORE</span></a></li>
</ul>
</body>
</html>这就是我这些天自学的几种优化方法。自我感觉还算良好。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航