如何制作适用于移动设备的可点击下拉菜单？

I am currently building a small website and through using a tutorial (link) I created a menu that when hovered over is revealing submenu's hidden under it. I have an average knowledge in HTML and CSS but never done any scripting myself.

我目前正在建立一个小型网站,并通过使用教程(链接)我创建了一个菜单,当盘旋时显示隐藏在其下的子菜单。我对HTML和CSS有一般的了解,但我自己从未做过任何脚本编写。

How would I go about making it toggle on click instead of hovering so it can be browsed on mobile phones and tablets properly which is its planned use?

如何在点击时进行切换而不是悬停,以便可以在手机和平​​板电脑上正确浏览,这是计划使用的?

Code

The following code is also available as a jsfiddle.

以下代码也可用作jsfiddle。

HTML

<div>
    <nav>
   <div class="menu-item alpha">
      <h4><a href="#">Sida 1</a></h4>
      <ul>
        <li><a href="#">Sida 1</a></li>
        <li><a href="#">Sida 2</a></li>
        <li><a href="#">sida 3</a></li>
      </ul>
    </div>

    <div class="menu-item">
      <h4><a href="#">Sida 2</a></h4>
      <ul>
        <li><a href="#">Sida 1</a></li>
        <li><a href="#">Sida 2</a></li>
        <li><a href="#">Sida 3</a></li>
      </ul>
    </div>

    <div class="menu-item">
      <h4><a href="#">Sida 3</a></h4>
      <ul>
        <li><a href="#">Sida 1</a></li>
        <li><a href="#">Sida 2</a></li>
        <li><a href="#">Sida 3</a></li>
      </ul>
    </div>
    </nav>
</div>

CSS

nav {
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  line-height: 1.5;
  margin: 50px auto; /*for display only*/
  width: 200px;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.menu-item {
  background: #fff;
  width: 200px; 
}
/*Menu Header Styles*/
.menu-item h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #a90329;
}
.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 200px;
}
/*Menu Header Styles*/
.menu-item h4 {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;

  /*Gradient*/
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover{  
  background: #cc002c; /* Old browsers */
  background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
*First Item Styles*/
.alpha p {
    font-size: 13px;
    padding: 8px 12px;
    color:#F00 ;
}/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}

.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #000;
  display: block;
  width: 200px;
}

/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #eee;
}

.menu-item li:hover {
  background: #eee;
}
/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px; /*Collapses the menu*/
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;

  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}


.menu-item:hover ul {
height: 93px;}

6 个解决方案

#1

It is possible using CSS, although you'll have to change your markup a little. You can get the effect you are looking for using checkboxes and labels, along with the adjacent sibling CSS selector:

使用CSS是可能的,尽管你必须稍微改变你的标记。您可以使用复选框和标签以及相邻的兄弟CSS选择器来获得您正在寻找的效果:

HTML

<input id="sida1" type="checkbox">
<div class="menu-item alpha">
    <label for="sida1"><a>Sida 1</a></label>
    <ul>
        <li><a href="#">Sida 1</a></li>
        <li><a href="#">Sida 2</a></li>
        <li><a href="#">sida 3</a></li>
    </ul>
</div>

CSS

input[type=checkbox]{display:none}
input[type=checkbox]:checked + .menu-item ul {
    height: 93px;
}

I've swapped your <h4>s out with labels and displayed them as blocks. I've also removed the href attribute for each header's link, as it hashes the URL and prevents the checkbox ever getting checked.

我已将

与标签交换出来并将其显示为块。我还删除了每个标题链接的href属性,因为它会散列URL并阻止复选框被检查。

JSFiddle

#2

I have created Fiddle.

我创造了小提琴。

jQuery

$(function() {
    $( ".menu-item" ).each(function() {
        $( ".menu-item" ).click(function() {
          $( "ul",this).slideToggle(75);
        });
    });
});

#3

Unfortunately, the route chosen by using the pseudo-property :hover as a selector to animate the transition leaves us very little room to work with. They are usually used to style a link, but can be applied to other elements (in this case, ul) - but using the other selectors available doesn't give us the desired effect. I would suggest using Javascript or a library like jQuery, which simplifies a lot of animation operations. See this example as a replacement, which does exactly what you want: http://jqueryui.com/accordion/

不幸的是,使用伪属性选择的路由:将鼠标悬停为选择器以设置过渡动画,这使我们几乎没有空间可以使用。它们通常用于设置链接样式,但可以应用于其他元素(在本例中为ul) - 但使用其他可用选择器并不能提供所需的效果。我建议使用Javascript或像jQuery这样的库,这简化了很多动画操作。请参阅此示例作为替换,它完全符合您的要求:http://jqueryui.com/accordion/

When starting out fresh with a new site today I would also consider a modern template like Bootstrap (http://getbootstrap.com), which starts you out with clean code using the newest technology while providing backwards-compatibility, sparing you a lot of possible frustration debugging in the future!

今天开始使用新网站时,我还会考虑使用像Bootstrap这样的现代模板(http://getbootstrap.com),它可以使用最新技术为您提供干净的代码,同时提供向后兼容性,让您节省大量资源。未来调试可能会受挫!

#4

You can simply use Accordion Jquery Plugins, there a lot of it. One Example is : bassistance

您可以简单地使用Accordion Jquery插件,其中有很多。一个例子是:低音

But you could change the example from designshack into click, I just modified it. You can check at : this fiddle

但是你可以将如图所示的示例更改为click,我只是修改了它。你可以查看:这个小提琴

$(function(){
    $('.menu-item').click(function(){
        var uls = $(this).find("ul");
        $('.menu-item').removeClass("active");
        $(this).addClass("active");
        $('.menu-item').find("ul").slideUp(200, function(){
            uls.slideDown(500);
        });   
    });
});

#5

you can do it using jQuery.

你可以用jQuery做到这一点。

Here is demo for it

这是演示

#6

It's much easier to help if you set up the working code on jsfiddle but to answer your question, you could use simple javascript to toggle the class onClick. The class will do what it currently does on hover to show submenu.

如果你在jsfiddle上设置工作代码但是要回答你的问题,你可以使用简单的javascript来切换onClick类。该类将执行当前在悬停以显示子菜单时所执行的操作。

You can also use a css library which would have dropdows, navs, etc.

你也可以使用一个带有dropdows,navs等的css库。

http://jsfiddle.net/c768Q/21/ is the working demo js fiddle for what you asked for. Something like this,

http://jsfiddle.net/c768Q/21/是你要求的工作演示js小提琴。像这样的东西,

$( ".menu-item" ).click(function() { $(this).find("ul").toggleClass("add-height"); });

$(“。menu-item”)。click(function(){$(this).find(“ul”)。toggleClass(“add-height”);});