在单击CSS上创建下拉菜单 [英] Creating Drop Down Menu on click CSS

问题描述

我试图粉碎一个页面给我，希望是许多客户之一！它们需要菜单5个选项，当点击某个选项时，会出现一个新的子菜单。我完全不知道怎么做，所以，如何做到这一点，我在这里寻找的时间只有遇到失败。

I'm trying to smash out a page for my, hopefully one of many clients! They require a menu 5 options, upon clicking a certain one a new sub menu is to appear. I have absolutely no idea what-so-ever on how to do this, I've looked for hours on here to only be met with failure.

HTML

     <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>

CSS

 /**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;

}

推荐答案

没有点击处理程序。因为这个原因，使用标准CSS是不可能的。你可以使用一些叫做复选框hack的东西，但是在我看来，这有点笨拙，使用一个导航菜单内部工作是不方便的，像你的用例要求。因为这个原因，我建议jQuery或Javascript ...这是一个相当简单的解决方案使用jQuery。

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.

基本上，我们隐藏子导航从开始使用<$然后，使用jQuery，当点击.parent时，我们切换一个类.visible到sub-nav元素（嵌套的UL）， display：block; ，使其出现。

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.

请注意，为了使这个工作，每个嵌套< UL> 这是一个sub-nav必须有 .sub-nav 类，它的父元素（< LI> ）必须拥有 .parent 此外，由于这使用jQuery，你将需要一个jQuery库到你的网站。您可以自行托管，并像平常一样连接它，也可以通过 google的图书馆服务（推荐）。

Note that for this to work, every nested <UL> which is a "sub-nav" MUST have the .sub-nav class, and it's parent element (the <LI>) MUST have the .parent class. 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).

JSFiddle演示

HTML ：

<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：

#nav ul.sub-nav {
    display: none;
}

#nav ul.visible {
    display: block;
}

jQuery： b

$(document).ready(function() {
    $('.parent').click(function() {
        $('.sub-nav').toggleClass('visible');
    });
});

这篇关于在单击CSS上创建下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！