导航条

花江夏树

于 2017-09-23 11:15:15 发布

阅读量176

点赞数

本文链接：https://blog.csdn.net/onepunchmen00/article/details/78069622

版权

添加：display:inline-block; 也是可以制作水平导航栏的，原理是将块元素变成内联元素。

普通的横向纵向菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0; padding: 0;font-size: 14px;
    }

    ul{
        list-style: none;/*去掉之前ul设置的宽度 浮动就显示了*/
    }
    li{float: left}
    a{
        height: 30px;line-height: 30px;width: 100px; background-color: #cccccc;
        margin-bottom: 1px;
        text-decoration: none;
        display: block;
        text-align: center;
    }
    a:hover{
        background: #f60; color: #fff;
    }
</style>
<body>
<ul>
    <li><a href="">首&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp页</a></li>
    <li><a href="">新闻快讯</a></li>
    <li><a href="">产品展示</a></li>
    <li><a href="">售后服务</a></li>
    <li><a href="">联系我们</a></li>
</ul>
</body>
</html>

圆角菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0; padding: 0;font-size: 14px;
    }

    ul{
        list-style: none;/*去掉之前ul设置的宽度 浮动就显示了*/
        height: 50px;/*控制圆角的大小*/
        border-bottom: 5px solid #ff6600;
    }
    li{float: left; margin-top: 20px;margin-left: 30px;}
    a{
        border-radius: 15px 15px 0 0;
        height: 30px;line-height: 30px;width: 120px; background-color: #cccccc;
        margin-bottom: 1px;
        text-decoration: none;
        display: block;
        text-align: center;

    }
    .active, a:hover{
        
        background: #f60; color: #fff;

    }
</style>
<body>
<ul>
    <li><a class="active" href="">首&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp页</a></li>
    <li><a href="">新闻快讯</a></li>
    <li><a href="">产品展示</a></li>
    <li><a href="">售后服务</a></li>
    <li><a href="">联系我们</a></li>
</ul>
</body>
</html>

伸缩菜单--改变高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0; padding: 0;font-size: 14px;
    }

    ul{
        list-style: none;/*去掉之前ul设置的宽度 浮动就显示了*/
        height: 50px;/*控制圆角的大小*/
        border-bottom: 5px solid #ff6600;
    }
    li{float: left; margin-top: 20px;margin-left: 30px;}
    a{
        border-radius: 15px 15px 0 0;
        height: 30px;line-height: 30px;width: 120px; background-color: #cccccc;
        margin-bottom: 1px;
        text-decoration: none;
        display: block;
        text-align: center;

    }
    .active, a:hover{

        background: #f60; color: #fff;height: 40px; margin-top: -10px;/*去掉后发现是下面增加了 所以采用负边距向上移动*/
       line-height: 40px;

    }
</style>
<body>
<ul>
    <li><a class="active" href="">首&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp页</a></li>
    <li><a href="">新闻快讯</a></li>
    <li><a href="">产品展示</a></li>
    <li><a href="">售后服务</a></li>
    <li><a href="">联系我们</a></li>
</ul>
</body>
</html>

伸缩菜单 --水平方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0; padding: 0;font-size: 14px;
    }

    ul{
        list-style: none;/*去掉之前ul设置的宽度 浮动就显示了*/
        height: 50px;/*控制圆角的大小*/
        border-bottom: 5px solid #ff6600;
    }
    li{float: left; margin-top: 20px;margin-left: 30px;}
    a{
        border-radius: 15px 15px 0 0;
        height: 30px;line-height: 30px;width: 120px; background-color: #cccccc;
        margin-bottom: 1px;
        text-decoration: none;
        display: block;
        text-align: center;

    }
    .active, a:hover{

        background: #f60; color: #fff;height: 40px; margin-top: -10px;/*去掉后发现是下面增加了 所以采用负边距向上移动*/
       line-height: 40px;

    }
</style>
<body>
<ul>
    <li><a class="active" href="">首&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp页</a></li>
    <li><a href="">新闻快讯</a></li>
    <li><a href="">产品展示</a></li>
    <li><a href="">售后服务</a></li>
    <li><a href="">联系我们</a></li>
</ul>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js">/*待修改*/
    /*js实现*/
  /*  window.onload =function () {
        var a = document.getElementsByTagName('a');
        for(var i=0;i<a.length;i++){
            a[i].onmouseover = function () {
                clearInterval(this.time);/!*避免累加*!/
                var This = this;
                This.time = setInterval(function () {
                    This.style.width = This.offsetWidth + 8 +'px';
                    if(This.offsetWidth >= 160){
                        clearInterval(This.time);
                    }
                },30);
            } ;
            a[i].onmouseout = function () {
                clearInterval(this.time);/!*避免累加*!/
                var This = this;
                This.time = setInterval(function () {
                    This.style.width = This.offsetWidth - 8 + 'px';
                    if (This.offsetWidth <= 120) {
                        This.style.Width = '120px';
                        clearInterval(This.time);
                    }
                }, 30)
            }
        }
    }*/


  /*jquery实现*/
$(function () {
    $('a').hover(function () {
        $(this).stop().animate({'width':"160px"},200)
    },
    function () {
        $(this).stop().animate({'width':"120px"},200)/*stop清理上一个动画效果*/
    })
})
</script>
</body>
</html>

花江夏树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航条

添加：display:inline-block; 也是可以制作水平导航栏的，原理是将块元素变成内联元素。普通的横向纵向菜单html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>style> *{ margin: 0; padding: 0;font-si
复制链接

扫一扫

导航条

“相关推荐”对你有帮助么？