文章: 阅读:

CSS Navigation 导航栏

CSSCSS

前言

  • 熟练使用导航栏，对于任何网站都非常重要。

  • 使用 CSS 可以转换成好看的导航栏而不是枯燥的 HTML 菜单。

1、导航栏

  • 作为标准的 HTML 基础一个导航栏是必须的。

  • 导航条基本上是一个链接列表，所以使用 <ul> 和 <li> 元素非常有意义。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <ul>
        <li><a href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
    </ul>

  • 效果

  • 解析：

    • list-style-type: none; - 移除列表前小标志。一个导航栏并不需要列表标记。
    • 移除浏览器的默认设置将边距和填充设置为 0。

  • 上面的例子中的代码是垂直和水平导航栏使用的标准代码。

2、垂直导航栏

  • 上面的代码，只需要添加 <a> 元素的样式，就建立了一个垂直的导航栏。

  • 背景颜色添加到链接中显示链接的区域。

  • 整个区域是可点击的链接，而不仅仅是文本。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        li a {
            display: block;
            width: 60px;
            background-color: #dddddd;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <ul>
        <li><a href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
    </ul>

  • 效果

  • 解析：

    • display: block; - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。
    • width: 60px; - 块元素默认情况下是最大宽度。指定一个 60 像素的宽度。

  • 注意：务必指定 <a> 元素在垂直导航栏的的宽度。如果省略宽度，IE6 可能产生意想不到的效果。

2.1 垂直固定导航栏

  • 创建一个左边是全屏高度的固定导航栏，右边是可滚动的内容。

  • 注意: 该实例可以在移动设备上使用。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <style>
        body {
            margin: 0;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 25%;
            background-color: #f1f1f1;
            position: fixed;
            height: 100%;
            overflow: auto;
        }

        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        li a.active {
            background-color: #4CAF50;
            color: white;
        }

        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }

        div.content {
            margin-left: 25%;
            padding: 1px 16px;
            height: 1000px;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <body>
        <ul>
            <li><a class="active" href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>

        <div class="content">
            <h2>Fixed Full-height Side Nav</h2>
            <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
            <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25%
                width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
            <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long
                (for example if it has over 50 links inside of it).</p>
            <p>Some text..</p>
            <p>Some text..</p>
            <p>Some text..</p>
            <p>Some text..</p>
            <p>Some text..</p>
            <p>Some text..</p>
            <p>Some text..</p>
        </div>
    </body>

  • 效果

2.2 响应式边栏导航

  • 使用 CSS3 媒体查询来创建一个边栏导航。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    <style>
        body {
            margin: 0;
        }

        ul.sidenav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 25%;
            background-color: #f1f1f1;
            position: fixed;
            height: 100%;
            overflow: auto;
        }

        ul.sidenav li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        ul.sidenav li a.active {
            background-color: #4CAF50;
            color: white;
        }

        ul.sidenav li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }

        div.content {
            margin-left: 25%;
            padding: 1px 16px;
            height: 1000px;
        }

        @media screen and (max-width: 900px) {
            ul.sidenav {
                width: 100%;
                height: auto;
                position: relative;
            }

            ul.sidenav li a {
                float: left;
                padding: 15px;
            }

            div.content {
                margin-left: 0;
            }
        }

        @media screen and (max-width: 400px) {
            ul.sidenav li a {
                text-align: center;
                float: none;
            }
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <body>
        <ul class="sidenav">
            <li><a class="active" href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系</a></li>
            <li><a href="#about">关于</a></li>
        </ul>

        <div class="content">
            <h2>响应式边栏导航实例</h2>
            <p>该实例在屏幕宽度小于 900px 时导航栏为顶部水平导航栏，如果大于 900px 导航栏会在左边，且是固定的。</p>
            <p>如果屏幕宽度小于 400px 会变为垂直导航栏。</p>
            <h3>重置浏览器窗口大小，查看效果。</h3>
        </div>
    </body>

  • 效果

         

3、水平导航栏

  • 有两种方法创建横向导航栏。使用内联（inline）或浮动（float）的列表项。

  • 这两种方法都很好，但如果想链接具有相同的大小，必须使用浮动的方法。

3.1 内联列表项

  • 建立一个横向导航栏的方法之一是指定元素。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        li {
            display: inline;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <ul>
        <li><a href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
    </ul>

  • 效果

  • 解析：

    • display: inline; - 默认情况下，<li> 元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。

3.2 浮动列表项

  • 在上面的例子中链接有不同的宽度。

  • 若要使所有的链接宽度相等，需要浮动 <li> 元素，并指定为 <a> 元素的宽度。

  • 背景颜色添加到链接中显示链接的区域。整个链接区域是可点击的，不仅仅是文本。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            width: 70px;
            background-color: #dddddd;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <ul>
        <li><a href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
    </ul>

  • 效果

  • 解析：

    • overflow: hidden; - 添加到 ul 元素。以防止 li 元素列表的外出。
    • float: left; - 使用浮动块元素的幻灯片彼此相邻。
    • display: block; - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。
    • width: 60px; - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度。

3.3 水平固定导航栏

  • 创建一个水平导航条，在鼠标移动到选项后修改背景颜色。

  • 注意: 该实例可以在移动设备上使用。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <style>
        body {
            margin: 0;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            position: fixed;
            top: 0;		/* 固定在头部 */
            width: 100%;
        }

        li {
            float: left;
        }

        li.right {
            float: right;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover:not(.active) {
            background-color: #111;
        }

        .active {
            background-color: #4CAF50;
        }

        div.content {
            padding: 20px;
            margin-top: 30px;
            height: 1500px;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <body>
        <ul>
            <li><a class="active" href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系</a></li>
            <li class="right"><a href="#about">关于</a></li>
        </ul>

        <div class="content">
            <h1>Fixed Top Navigation Bar</h1>
            <h2>Scroll this page to see the effect</h2>
            <h2>The navigation bar will stay at the top of the page while scrolling</h2>

            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
            <p>Some text some text some text some text..</p>
        </div>
    </body>

  • 效果

3.4 响应式顶部导航

  • 使用 CSS3 媒体查询来创建一个响应式导航.

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <style>
        body {
            margin: 0;
        }

        ul.topnav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        ul.topnav li {
            float: left;
        }

        ul.topnav li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        ul.topnav li a:hover:not(.active) {
            background-color: #111;
        }

        ul.topnav li a.active {
            background-color: #4CAF50;
        }

        ul.topnav li.right {
            float: right;
        }

        @media screen and (max-width: 500px) {

            ul.topnav li.right,
            ul.topnav li {
                float: none;
            }
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <body>
        <ul class="topnav">
            <li><a class="active" href="#home">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系</a></li>
            <li class="right"><a href="#about">关于</a></li>
        </ul>

        <div style="padding:0 16px;">
            <h2>响应式导航栏实例</h2>
            <p>在屏幕宽度小于 600px 会重置导航栏。</p>
            <h4>重置浏览器窗口大小，查看效果。</h4>
        </div>
    </body>

  • 效果

      

4、CSS 实例

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:17


评论


文章目录
  1. 1. 前言
  2. 2. 1、导航栏
  3. 3. 2、垂直导航栏
    1. 3.1. 2.1 垂直固定导航栏
    2. 3.2. 2.2 响应式边栏导航
  4. 4. 3、水平导航栏
    1. 4.1. 3.1 内联列表项
    2. 4.2. 3.2 浮动列表项
    3. 4.3. 3.3 水平固定导航栏
    4. 4.4. 3.4 响应式顶部导航
  5. 5. 4、CSS 实例
隐藏目录