CSS如何实现下拉菜单?代码实现详细解释

2021年3月28日13:34:25 发表评论 808 次浏览

下拉菜单是交互式网站最重要的部分之一。 CSS用于设计下拉菜单。下拉列表是无序列表下的一堆列表, 即<ul>, 在HTML世界中广为人知。 <ul>标记下的嵌套列表(<li>)标记用于创建下拉结构。要显示效果, 请对结构中存在的组件使用CSS。 CSS是非常简单的属性, 用于创建下拉菜单。

<!DOCTYPE html>
<html>
     <head>
         <title>Dropdown property</title>
     </head>
     <body>
         <nav>
             <ul>
                 <li class = "Lev-1">
                 <a href = "">Level-1</a>
                 <ul>
                     <li><a href = "">Link 1</a></li>
                     <li><a href = "">Link 2</a></li>
                     <li><a href = "">Link 3</a></li>
                     <li><a href = "">Link 4</a></li>
                 </ul>
                 </li>
             </ul>
         </nav>
     </body>
</html>

输出如下:

下拉式菜单

例子:在HTML结构中添加CSS属性以创建交互式下拉结构。

<!DOCTYPE html>
<html>
     <head>
         <title>Navigation property</title>
         <style>
             a {
                 color: white;
                 background-color:#990;
                 text-decoration: none;
             }
             nav{
                 background: #333;
             }
             nav>ul{ margin: 0 auto; width: 80px; }
             nav ul li{
                 display: block;
                 float: left;
                 margin-left:-40px;
                 position: relative;
             }
             nav ul a{
                 display: block;
                 float: left;
                 width: 150px;
                 padding: 10px 20px;
             }
             nav ul a:hover{
                 background: #090;
             }
             nav ul li ul li{
                 float: none;
             }
             nav ul li ul{
                 display: none;
                 position: absolute;
                 background: #333;
                 top: 42px;
             }
             nav ul li:hover>ul{
                 display: block;
             }
             nav ul li a{
                 display: block;
             }
             .gfg {
                 font-size:40px;
                 font-weight:bold;
                 color:#009900;
                 Text-align:center;
             }
             p {
                 font-size:20px;
                 font-weight:bold;
                 text-align:center;
             }
         </style>
     </head>
     <body>
         <div class = "gfg">lsbin</div>
         <p>Dropdown Navigation property</p>
         <nav>
             <ul>
                 <li class = "Lev-1">
                 <a href = "">Level-1</a>
                 <ul>
                     <li><a href = "">Link 1</a></li>
                     <li><a href = "">Link 2</a></li>
                     <li><a href = "">Link 3</a></li>
                     <li><a href = "">Link 4</a></li>
                 </ul>
                 </li>
             </ul>
         </nav>
     </body>
</html>

输出如下:

导航

以上编写的代码基于下拉结构产生适当的输出。 HTML代码的重要部分讨论如下:

  • 导航是最外面的容器
  • nav ul li ul li – float设置为none, 以便当我们将鼠标悬停在它上面时, 它保持不变。
  • 使用相对位置, 以便li相对于其组件移动或更改其位置。
  • 悬停后使用">"可查看悬停对li的下一个ul的影响。

右对齐的下拉列表:右对齐下拉菜单是浮点值正确的下拉菜单, 用于在右侧屏幕上显示下拉菜单内容。在包含内容的div处添加右浮动。

<!DOCTYPE html>
<html>
     <head>
         <title>right-aligned dropdown content property</title>
         <style>
             #drop {
                 background-color: teal;
                 color: white;
                 padding: 10px;
                 font-size: 16px;
                 width: : 200px;
                 height: : 60px;
                 border-radius: 5px;
                 font-size: 20px;
             }
             #drop-down {
                 position: relative;
                 display: inline-block;
             }
             #dropdown-menu {
                 display: none;
                 position: absolute;
                 background-color: #666;
                 width: 160px;
                 margin-left:-45px;
                 border-radius: 5px;
                 z-index: 1;
             }
             #dropdown-menu a {
                 color: black;
                 padding: 12px 16px;
                 text-decoration: none;
                 display: block;
             }
             .gfg {
                 font-size:40px;
                 font-weight:bold;
                 color:#009900;
                 Text-align:center;
             }
             p {
                 font-size:20px;
                 font-weight:bold;
                 text-align:center;
             }
             #dropdown-menu a:hover {background-color: #ddd;}
             #drop-down:hover #dropdown-menu {display: block;}
         </style>
     </head>
     <body>
         <div class = "gfg">lsbin</div>
         <p>Right-aligned Dropdown content property</p>
         <div id = "drop-down" style = " float: right; margin-right: 70px;">
             <button id = "drop">DropDown</button>
             <div id = "dropdown-menu">
                 <a href = "">Item 1</a>
                 <a href = "">Item 2</a>
                 <a href = "">Item 3</a>
                 <a href = "">Item 4</a>
             </div>
         </div>
     </body>
</html>

输出如下:

右对齐下拉菜单

图片下拉列表:它不是下拉菜单, 但是会放大你悬停的图像。需要基本的CSS和图像才能使其正常工作。

例子:

<!DOCTYPE html>
<html>
     <head>
         <title>Image Dropdown</title>
         <style>
             .dropmenu {
                 position: relative;
                 display: inline-block;
                 margin-left:150px;
             }
             .sub-dropmenu {
                 display: none;
                 position: absolute;
             }
             .dropmenu:hover .sub-dropmenu {
                 display: block;
             }
             .enlarge {
                 padding: 15px;
                 text-align: center;
             }
             .gfg {
                 margin-left:40px;
                 font-size:30px;
                 font-weight:bold;
             }
         </style>
     </head>
     <body>
         <div class = "gfg">Image Dropdown property</div>
         <div class = "dropmenu">
             <img src = "https://media.lsbin.org/wp-content/uploads/temp1.png"
             width = "150" height = "50" align = "middle">     
             <div class = "sub-dropmenu">
                 <img src = "https://media.lsbin.org/wp-content/uploads/temp1.png" 
                 width = "600" height = "200"> 
             </div>
         </div>
     </body>
</html>

输出如下:

图片下拉

点击的下拉菜单:

这需要对JavaScript有基本的了解, 因为它用于运行某些功能以使单击的下拉列表起作用。

例子:

<!DOCTYPE html>
<html>
     <head>
         <title>clicked dropdown</title>
         <style type = "text/css">
             button {
                 background: #009900;
                 width: 200px;
                 height: 60px;
                 color: white;
                 border: 1px solid #fff;
                 font-size: 20px;
                 border-radius: 5px;
              
             }
             ul li {
                 list-style: none;
             }
             ul li a {
                 display: block;
                 background: #c99;
                 width: 200px;
                 height: 50px;
                 text-decoration: none;
                 text-align: center;
                 padding: 10px;
                 border-radius: 5px;
                 text-align: center;
                 color: white; 
                 font-size: 25px;
             }
             ul li a {
                 text-decoration: none;
             }
             ul li a:hover {
                 background: #009900; 
             }
             .open {display: none;}
             .gfg {
                 font-size:40px;
                 font-weight:bold;
                 color:#009900;
                 Text-align:center;
             }
             p {
                 font-size:20px;
                 font-weight:bold;
                 text-align:center;
             }
         </style>
         <script type = "text/javascript">
             function open_menu(){
                 var clicked= document.getElementById('drop-menu');
                 if(clicked.style.display=='block')
                 {
                     clicked.style.display='none';
                 }
                 else{
                     clicked.style.display='block';
                 }
             }
         </script>
     </head>
     <body>
         <div class = "gfg">lsbin</div>
         <p>Clicked Dropdown content property</p>
         <div id = "dropdown">
             <button onclick = "open_menu()">Click Me!</button>
             <div class = "open" id = "drop-menu">
             <ul>
                 <li><a href = "">Item-1</a></li>
                 <li><a href = "">Item-2</a></li>
                 <li><a href = "">Item-3</a></li>
                 <li><a href = "">Item-4</a></li>
             </ul>
             </div>
         </div> 
     </body> 
</html>

输出如下:

点击的下拉菜单

注意:该代码的一些重要亮点:

  • 单击"单击我"按钮时, javascript函数将展开和折叠菜单。
  • 我们使用onclick调用button标记中的javascript函数。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: