如何向我创建的这个自定义 flexbox 导航栏添加下拉菜单？

Posted 2023-03-05

【中文标题】如何向我创建的这个自定义 flexbox 导航栏添加下拉菜单？

【英文标题】：How to add dropdowns to this custom flexbox navigation bar I have created?

【发布时间】：2021-11-04 10:51:42

【问题描述】：

我创建了一个自定义的 flexbox 导航，它完全按照我的预期工作，除了一件事。我需要在一些导航栏项目上添加下拉菜单，并且我已经尝试了所有可以使用的资源。我知道有些格式有点奇怪，而这正是 Real Geeks 平台进行一次编辑的方式。

CSS

.bg-palette-navigationBackground-color 
  background-color: transparent;


@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body 
  background: transparent;
  font-size: 1.1em;
  line-height: 1.45em;
  color: #ffffff;
  margin: 0;
  padding: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;


a 
  color: #FFF;


p 
  text-align: center;


.toggle,
[id^=drop] 
  display: none;


nav 
  margin: 0;
  padding: 0;
  background-color: #404041;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;


#logo 
  display: block;
  padding: 0 30px;
  float: left;
  font-size: 0.9em;
  line-height: 1.45em;


#logo img
  display: none;
  padding: 0 15px;
  float: left;
  max-width: 25%;



#main-toggle 
  cursor: pointer;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
  padding-right: -10px;


.nav-icon 
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  width: 18px;


.nav-icon:before,
.nav-icon:after 
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;


.nav-icon:before 
  top: 5px;


.nav-icon:after 
  top: -5px;


nav:after 
  content: "";
  display: table;
  clear: both;


nav ul 
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;


nav ul li 
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #404041;


nav a 
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 1.1em;
  line-height: 2.5em;
  text-decoration: none;


nav ul li ul li:hover 
  text-decoration: overline 3px #beaf87;


nav a:hover 
  text-decoration: overline 3px #beaf87;


nav ul ul 
  display: none;
  position: relative;


nav ul li:hover>ul 
  display: inherit;


nav ul ul li 
  width: auto;
  float: none;
  display: list-item;
  position: absolute;


nav ul ul ul li 
  position: relative;
  top: -60px;
  left: 170px;


li>a:after 
  content: '';


li>a:only-child:after 
  content: '';



/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) 

  nav 
    margin: 0;
  
  nav ul
    float:none;
  
  .toggle+a,
  .menu 
    display: none;
  

  .toggle 
    display: block;
    background-color: #404041;
    padding: 0 20px;
    color: #FFF;
    font-size: 1.1em;
    line-height: 2.5em;
    text-decoration: none;
    border: none;
  

  .toggle:hover 
  text-decoration: overline 3px #beaf87;
  

  [id^=drop]:checked+ul 
    display: block;
  

  nav ul li 
    display: block;
    width: 100%;
  

  nav ul ul .toggle,
  nav ul ul a 
    padding: 0 40px;
  

  nav ul ul ul a 
    padding: 0 80px;
  

  nav ul ul ul a 
    background-color: #404041;
  

  nav ul li ul li .toggle,
  nav ul ul a 
    background-color: #404041;
  

  nav ul ul 
    float: none;
    position: static;
    color: #ffffff;
  

  nav ul ul li:hover>ul,
  nav ul li:hover>ul 
    display: none;
  

  nav ul ul li 
    display: block;
    width: 100%;
  

  nav ul ul ul li 
    position: static;

  

HTML

<nav><label id="main-toggle" class="toggle" for="drop"><span class="nav-icon"></span></label> <input id="drop" type="checkbox" />
<ul class="menu">
<li><a href="#">HOME</a></li>
<li><!-- First Tier Drop Down --> <label class="toggle" for="drop-1">SELLER SERVICES</label> <a href="#">SELLER SERVICES</a> <input id="drop-1" type="checkbox" />
<ul>
<li><a href="#">SERVICES OVERVIEW</a></li>
<li><a href="#">INSTANT HOME VALUATION</a></li>
</ul>
</li>
<li><!-- First Tier Drop Down --> <label class="toggle" for="drop-1">BUYER SERVICES</label> <a href="#">BUYER SERVICES</a> <input id="drop-1" type="checkbox" />
<ul>
<li><a href="#">SERVICES OVERVIEW</a></li>
<li><a href="#">FINANCING</a></li>
</ul>
</li>
<li><a href="#">RELOCATION</a></li>
<li><a href="#">MILITARY SERVICES</a></li>
<li><!-- First Tier Drop Down --> <label class="toggle" for="drop-1">FIND AN AGENT</label> <a href="#">FIND AN AGENT</a> <input id="drop-1" type="checkbox" />
<ul>
<li><a href="#">BOILING SPRINGS OFFICE</a></li>
<li><a href="#">SPARTANBURG OFFICE</a></li>
<li><a href="#">GREENVILLE OFFICE</a></li>
</ul>
</li>
<li><!-- First Tier Drop Down --> <label class="toggle" for="drop-1">ABOUT</label> <a href="#">ABOUT</a> <input id="drop-1" type="checkbox" />
<ul>
<li><a href="#">CENTURY 21 BLACKWELL</a></li>
<li><a href="#">CENTURY 21</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</li>
<li><a href="#">CAREERS</a></li>
<li><a href="#">AGENT PORTAL</a></li>
</ul>
</nav>

【参考方案1】：

恐怕你的代码很乱而且过于复杂，从头开始重做会更容易。

我建议你看看这个：

https://css-tricks.com/solved-with-css-dropdown-menus/

它可能会帮助您了解需要复制什么才能达到预期的效果。

如果你仍然想编辑你自己的代码，你基本上必须在你的代码中复制相同的 ul > li 结构，即：

<li>
    <label class="toggle" for="drop-1">TEST DPDWN</label>
    <input id="drop-1" type="checkbox" />
    <ul>
        <li><a href="#">SERVICES OVERVIEW</a></li>
        <li><a href="#">INSTANT HOME VALUATION</a></li>
    </ul>
</li>

这可能有点困难，因为您确实需要清理代码。除非绝对必要，否则尽量避免绝对定位和浮动（你应该完全忘记浮动）