单击CSS创建下拉菜单

Question

我需要构建一个包含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>

Answer 1

除了已经提到的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>

Answer 2

CSS没有点击处理程序.因此,使用标准CSS是不可能的.你可以使用一个叫做复选框hack的东西,但在我的拙见中,它有点笨拙,并且在你的用例需要的导航菜单中工作会很尴尬.出于这个原因,我建议使用jQuery或Javascript ......这是一个使用jQuery的简单解决方案.

基本上,我们display: none; 使用jQuery 隐藏子导航然后,使用jQuery,当单击".parent"时,我们将类".visible"切换到子导航元素(嵌套的UL)display: block;,使其出现.再次单击时,它会在删除类时消失.

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

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>

Answer 3

我当然迟到了，但是：

你可以使用 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，如果你需要旧浏览器的 borwser 支持，这是行不通的。