Simple understanding of basic CSS navigation bar and CSS drop-down menu through examples

This article brings you relevant knowledge about css, which mainly introduces related issues such as the implementation properties of basic css navigation bar and drop-down menu. Using CSS, you can convert it into a good-looking one. Navigation bar instead of boring HTML menu, let’s take a look at it, I hope it will be helpful to everyone.

(Learning video sharing: css video tutorial, html video tutorial)

Navigation bar

Proficient use of the navigation bar is very important for any website.

Using CSS you can transform into a beautiful navigation bar instead of a boring HTML menu.

Navigation bar = link list

As a standard HTML foundation, a navigation bar is necessary.
In our example we will create a standard HTML list navigation bar.

The navigation bar is basically a list of links, so using the <ul></ul> and <li> elements makes a lot of sense, common HTML:

    <li>主页     <li>新闻     <li>联系     <li>关于

Now, let’s remove margins and padding from the list:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;}

Example parsing:
list-style-type:none – Remove the small tag in front of the list, a navigation bar does not need the list tag.
Remove the browser's default setting of margins and padding to 0.

The code in the above example is the standard code used for vertical and horizontal navigation bars.

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
    </style>

    <li>主页     <li>新闻     <li>联系     <li>关于

Vertical navigation bar

For the above code, we only need the style of the <a></a> element to create a vertical navigation bar:

li a {
  display: block;
  width: 60px;
  background-color: #dddddd;}

Example description:

display:block Display the link of the block element, making the entire clickable link area (not just the text), which allows us to specify the width width: 60px.

Block elements are max-width by default. We're going to specify a width of 60 pixels.

Note: Please be sure to specify the width of the <a></a> element in the vertical navigation bar. If you omit the width, IE6 may have unexpected effects.

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        li a {
            display: block;
            width: 60px;
            background-color: #dddddd;
        }
    </style>

    <li>主页     <li>新闻     <li>联系     <li>关于

Vertical navigation bar instance

Create a simple vertical navigation bar instance and modify the background color when the mouse moves to the option:

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
        }
        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        /* 鼠标移动到选项上修改背景颜色 */
        li a:hover {
            background-color: #555;
            color: white;
        }
    </style>

    <li>主页     <li>新闻     <li>联系     <li>关于

Active/current navigation bar instance

After clicking an option, we can add the "active" class to standardize which option is selected:

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

Sample code:

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
        }
        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        /* 鼠标移动到选项上修改背景颜色 */
        li a:hover {
            background-color: #555;
            color: white;
        }
        li a.active {
            background-color: #4CAF50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>

    <li>主页     <li>新闻     <li>联系     <li>关于

<script> function removeActiveClass(node) { node.className = &#39;&#39;; } let menus = document.querySelectorAll(&#39;#nav&#39;); menus.forEach(function (value, index) { value.addEventListener(&#39;click&#39;, function (e) { var target = e.target; Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li a&#39;), removeActiveClass); target.className = &#39;active&#39;; }) }); </script>

Create a link and add a border

Can be found in <li> or <a> </a> </li> Add the text-align:center style to center the link.

You can add the border attribute on border <ul></ul> to make the navigation bar have a border.
If you want to add a border to each option, you can add border-bottom to each <li> element:

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
            border: 1px solid #555;
        }

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

        li {
            text-align: center;
            border-bottom: 1px solid #555;
        }

        li:last-child {
            border-bottom: none;
        }

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

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

    <li>主页     <li>新闻     <li>联系     <li>关于

<script> function removeActiveClass(node) { node.className = &#39;&#39;; } let menus = document.querySelectorAll(&#39;#nav&#39;); menus.forEach(function (value, index) { value.addEventListener(&#39;click&#39;, function (e) { var target = e.target; Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li a&#39;), removeActiveClass); target.className = &#39;active&#39;; }) }); </script>

Fixed navigation bar with full screen height

Next we create a fixed navigation bar with full screen height on the left and scrollable content on the right.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */}

Note: This example can be used on mobile devices.

Source code

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 25%;
            background-color: #f1f1f1;
            height: 100%; /* 全屏高度 */
            position: fixed; 
            overflow: auto; /* 如果导航栏选项多，允许滚动 */
        }

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

        li {
            text-align: center;
            border-bottom: 1px solid #555;
        }

        li:last-child {
            border-bottom: none;
        }

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

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

    <li>主页     <li>新闻     <li>联系     <li>关于

<script> function removeActiveClass(node) { node.className = &#39;&#39;; } let menus = document.querySelectorAll(&#39;#nav&#39;); menus.forEach(function (value, index) { value.addEventListener(&#39;click&#39;, function (e) { var target = e.target; Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li a&#39;), removeActiveClass); target.className = &#39;active&#39;; }) }); </script>

Horizontal navigation bar

There are two ways to create a horizontal navigation bar. Use inline (inline) or float (float) for list items.

Both methods are fine, but if you want links to have the same size, you have to use the float method.

Inline list items

One of the ways to create a horizontal navigation bar is to specify elements. The above code is standard inline:

ul {
    list-style-type:none;
    margin:0;
    padding:0;}li {
    display:inline;}

Example analysis:

display:inline; - By default, <li> elements are block elements.
Here we remove the newlines before and after each list item to display a single line.

Floating list items

In the example above the links have different widths.

For all links to be of equal width, float the <li> element and specify the width of the <a></a> element:

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;}li {
    float:left;}li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;}

Example analysis:

   float:left – 使用浮动块元素的幻灯片彼此相邻。
display:block – 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。
   width:60px – 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度。

Horizontal navigation bar example

Create a horizontal navigation bar and modify the background color after moving the mouse to the option.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;}
 li {
    float: left;}
 li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;}
 /*鼠标移动到选项上修改背景颜色 */li a:hover {
    background-color: #111;}

链接右对齐

将导航条最右边的选项设置右对齐 (float:right;)：

<li>关于

添加分割线

<li> 通过 border-right 样式来添加分割线:

/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {
    border-right: 1px solid #bbb;
}
 
li:last-child {
    border-right: none;
}

  <li>主页   <li>新闻   <li>联系   <li>关于

固定导航条

可以设置页面的导航条固定在头部或者底部。

固定在头部：

ul {
    position: fixed;
    top: 0;
    width: 100%;}

固定在底部：

ul {
    position: fixed;
    bottom: 0;
    width: 100%;}

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

源码

nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
            border-right: 1px solid #bbb;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        /*鼠标移动到选项上修改背景颜色 */
        li a:hover {
            background-color: #111;
        }
        li a.active {
            background-color: #4CAF50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>

    <li>主页     <li>新闻     <li>联系     <li>关于

<script> function removeActiveClass(node) { node.className = &#39;&#39;; } let menus = document.querySelectorAll(&#39;#nav&#39;); menus.forEach(function (value, index) { value.addEventListener(&#39;click&#39;, function (e) { var target = e.target; Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li a&#39;), removeActiveClass); target.className = &#39;active&#39;; }) }); </script>

示例 1

nbsp;html>


    <meta>
    <title>原生js实现菜单动态添加active类</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            list-style: none;
            box-shadow: 0 2px 4px #eeeeee;
        }
        ul > li {
            padding: 6px 16px;
            margin: 0 5px;
            border-right: 1px solid #f7f7f7;
            border-bottom: 1px solid transparent;
            cursor: pointer;
        }
        ul > li:last-child{
            border-right: none;
        }
        li:hover, li:focus, .active {
            color: #ff6615;
            border-bottom: 1px solid #ff6615;
        }
    </style>

    <li>首页     <li>产品中心     <li>新闻资讯     <li>文档下载     <li>联系我们

<script> function removeActiveClass(node) { node.className = &#39;&#39;; } let menus = document.querySelectorAll(&#39;#nav&#39;); menus.forEach(function (value, index) { value.addEventListener(&#39;click&#39;, function (e) { var target = e.target; Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li&#39;), removeActiveClass); target.className = &#39;active&#39;; }) }); </script>

CSS 下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单。

nbsp;html>


    <meta>
    <title>下拉菜单</title>
    <style>
        /*鼠标下拉菜单*/
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 12px 16px;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>



<div>
    <span>鼠标移动到我这看到下拉菜单！</span>
    <div>
        <p>CSDN博客</p>
        <p>wgchen.blog.csdn.net</p>
    </div>
</div>

实例解析

HTML 部分

我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span></span> , 或 a <button></button> 元素。

使用容器元素 (如： <p></p> ) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用 <p> </p> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分

.dropdown 类使用 position:relative：
这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute ) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。
默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。

注意：如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100%
( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个”卡片”。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

下拉菜单

创建下拉菜单，并允许用户选取列表中的某一项：

nbsp;html>


    <meta>
    <title>下拉菜单</title>
    <style>
        /* 下拉按钮样式 */
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* 容器 <div> - 需要定位下拉内容 */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* 下拉内容 (默认隐藏) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        /* 下拉菜单的链接 */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* 鼠标移上去后修改下拉菜单链接颜色 */
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        /* 在鼠标移上去后显示下拉菜单 */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* 当下拉内容显示后修改下拉按钮的背景颜色 */
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>



    <div>
        <button>下拉菜单</button>
        <div>
            <a>CSDN博客 1</a>
            <a>CSDN博客 2</a>
            <a>CSDN博客 3</a>
        </div>
    </div>

（学习视频分享：css视频教程、html视频教程）

The above is the detailed content of Simple understanding of basic CSS navigation bar and CSS drop-down menu through examples. For more information, please follow other related articles on the PHP Chinese website!