响应式导航栏-利用纯css实现

最新推荐文章于 2024-05-25 09:45:00 发布

r8l8q8

最新推荐文章于 2024-05-25 09:45:00 发布

阅读量1.3w

点赞数 2

分类专栏： CSS 文章标签： css 响应式导航

本文链接：https://blog.csdn.net/r8l8q8/article/details/77750935

版权

CSS 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

思路：

当屏幕为移动设备时，隐藏导航栏列表项目，显示菜单按钮。给菜单按钮（电脑时隐藏）加入hover 或者checked选择器实现，当hover或者checked的触发时动态修改导航栏列表项目display等其他样式。这样当鼠标单击菜单按钮时就可以动态修改导航栏列表的样式了。（用checked选择器需要在导航栏加一个 checkbox)
展示：

1.pc界面

（提示，我的博客还用了bootstrap样式，自己写的这个导航栏个别样式会被覆盖，导致有些偏差，又稍作了些修改），展示的代码为未修改，最初些的样式代码。）
我的博客应用后界面

2.移动设备界面

我的博客应用后界面

4.示例代码：

<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=320,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="">
    <style>
       .navbar{
           background-color: #34495E;
           height: 50px;
           display: block;
       }
       .navbar .nav-list{
           z-index: 0;
           display: block;

       }
       .navbar .nav-list li{
           list-style: none;
           float: left;
           margin-left: 30px;
       }
       .navbar .nav-list a{
           color: white;
           line-height: 50px;
           text-decoration-line: none;
       }
       .navbar .nav-list  a:hover{
           color: #1ABC9C;

       }
       .navbar input:checked~.nav-list {
           position: absolute;
           padding-bottom: 5px;
           padding-left: 5px;
           padding-right: 5px;
            display: block;
            background-color: #34495E;
            z-index: 0;
            margin-top: 50px;

       }
       .navbar input:checked~.nav-list li{
        clear: both;
        background-color: #34495E;

       }
       .navbar label{
           display: none;
       }
       .navbar .nav-toggle{
           display: none;
       }
       @media screen and (max-width: 600px) {
           .navbar .nav-toggle{
               display: none;
           }
           .navbar label{
               display: block;
               z-index: 4;
           }
           .navbar .nav-list{
               display: none;
               margin-left: 0px;
           }
           .navbar .nav-list li{
               margin-left: 0px;
           }
           .navbar  .menu-icon{
                display: block;
                float: left;
                width: 36px;
                height: 26px;
                line-height: 0;
                padding-top: 10px;
                text-align: center;

           }
           .navbar  .menu-icon>svg path{
                fill: white;
           }
           .navbar  label[for="nav-toggler"] {
                display: block;
                float: left;
                width: 36px;
                height: 36px;
                z-index: 2;
                cursor: pointer;
            }
       }
    </style>
  </head>
  <body>
    <header>

        <nav class="navbar">
            <input type="checkbox" id="nav-toggle" class="nav-toggle"/>
            <label for="nav-toggle">
                <span class="menu-icon">
                    <svg viewBox="0 0 18 15" width="18px" height="15px">
                        <path fill="white" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
                        <path fill="white" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
                        <path fill="white" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
                   </svg>
              </span>
            </label>
            <ul class="nav-list">
                <li><a href="#">菜单一</a></li>
                <li><a href="#">菜单二</a></li>
                <li><a href="#">菜单三</a></li>
            </div>
        </nav>
    </header>
  </body>
</html>

（导航栏菜单按钮为svg绘图，可以换成图片。本代码参照jekyll minima主题的导航栏实现的。）

r8l8q8

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
响应式导航栏-利用纯css实现

思路：当屏幕为移动设备时，隐藏导航栏列表项目，显示菜单按钮。给菜单按钮（电脑时隐藏）加入hover 或者checked选择器实现，当hover或者checked的触发时动态修改导航栏列表项目display等其他样式。这样当鼠标单击菜单按钮时就可以动态修改导航栏列表的样式了。（用checked选择器需要在导航栏加一个 checkbox) 展示：1.pc界面（提示，我的博客还用了bootstrap样式
复制链接

扫一扫