Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > body text

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

WBOY
Release： 2022-08-09 11:07:03
forward
2125 people have browsed it

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.

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

(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: 

Copy after login
Copy after login

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


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


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


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>




Copy after login





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;}
Copy after login


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. 


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


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>




Copy after login





Vertical navigation bar instance


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


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


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>




Copy after login





Active/current navigation bar instance


After clicking an option, we can add the "active" class to standardize which option is selected: 
Simple understanding of basic CSS navigation bar and CSS drop-down menu through examples


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


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>




Copy after login



<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: 


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


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>




Copy after login



<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; /* 如果导航栏选项多，允许滚动 */}
Copy after login


Note: This example can be used on mobile devices. 


Simple understanding of basic CSS navigation bar and CSS drop-down menu through examples
 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>




Copy after login



<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;}
Copy after login


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;}
Copy after login


 Example analysis: 


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


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;}
Copy after login


链接右对齐


将导航条最右边的选项设置右对齐 (float:right;)：
Simple understanding of basic CSS navigation bar and CSS drop-down menu through examples


Copy after login
Copy after login

<li>关于

添加分割线


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


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



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


固定导航条


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


固定在头部：


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


固定在底部：


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


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


源码


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


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>




Copy after login



<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


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


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>




Copy after login


    
    <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 创建一个鼠标移动上去后显示下拉菜单的效果。


基本下拉菜单


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


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


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>



Copy after login


实例解析


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 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。


下拉菜单


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


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


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>



Copy after login


（学习视频分享：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!
                

            

            

                                

                    Related labels：
                    

                        css                    

                

                                
source：csdn.net

                            

            

                                    
                        Previous article：Detailed explanation of CSS width and height properties
                    
                                    
                        Next article：Detailed explanation of fixed properties of CSS positioning properties
                    
                            

            

       
                
Statement of this Website

                
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

            

           

            

                
Latest Articles by Author

                
            

            

                
Latest Issues

                

                                        

                        

                            Where is the courseware about CSS mind mapping?
                            Courseware
                            

                                

                                     From 2024-04-16 10:10:18
                                

                                

                                    
  0 

                                    
0

                                    
1335

                                

                            

                        

                    

                    

                                        

                        

                            The page suddenly cannot pull css or bootstrap
                            So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
                            

                                

                                     From 2024-04-06 21:58:04
                                

                                

                                    
  0 

                                    
1

                                    
800

                                

                            

                        

                    

                    

                                        

                        

                            Dynamically modify inline CSS styles in Javafx
                            I'm trying to change the background image of a pane when the application is maximized. My ...
                            

                                

                                     From 2024-04-06 20:57:16
                                

                                

                                    
  0 

                                    
1

                                    
487

                                

                            

                        

                    

                    

                                        

                        

                            How to make floated elements stack vertically instead of horizontally in CSS?
                            I'm trying to make a webpage with two columns, with main content on one side and additiona...
                            

                                

                                     From 2024-04-06 20:45:26
                                

                                

                                    
  0 

                                    
2

                                    
386

                                

                            

                        

                    

                    

                                        

                        

                            Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have?
                            I have the following CSS code that is part of a larger CSS code used in a website I'm deve...
                            

                                

                                     From 2024-04-06 20:41:51
                                

                                

                                    
  0 

                                    
1

                                    
518

                                

                            

                        

                    

                    

                                    

            

            

                

                    
Related Topics

                    More>
                    
                

                

                    
                

            

        

    

    

        

            
Popular Recommendations

            

                
            

        

        
        

            

                
Popular Tutorials

                More>
                
            

            

                

                    
Related Tutorials 

                    
Popular Recommendations

                    
Latest courses

                

                
                
                
            

            
        


        

            

                
Latest Downloads

                More>
                
            

                        
            

                

                    
Web Effects 

                    
Website Source Code

                    
Website Materials

                    
Front End Template