博客

纯html+css实现点击弹出式导航栏菜单（采用：target和display：none）

  • Post author:
  • Post category:其他




纯html+css实现点击弹出式导航栏菜单（采用：target和display：none）




搜索了很久，发现都没有纯html+css的点击式导航栏，要么是采用：hover的划过式导航栏，要么使用Javascript实现的点击式导航栏，遂着手研究了一下。这个导航栏是点击出二级导航，鼠标移走不缩回，直到点击别的一级导航栏，而且无法创建三级或以后级导航栏，而且点击别处也不缩回。暂且到此为止，有空再进一步强化下。

一、首先是使用到的技术：

1、display：none和display：block；

2、：target；

二、原理：

1、先用display：none隐藏二级导航栏；

2、一级导航栏<a>内锚定二级导航栏id；

3、：target选择器改变二级导航栏display属性为block使二级导航栏显示出来；

三、过程：

1、先放上全部style和body

    <style>
    nav {
        margin:100px auto;
        text-align:center;
        margin-bottom: 0;
    }
    nav ul {
        list-style-type: none;
        padding:0 20px;
        display:inline-table;
        position:relative;  
        background: #999;
    }
    nav ul ul {
        display:none;
    }
    nav ul li {
        float:left; 
    }
    nav ul::after {
        content:"";
        display:block;
        clear:both;
    }
    nav ul li a {
        display:block;
        padding:25px 40px;
        color:#000;
        text-decoration:none;
        font-family:"微软雅黑";
    }

    nav ul li:hover {
        background:linear-gradient(to bottom,#4f5964,#5f6975);
    }
    nav ul li:hover a {
        color:#FFF;
    }

    #target_1:target, #target_2:target, #target_3:target, #target_4:target {
      display: block;     
  }

  nav ul ul {
    background:#5f6975;
    border-radius:0;
    position:absolute;
    top:100%;
    padding:0;
}
nav ul ul li {
    float:none;
    border-top:1px solid #6b727c;
    border-bottom:1px solid #575f6a;
}   
nav ul ul li a:hover {
    background:#4b545f;
}
</style>

<body>
    <nav>
        <ul>
          <li><a href="#target_1">导航一</a>
            <ul id="target_1">
                <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="#target_2">导航二</a>
            <ul id="target_2">
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#target_3">导航三</a>
            <ul id="target_3">
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#target_4">导航四</a>
            <ul id="target_4">
                <li><a href="#">二级导航</a></li>
            </ul> 
        </li>
    </ul>
</nav>  
</body>

2、display隐藏部分

    nav ul ul {
        display:none;
    }

3、<a>锚定部分

          <li><a href="#target_1">导航一</a>
            <ul id="target_1">

4、：target事件改变属性部分

    #target_1:target, #target_2:target, #target_3:target, #target_4:target {
      display: block;     
  }


本文为作者在互联网上多方寻找资料后尝试完成的作品，如有侵权请联系作者本人（微信：13148875484）删除，支持转载，支持不署名转载。


版权声明：本文为lurenxie原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。