一、HTML和CSS基础--网页布局--实践--导航条菜单的制作

案例一：导航菜单的制作

垂直菜单

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size:14px;
    }
    ul{
        list-style:none;
        width:100px;
    }
    a{
        text-decoration:none;
        display:block;
        height:30px;
        line-height:30px;
        width:100px;
        background-color:#ccc;
        margin-bottom: 3px;
        text-align:center;
    }
    a:hover{
        color:red;
        font-weight:bold;
        background-color:orange;
    }
    </style>
</head>

<body>
    <ul>
        <li><a href="#">首   页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>

关键点：导航菜单使用无序列表更符合语义化要求，而a标签需要设置为块级元素，才可以对其设置宽高背景等样式。

水平菜单

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size:14px;
    }
    ul{
        list-style:none;
    }
    li{
        float:left;
    }
    a{
        text-decoration:none;
        display:block;
        height:30px;
        line-height:30px;
        width:100px;
        background-color:#ccc;
        text-align:center;
        margin-right:3px;
    }
    a:hover{
        color:red;
        font-weight:bold;
        background-color:orange;
    }
    </style>
</head>

<body>
    <ul>
        <li><a href="#">首   页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>

圆角菜单

圆角背景图片：

方法一：使用背景图片设置菜单栏圆角效果

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size:14px;
    }
    ul{
        list-style:none;
        border-bottom:10px solid #F60;
        height:26px;
        padding:30px 0 0 100px;
    }
    li{
        float:left;
    }
    a{
        text-decoration:none;
        display:block;
        height:26px;
        line-height:30px;
        width:120px;
        text-align:center;
        margin-right:3px;
        color:#000;
        background: url(http://images2015.cnblogs.com/blog/894688/201603/894688-20160321110635870-49750745.png) no-repeat;
    }
    .on,a:hover{
        color:#fff;
        font-weight:bold;
        background-position:0 -30px;
    }
    </style>
</head>

<body>
    <ul>
        <li><a class="on" href="#">首   页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>

方法二：使用CSS3设置圆角

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size:14px;
    }
    ul{
        list-style:none;
        border-bottom:10px solid #F60;
        height:26px;
        padding:30px 0 0 100px;
    }
    li{
        float:left;
    }
    a{
        text-decoration:none;
        display:block;
        height:26px;
        line-height:30px;
        width:120px;
        text-align:center;
        margin-right:3px;
        color:#000;
        background-color:#ccc;
        border-radius:10px 10px 0 0;
    }
    .on,a:hover{
        color:#fff;
        font-weight:bold;
        background-color:#F60;
        border-radius:10px 10px 0 0;
        -moz-border-radius: 10px 10px 0 0;
        -webkit-border-radius: 10px 10px 0 0;
    }
    </style>
</head>

<body>
    <ul>
        <li><a class="on" href="#">首   页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>

改变高度的伸缩菜单

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size:14px;
    }
    ul{
        list-style:none;
        border-bottom:10px solid #F60;
        height:26px;
        padding:30px 0 0 100px;
    }
    li{
        float:left;
    }
    a{
        text-decoration:none;
        display:block;
        height:26px;
        line-height:30px;
        width:120px;
        text-align:center;
        margin-right:3px;
        color:#000;
        background-color:#ccc;
    }
    .on,a:hover{
        color:#fff;
        font-weight:bold;
        background-color:#F60;
        height:30px;
        margin-top:-4px;
    }
    </style>
</head>

<body>
    <ul>
        <li><a class="on" href="#">首   页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>

水平方向伸缩菜单

方法一：使用JS实现效果：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size:14px;
    }
    ul{
        list-style:none;
        border-bottom:10px solid #F60;
        height:26px;
        padding:30px 0 0 100px;
    }
    li{
        float:left;
    }
    a{
        text-decoration:none;
        display:block;
        height:26px;
        line-height:30px;
        width:100px;
        text-align:center;
        margin-right:3px;
        color:#000;
        background-color:#ccc;
    }
    .on,a:hover{
        color:#fff;
        font-weight:bold;
        background-color:#F60;
        height:30px;
        margin-top:-4px;
    }
    </style>
    <script type="text/javascript">
    window.onload=function(){
        var aA=document.getElementsByTagName('a');
        for(var i=0;i<aA.length;i++){
            aA[i].onmouseover=function(){
                var This=this;
                clearInterval(This.time);
                This.time=setInterval(function(){
                    This.style.width=This.offsetWidth+8+"px";
                    if(This.offsetWidth>120){
                        clearInterval(This.time);
                    }
                },30)
            }
            aA[i].onmouseout=function(){
                var This=this;
                clearInterval(This.time);
                This.time=setInterval(function(){
                    This.style.width=This.offsetWidth-8+"px";
                    if(This.offsetWidth<100){
                        This.style.width="100px";
                        clearInterval(This.time);
                    }
                },30)
            }
        }
    }
    </script>
</head>

<body>
    <ul>
        <li><a class="on" href="#">首   页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>

方法二：使用jQuery实现效果

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size:14px;
    }
    ul{
        list-style:none;
        border-bottom:10px solid #F60;
        height:26px;
        padding:30px 0 0 100px;
    }
    li{
        float:left;
    }
    a{
        text-decoration:none;
        display:block;
        height:26px;
        line-height:30px;
        width:100px;
        text-align:center;
        margin-right:3px;
        color:#000;
        background-color:#ccc;
    }
    .on,a:hover{
        color:#fff;
        font-weight:bold;
        background-color:#F60;
        height:30px;
        margin-top:-4px;
    }
    </style>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('a').hover(
                function(){
                    $(this).stop().animate({"width":"120px"},100);
                },
                function(){
                    $(this).stop().animate({"width":"100px"},100);
                }
            )
        })
    </script>
</head>

<body>
    <ul>
        <li><a class="on" href="#">首   页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>

动画二级下拉菜单

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>动画菜单</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size: 14px;
    }
    
    a {
        color: #333;
        text-decoration: none;
    }
    
    ul {
        list-style: none;
    }
    
    .nav {
        height: 30px;
        border-bottom: 5px solid #F60;
        margin-left: 50px;
        width: 600px;
    }
    
    .nav li {
        float: left;
        position: relative;
        height: 30px;
        width: 120px;
    }
    
    .nav li a {
        display: block;
        height: 30px;
        text-align: center;
        line-height: 30px;
        width: 120px;
        background: #efefef;
        margin-left: 1px;
    }
    
    .subNav {
        position: absolute;
        top: 30px;
        left: 0;
        width: 120px;
        height: 0;
        overflow: hidden;
    }
    
    .subNav li a {
        background: #ddd;
    }
    
    .subNav li a:hover {
        background: #efefef;
    }
    </style>
    <script>
    window.onload = function() {
        var aLi = document.getElementsByTagName('li');
        for (var i = 0; i < aLi.length; i++) {
            //鼠标经过一级菜单，二级菜单动画下拉显示出来
            aLi[i].onmouseover = function() {

                    var oSubNav = this.getElementsByTagName('ul')[0];
                    if (oSubNav) {
                        var This = oSubNav;
                        clearInterval(This.time);
                        This.time = setInterval(function() {
                            This.style.height = This.offsetHeight + 16 + "px";
                            if (This.offsetHeight >= 120) {
                                clearInterval(This.time)
                            }
                        }, 30)
                    }
                }
            //鼠标离开菜单，二级菜单动画收缩起来。
            aLi[i].onmouseout = function() {

                    var oSubNav = this.getElementsByTagName('ul')[0];
                    if (oSubNav) {
                        var This = oSubNav;
                        clearInterval(This.time);
                        This.time = setInterval(function() {
                            This.style.height = This.offsetHeight - 16 + "px";
                            if (This.offsetHeight = 0) {
                                clearInterval(This.time)
                            }
                        }, 30)
                    }
                }
        }
    }
    </script>
</head>

<body>
    <ul class="nav">
        <li><a href="#">一级菜单</a>
            <ul class="subNav">
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单</a>
            <ul class="subNav">
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单</a></li>
        <li><a href="#">一级菜单</a></li>
        <li><a href="#">一级菜单</a></li>
    </ul>
</body>

posted @ 2015-10-06 11:08 姜腾腾阅读(1330) 评论(0) 编辑收藏举报

刷新页面返回顶部