css菜单下拉菜单_在CSS中创建下拉菜单
css菜單下拉菜單
CSS | 創(chuàng)建下拉菜單 (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?
我們知道網(wǎng)頁上導(dǎo)航欄的重要性，也知道我們網(wǎng)頁上項目列表的重要性，但是網(wǎng)頁下拉菜單的重要性是什么？
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.
首先， 下拉列表是項目列表的緊湊排列，可以節(jié)省我們網(wǎng)站的空間。
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.
該下拉菜單是一種在網(wǎng)頁上顯示您的選項的時尚方式，因為它還增加了用戶單擊該下拉菜單選項的好奇心。
Therefore, the dropdown option is very essential while creating and designing a web page.
因此，在創(chuàng)建和設(shè)計網(wǎng)頁時， 下拉選項非常重要。
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.
但是，在創(chuàng)建下拉選項時必須非常小心，因為在新手學(xué)習(xí)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.
創(chuàng)建下拉選項的主要提示是，應(yīng)該明確他/她可能需要在網(wǎng)頁上顯示的所有選項。
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.
許多用戶并不傾向于瀏覽整個網(wǎng)頁，而是總是尋找包含快捷方式鏈接的下拉選項。
There to create a dropdown with quick links as menu items are good practice and thus happy users!
在那里創(chuàng)建帶有快速鏈接的下拉菜單，因為菜單項是一種很好的習(xí)慣，因此用戶滿意！
Now let's talk about how to create a dropdown option using CSS,
現(xiàn)在讓我們談?wù)勅绾问褂肅SS創(chuàng)建下拉菜單選項，
基本下拉 (Basic DropDown)
For HTML:
對于HTML：
Step 1: Create a button or a similar option that would open your dropdown.
第1步 ：創(chuàng)建一個按鈕或類似選項，以打開您的下拉菜單。
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>)來幫助您創(chuàng)建一個下拉選項，然后您可以在其中添加任何想要顯示給用戶的內(nèi)容。
Step 3: Wrap the <div> element around the elements which would help in positioning the dropdown content correctly with the CSS.
步驟3 ：將<div>元素環(huán)繞在元素周圍，這將有助于使用CSS正確放置下拉內(nèi)容。
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 ，將下拉菜單內(nèi)容放置在下拉選項正下方時需要使用。
Step 4: The dropdown contains the actual dropdown content which would be displayed only when the user hovers over it.
步驟4 ：下拉菜單包含實際的下拉菜單內(nèi)容，僅當(dāng)用戶將鼠標(biāo)懸停在其上時才會顯示。
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步 ：如果您希望下拉內(nèi)容的寬度與下拉按鈕的寬度相同 ，則必須將寬度更改為100％ ，還必須啟用overflow：auto，這樣您的內(nèi)容才能在小屏幕上滾動。
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更改下拉菜單的對齊方式 。 要使內(nèi)容從右到左，您必須設(shè)置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
輸出量
In the above example, styles have been set to the dropdown property.
在上面的示例中，樣式已設(shè)置為dropdown屬性 。
翻譯自: https://www.includehelp.com/code-snippets/creating-dropdown-in-css.aspx
css菜單下拉菜單
總結(jié)
以上是生活随笔為你收集整理的css菜单下拉菜单_在CSS中创建下拉菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于投影仪与台式电脑的连接。真是要崩溃了
- 下一篇： CSS中的文本格式