css菜单下拉菜单_在CSS中创建下拉菜单

最新推荐文章于 2024-08-24 09:00:00 发布

cumtb2002

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量557

点赞数

文章标签： css python html html5 js ViewUI

原文链接：https://www.includehelp.com/code-snippets/creating-dropdown-in-css.aspx

版权

css菜单下拉菜单

CSS | 创建下拉菜单 (CSS | Creating Dropdown)

Trivia:

琐事：

We know the importance of navigation bar on our webpage, we know the importance of a list of items too on our webpage but what is the importance of dropdown in web pages?

我们知道网页上导航栏的重要性，也知道我们网页上项目列表的重要性，但是网页下拉菜单的重要性是什么？

Well, there are too many to mention but let's discuss a few of them.

好吧，有太多事情要提，但让我们讨论其中的一些。

First, the dropdown is a packed arrangement of a list of items which saves space for our website.

首先，下拉列表是项目列表的紧凑排列，可以节省我们网站的空间。

The dropdown is a stylish way to display your options on the web page as it also increases the curiosity of the users to go and click on the dropdown option.

该下拉菜单是一种在网页上显示您的选项的时尚方式，因为它还增加了用户单击该下拉菜单选项的好奇心。

Therefore, the dropdown option is very essential while creating and designing a web page.

因此，在创建和设计网页时， 下拉选项非常重要。

However one must be very careful while creating a dropdown option as it is a common tendency to mix up the options when someone is new and is learning CSS.

但是，在创建下拉选项时必须非常小心，因为在新手学习CSS时，混合选项是一种常见的趋势。

The prime tip to create a dropdown option is that one should be clear in what all options he/she may require to display on the web page.

创建下拉选项的主要提示是，应该明确他/她可能需要在网页上显示的所有选项。

Many users do not tend to go through the entire web page rather they always look for a dropdown option that would contain the links of the shortcuts.

许多用户并不倾向于浏览整个网页，而是总是寻找包含快捷方式链接的下拉选项。

There to create a dropdown with quick links as menu items are good practice and thus happy users!

在那里创建带有快速链接的下拉菜单，因为菜单项是一种很好的习惯，因此用户满意！

Now let's talk about how to create a dropdown option using CSS,

现在让我们谈谈如何使用CSS创建下拉菜单选项，

基本下拉 (Basic DropDown)

For HTML:

对于HTML：

Step 1: Create a button or a similar option that would open your dropdown.
第1步 ：创建一个按钮或类似选项，以打开您的下拉菜单。
Step 2: Use a container element for e.g. <div> to help you create a dropdown option and then you can add anything inside it whatever you want to display to the users.
第2步 ：使用一个容器元素(例如<div>)来帮助您创建一个下拉选项，然后您可以在其中添加任何想要显示给用户的内容。
Step 3: Wrap the <div> element around the elements which would help in positioning the dropdown content correctly with the CSS.
步骤3 ：将<div>元素环绕在元素周围，这将有助于使用CSS正确放置下拉内容。

For CSS:

对于CSS：

The dropdown class uses various properties. One of them is position:relative which would be needed in placing the dropdown content right below the dropdown option.

下拉类使用各种属性。其中之一是position：relative ，将下拉菜单内容放置在下拉选项正下方时需要使用。

Step 4: The dropdown contains the actual dropdown content which would be displayed only when the user hovers over it.
步骤4 ：下拉菜单包含实际的下拉菜单内容，仅当用户将鼠标悬停在其上时才会显示。
Step 5: If you want the width of your dropdown content to be as equally wide as the dropdown button then you must change the width to 100% and also enable overflow:auto so that your content will be able to scroll on small screens.
第5步 ：如果您希望下拉内容的宽度与下拉按钮的宽度相同，则必须将宽度更改为100％ ，还必须启用overflow：auto，这样您的内容才能在小屏幕上滚动。

You can always change the alignment of your dropdown by using the right-aligned dropdown. To make your content go from right to left you must set right:0.

您始终可以使用right-aligned dropdown更改下拉菜单的对齐方式 。要使内容从右到左，您必须设置right：0 。

Syntax:

句法：

.dropdown-content {
    right: 0;
}

Example:

例：

<!DOCTYPE html>
<html>

<head>
    <style>
        .dropbtn {
            background-color: #3eff;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
        
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        
        .dropdown-content a:hover {
            background-color: #3eff;
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .dropdown:hover .dropbtn {
            background-color: #3eff;
        }
    </style>
</head>

<body>
    <div class="dropdown" style="float:left;">
        <button class="dropbtn">Left</button>
        <div class="dropdown-content" style="left:0;">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
</body>

</html>

Output

输出量