单击 CSS 创建下拉菜单

IT技术 javascript html css
2021-03-12 19:48:43

我需要构建一个包含 5 个选项的菜单，单击某个选项后会出现一个新的子菜单。我完全不知道该怎么做。

/**Navigation */

nav {
  border: 1px solid red;
  float: left;
  margin-right: 35px;
  min-height: 280px;
}

nav li {
  text-decoration: none;
  font-weight: normal;
  color: red;
  list-style: none;
}


/**Content */

#section {
  background-color: ;
  border: 1px solid;
  font: normal 12px Helvetica, Arial, sans-serif;
  margin-left: 180px;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
<div class="clearfix"></div>
<nav>
  <ul>
    <li><a href="index.html" accesskey="1"> Home </a> </li>
    <li><a href="Portfolio.html" accesskey="2"> Portfolio </a> </li>

    <ul>
      <li><a href="Commercial.html">Commercial</a> </li>
      <li><a href="Residential.html">Residential</a> </li>
      <li><a href="heritage.html">Heritage</a> </li>
      <li><a href="Rennovations.html">Rennovations</a> </li>
    </ul>

    <li><a href="services.html" accesskey="3"> Services </a> </li>
    <li><a href="aboutus.html" accesskey="4"> About Us </a> </li>
    <li><a href="contactus.html" accesskey="5"> Contact Us </a> </li>
  </ul>
</nav>

6个回答

除了已经提到的checkboxhack 之外，您还可以使用按钮作为菜单项，并使用:focus状态来显示下拉菜单。这样做的好处是，如果您在菜单外单击，菜单将关闭。一些 HTML 元素不会自然地在点击时获得焦点；对于那些，您可以添加“tabindex”属性以使它们获得焦点。

ul {
    list-style: none;
}

.menu > li {
    float: left;
}
.menu button {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.menu button:hover,
.menu button:focus {
    outline: 0;
    text-decoration: underline;
}

.submenu {
    display: none;
    position: absolute;
    padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
    display: block;
}
<ul class="menu">
    <li>
        <button>Home</button>
        <ul class="submenu">
            <li><a href="http://www.barbie.com">Link</a></li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </li>
    <li><button>More</button></li>
    <li><button>Info</button></li>
</ul>

CSS 没有点击处理程序。出于这个原因，标准 CSS 是不可能做到的。您可以使用称为复选框 hack 的东西，但在我看来，它有点笨拙，并且在像您的用例所需的导航菜单中使用会很尴尬。出于这个原因，我建议使用 jQuery 或 Javascript...这是一个使用 jQuery 的相当简单的解决方案。

基本上，我们从一开始就使用display: none; jQuery隐藏子导航，当单击“.parent”时，我们将类“.visible”切换到子导航元素（嵌套的 UL），display: block;从而使其出现。再次单击时，它会随着类被删除而消失。

请注意，要使其正常工作，<UL>作为“子导航”的每个嵌套都必须具有.sub-nav该类，并且它的父元素 (the <LI>)必须具有.parent该类。此外，由于这使用 jQuery，您需要将 jQuery 库连接到您的站点。您可以通过自己托管并像往常一样链接来完成此操作，或者您可以从google 的图书馆服务（推荐）链接它。

JSFiddle 演示

$(document).ready(function() {
  $('.parent').click(function() {
    $('.sub-nav').toggleClass('visible');
  });
});
#nav ul.sub-nav {
  display: none;
}

#nav ul.visible {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
  <li>Home</li>
  <li class="parent">About
    <ul class="sub-nav">
      <li>Johnny</li>
      <li>Julie</li>
      <li>Jamie</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

对于来这里寻找“仅 CSS”解决方案的人，下面发布了一些内容。
2021-04-25 19:48:43
@BBMAN 在我的具体示例中，我只是将 id="nav" 标记到第一个 UL 上，以显示它是菜单的最上层。您当然仍然可以毫无问题地使用 <nav> 元素，但您仍然应该遵守 UL 和 LI 的标准用法来构建导航本身。其他类是 jQuery 工作所必需的。.parent 类是 jQuery 用来检测何时有人点击了具有子菜单的 LI 的类。然后 .sub-nav 类是 jQuery 用来确定应该将可见类粘贴到哪个元素中的类。
2021-04-27 19:48:43
@alsweet 这假设 OP 希望子导航在鼠标不再悬停在那里时消失，我建议不要使用此类应用程序。
2021-05-11 19:48:43
谢谢迈克尔！正是我所追求的！并感谢其他所有人的帮助。只是奇怪，为什么所有示例都设置为带有类 ID 的“ul”？我只是问，因为我试图使用尽可能多的 HTML 5 标签。最好的家伙。
2021-05-12 19:48:43
我建议每个人都前往jQuery UI的.toggleClass() 文档。向函数添加缓动很容易，并且可以极大地改进您的应用程序。
2021-05-15 19:48:43

我当然迟到了，但是：

您可以使用 hack 触发 css 点击！！

使用复选框工作！！

样本：

      ul{
            display: none;
        }
        #checkbox{
            opacity: 0;
        }
        #checkbox:checked + ul {
            
            display: block;
        }
    <div class="container">
        <label for="checkbox">Dropdown menu</label>
        <input id="checkbox" type="checkbox" />        
        <ul>
            <li><a href="#">Dropdown link 1</a></li>
            <li><a href="#">Dropdown link 2</a></li>
        </ul>
    </div>

您可以使用过渡动画显示隐藏效果:) 这只是一个非常简单的示例！！

提及：如果您需要对旧浏览器的浏览器支持，这是一个 CSS3 hack，这不起作用。

:checked 不支持
2021-05-13 19:48:43

事实上，有可能使用复选框 hack 来使用纯 CSS 和浏览器元素行为来实现这一点，但是在撰写本文时，它正在推动应该使用 CSS 完成的内容与可以使用 CSS 完成的内容。它也可能导致一些非常糟糕的语义代码（毕竟它通常被声明为复选框HACK是有原因的）。

话虽如此，如果您只对现代浏览器有要求，则可以使用它，为其他人提供有限的功能，我自己在生产代码中使用它，在一个孤立的 chrome 项目中使用它，玩起来很有趣。

这是一个可以阅读更多相关信息的链接：

http://css-tricks.com/the-checkbox-hack/

但再次强调，就像这里的其他人一样，函数式行为真的应该通过 JavaScript 来完成。除非你真的想要一个基于悬停的菜单解决方案，否则这是一个不同的问题！

漂亮的解决方案，似乎对我们的用例很有效，谢谢。
2021-05-12 19:48:43

您将需要使用 javascript 并注册一个点击事件处理程序来执行您的操作。

如果您对所有内容都不熟悉，那么您应该寻找一些 javascript 教程（不要使用 W3Schools，在别处寻找），然后查看一些 jQuery 教程，因为 jQuery 简化了这些任务。

其它你可能感兴趣的问题
上一篇为什么 jQuery 不会加载到 Facebook 中？ 下一篇javascript - 如何防止 toFixed 四舍五入十进制数