15

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

4

8 回答 8

15

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

于 2014-09-23T09:25:50.713 回答
12

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

基本上，我们从一开始就隐藏子导航，display: none; 然后，使用 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>

于 2013-09-13T13:03:22.793 回答
4

我当然迟到了，但是：

您可以使用 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，这是行不通的。

于 2014-09-23T08:34:09.793 回答
1

事实上，有可能通过使用复选框 hack 来使用纯 CSS 和浏览器元素行为，但是在撰写本文时，它正在推动 CSS 应该做什么与​​ CSS 可以做什么。它还可能导致一些非常糟糕的语义代码（毕竟它通常被称为复选框HACK是有原因的）。

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

这是一个阅读更多内容的链接：

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

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

于 2013-09-13T13:29:05.593 回答
0

您可以使用许多框架来满足您的需求，并使用美观的菜单，更不用说它们支持所有设备（平板电脑、手机和 PC）。

例如，在 twitter bootstrap 框架中，您所需要的正是您所需要的，请查看本教程： Twitter bootstrap - Navs

阅读整个 Nav 部分，最后他们会讨论带有下拉菜单的 Nav 以获得更多选项。教程本身的菜单是使用 Twitter 引导框架构建的。

于 2013-09-13T12:47:26.440 回答
0

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

如果你是新手，那么你应该寻找一些 javascript 教程（不要使用 W3Schools，看看别处），然后查看一些 jQuery 教程，因为 jQuery 简化了这些任务。

于 2013-09-13T12:43:33.833 回答
0

您的问题的纯 CSS 解决方案如下所示

演示：http: //jsfiddle.net/HyGZf/1/

您需要输入和标签，如果您只想使用css ，则必须删除投资组合上的href

您可以添加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;
}

标记

    <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>
于 2013-09-13T13:55:43.433 回答
0 

 $('#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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>Open&nbsp;&nbsp;&nbsp;&nbsp;<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>

于 2015-07-28T05:29:46.353 回答