Html 单击 CSS 创建下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18786546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating Drop Down Menu on click CSS
提问by Brendan
I'm required to build a menu with 5 options, upon clicking a certain one a new sub menu is to appear. I have absolutely no idea how to do this.
我需要构建一个包含 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>采纳答案by Michael
CSS does not have a click handler. For this reason it is impossible to do with standard CSS. You could use something called the checkbox hack, but in my humble opinion, it's a bit clunky and would be awkward to work with inside a navigation menu like your use-case requires. For this reason I would suggest jQuery or Javascript... Here is a rather simple solution using jQuery.
CSS 没有点击处理程序。出于这个原因，标准 CSS 是不可能做到的。您可以使用称为复选框 hack 的东西，但在我看来，它有点笨拙，并且在像您的用例所需的导航菜单中使用会很尴尬。出于这个原因，我建议使用 jQuery 或 Javascript...这是一个使用 jQuery 的相当简单的解决方案。
Basically, we hide the sub-nav from the start using display: none;Then, using jQuery, when ".parent" is clicked we toggle a class ".visible" to the sub-nav element (the nested UL) with display: block;which makes it appear. When clicked again, it disappears as the class is removed.
基本上，我们从一开始就使用display: none;jQuery隐藏子导航，当单击“.parent”时，我们将类“.visible”切换到子导航元素（嵌套的 UL），display: block;从而使其出现。再次单击时，它会随着类被删除而消失。
Note that for this to work, every nested <UL>which is a "sub-nav" MUSThave the .sub-navclass, and it's parent element (the <LI>) MUSThave the .parentclass. Also, since this uses jQuery, you will need to hook up a jQuery library to your site. You can do this by hosting it yourself and linking it like you normally would, or you can link it from google's library service(recommended).
请注意，要使其正常工作，<UL>作为“子导航”的每个嵌套都必须具有.sub-nav该类，并且它的父元素 (the <LI>)必须具有.parent该类。此外，由于这使用 jQuery，您需要将 jQuery 库连接到您的站点。您可以通过自己托管并像往常一样链接来完成此操作，或者您可以从google 的图书馆服务（推荐）链接它。
$(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>回答by Stephan Muller
In addition to the already mentioned checkboxhack, you could also use a button as menu items, and use the :focusstate to display the dropdown menu. A benefit over this is that the menu will close if you click outside of it. Some HTML elements do not naturally receive focus upon clicks; for those, you can add the "tabindex" attribute to allow them to gain focus.
除了已经提到的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>回答by Steven Web
Of course I am late but:
我当然迟到了，但是：
You can trigger a css click using a hack!!
您可以使用 hack 触发 css 点击！！
Work with an checkbox!!
使用复选框工作！！
Sample:
样本：
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>You can use transitions to animate the show an hide effect :) This is just a very simple example!!
您可以使用过渡动画显示隐藏效果:) 这只是一个非常简单的示例！！
Mention: this is a CSS3 hack if you need borwser support for old browsers this is not working.
提及：这是一个 CSS3 hack 如果您需要对旧浏览器的 borwser 支持这是行不通的。
回答by lee_gladding
In fact, there is a possibility to get this working with pure CSS and browser element behaviour, using the checkbox hack, however at the time of writing this, it is pushing what SHOULD be done with CSS vs what COULD be done with CSS. Also It can cause some pretty terrible semantic code (after all there is a reason it is usually stated as the checkbox HACK).
事实上，有可能使用复选框 hack 来使用纯 CSS 和浏览器元素行为来实现这一点，但是在撰写本文时，它正在推动应该用 CSS 完成什么与可以用 CSS 完成什么。它也可能导致一些非常糟糕的语义代码（毕竟它通常被声明为复选框HACK是有原因的）。
Having said that, you could use it if you only have requirements for modern browsers, giving limited functionality to others and I have myself used this in production code, on an isolated chrome only project and it is pretty fun to play with.
话虽如此，如果您只对现代浏览器有要求，则可以使用它，为其他人提供有限的功能，我自己在生产代码中使用它，在一个孤立的 chrome 项目中使用它，玩起来很有趣。
Here is a link to read more on it:
这是一个可以阅读更多内容的链接：
http://css-tricks.com/the-checkbox-hack/
http://css-tricks.com/the-checkbox-hack/
But again to stress, like others have on here already, that functional behaviour should really be done via JavaScript. Unless you actually want a hover based menu solution then that is a different question all together!
但是再次强调，就像其他人已经在这里一样，函数式行为应该真正通过 JavaScript 来完成。除非你真的想要一个基于悬停的菜单解决方案，否则这是一个不同的问题！
回答by Gildas.Tambo
a pure css solution to your problem looks like this
您的问题的纯 css 解决方案如下所示
Demo: http://jsfiddle.net/HyGZf/1/
演示：http: //jsfiddle.net/HyGZf/1/
you need inputand labeland you have to remove the hrefon portfolio if you only want to use css
您需要输入和标签，如果您只想使用css，则必须删除投资组合上的href
you can add transition: all 1s ease-in-out;to the submenuif you want it to be animate
你可以添加transition: all 1s ease-in-out; 到子菜单，如果你希望它是有生命的
/**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;
display:block;
width:100%;
}
/**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;
}
#Portfolio:checked +ul ul#submenu{
height:80px;
}
#submenu{
overflow:hidden;
height:0px;
margin:0;
}
a[accesskey="2"]{
color:blue;
cursor:pointer;
text-decoration:underline;
}
the markup
标记
<div class="clearfix"></div>
<nav>
<input id="Portfolio" type="checkbox" name="menu" hidden>
<ul>
<li><a href="index.html" accesskey="1"> Home </a> </li>
<li><label for="Portfolio"><a accesskey="2"> Portfolio </a></label> </li>
<ul id=submenu type="list">
<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>
回答by BenM
You will need to do this using javascript and registering a click event handler to perform your action.
您需要使用 javascript 并注册一个点击事件处理程序来执行您的操作。
If you're new to everything then you should look for some javascript tutorials (don't use W3Schools, look elsewhere) and then look at some jQuery tutorials as jQuery simplifies tasks like these.
如果您对所有内容都不熟悉，那么您应该查找一些 javascript 教程（不要使用 W3Schools，请查看其他地方），然后查看一些 jQuery 教程，因为 jQuery 简化了此类任务。
回答by Eran H.
There are many frameworks that you can use with good looking menus for your needs, not to mention they support all devices (tablets, phones and PCs).
有许多框架可以与漂亮的菜单一起使用以满足您的需求，更不用说它们支持所有设备（平板电脑、手机和 PC）。
For example in the twitter bootstrap framework there is exactly what you need, check this tutorial: Twitter bootstrap - Navs
例如，在 twitter bootstrap 框架中，这正是您所需要的，请查看本教程： Twitter bootstrap - Navs
Read the whole Nav section, at the end they talk about Nav with dropdown for more options. The menu of the tutorial itself is built with the Twitter bootstrap framework.
阅读整个 Nav 部分，最后他们讨论了带有下拉菜单的 Nav 以获得更多选项。教程本身的菜单是使用 Twitter 引导框架构建的。
回答by Godly Mathew
$('#open').on('click', function(e) {
simple_showpopup("popup", e);
});
function simple_showpopup(id, evt) {
var _pnl = $("#" + id);
_pnl.show();
_pnl.css({
"left": evt.pageX - ($("#" + id).width() / 2),
"top": (evt.pageY + 10)
});
$(document).on("mouseup", function(e) {
var popup = $("#" + id);
if (!popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide();
$(this).off(e);
}
});
}
$("#popup").hide();.defa-context-panel {
border: 1px solid black;
position: absolute;
min-width: 200px;
min-height: 150px;
background-color: #f8f8f8;
border: solid 1px #f2f2f2;
border-radius: 10px;
padding: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Open <span id="open" style="text-decoration:underline;color:blue;cursor:pointer">Click here</span>
<div id="popup" class="defa-context-panel">Content
<div>DIV inside</div>
</div>