css 动态导航栏

最新推荐文章于 2025-06-08 09:15:07 发布

原创最新推荐文章于 2025-06-08 09:15:07 发布 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #标签 #导航 #square

css 专栏收录该内容

1 篇文章

订阅专栏

css 动态导航栏

上一周遇到几个小问题，其中一个是关于动态导航栏的问题，在这里写出来。

动态导航栏的效果是，默认显示第一个li标签的下划线效果，然后点击其它li标签只显示当前自己li标签的下划线效果，看起来是很简单的一个问题，里面还是包含了不少细节。

- 首先ul标签的子标签 li 的显示效果有如下几种

none不使用项目符号  
disc实心圆，默认值  
circle空心圆  
square实心方块  
decimal阿拉伯数字  
lower-roman小写罗马数字  
upper-roman大写罗马数字  
lower-alpha小写英文字母  
upper-alpha大写英文字母  
去掉li标签的默认小圆点，将ul标签的list-style-type属性设置为none

- 如何实现超出的li标签数组滑动效果?

这里可以用flex布局解决这个问题，重点是设置overflow-x:auto;flex-shrink:0;将x方向的溢出设置为自动，将缩小比例设置为 0，即是不缩小。具体如下
设置li标签的父标签ul 的布局为 flex 并设置 flex的overflow-x:auto;
但是这样是不能实现滑动效果的，为什么？原因是当前设置了width：100%；如果当前li标签数组太长(大于界面显示宽度)，li标签的长度(宽度会被自动缩小)，所以，这里我们设置li标签的 flex-shrink属性(缩小)大小为0，表示当li标签内容太长(太高)时不缩小，对应的还有flex-grow:0;以上就实现了滑动效果。

- 隐藏滑动条

在做完上面的步骤之后，我发现在滑动标题的时候有一个横向的滚动条，一般处理这个的思路是在当前滑动的标签(ul)的外面加上一个div 并设置其高度小于ul标签的高度，遮掉滑动条。
- 动态设置样式
最后就是实现标题点击样式切换了，我一直没找到css能做到这种效果的，所以还是只能有用js。
- 第一件事将当前li数组设置为初始未点击时的样式，
- 第二件是给自己设置点击样式。

代码如下：
图片请自己重新设置

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no"/>

    <title>title_slide</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    .ul_title {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        height: 50px;
        width: auto;
        overflow: auto;
        /*去掉li标签的小黑点 */
        list-style-type: none;
        padding: 0 15px;

    }

    .ul_title li {
        height: 20px;
        width: auto;
        margin-right: 10px;
        font-size: 0.8125rem;
        color: #6b6c71;
        -webkit-flex-grow: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
    }

    .li_title_red {
        /*显示效果*/
        border-bottom: 2px solid red;
    }
    .li_title_white{
        border-bottom: 2px solid white;
        opacity: 1;
    }
    /*.ul_title >:first-child{border-bottom: 2px solid red;}*/
    /*.li_title:active {*/
    /*border-bottom: 2px solid red;*/
    /*}*/
    /*.li_title:focus{border-bottom: 2px solid green;}*/
    ._delete_ul_scroll {
        /* 去掉ul标签的滑动条*/
        overflow-x: scroll;
        overflow-y: hidden;
        height: 50px;
    }
</style>
<body>
<div class="_delete_ul_scroll">
    <ul class="ul_title" id="ul_title">
        <li onclick="my_display(this)">标题一</li>
        <li onclick="my_display(this)">标题二</li>
        <li onclick="my_display(this)">标题三</li>
        <li onclick="my_display(this)">标题四</li>
        <li onclick="my_display(this)">标题五</li>
        <li onclick="my_display(this)">标题六</li>
        <li onclick="my_display(this)">标题七</li>
        <li onclick="my_display(this)">标题八</li>
        <li onclick="my_display(this)">标题九</li>
    </ul>
</div>
<div style="background-color: #00d449;width:100%;height: 800px;">

</div>
</body>
<script type="text/javascript">
    var arrs = document.getElementById("ul_title").getElementsByTagName("li");
    function my_display(event) {
        for(var i=0;i<arrs.length;i++){
            arrs[i].setAttribute("class","li_title_white");
        }
        event.setAttribute("class","li_title_red");
    }
    //默认刷新时 首页显示为点击状态
    arrs[0].setAttribute("class","li_title_red");
</script>
</html>