Question

我想为响应式HTML创建一个多级菜单。

活动
- 2012年活动
- 2013年活动
  - 伦敦
  - 巴黎
  - 纽约
- 2014年活动
  - 柏林
  - 莫斯科
  - 开普敦
- 2015年活动
- 2016年活动
- 2017年活动

第二级菜单，即2012年活动，2013活动如果项目太多则应该是滑动项目，即会有下一个/上一个箭头。

当我将鼠标悬停在2014年活动上时，它应该会打开一个下拉菜单。

我如何才能实现此功能？

提前致谢。

Answer 1

尝试使用此响应式菜单

<div id="left_container"></div>
<div class="container">
<a class="toggleMenu" href="#">Menu</a>

    <ul class="nav NormalMenu">
        <li class="test">   <a href="#">HOME</a>

        </li>
        <li>    <a href="#">LOCATIONS</a>

            <ul >
                <li>    <a href="#">Boroughs</a>

                    <ul >
                        <li>    <a href="#">Enfield</a>

                            <ul>
                                <li><a href="#">E_Locations</a>
                                </li>
                                <li><a href="#">E_Unit Bases</a>
                                </li>
                                <li><a href="#">E_Parking</a>
                                </li>
                            </ul>
                        </li>
                        <li> <a href="#">Barnet</a>

                            <ul>
                                <li><a href="#">B-Locations</a>
                                </li>
                                <li><a href="#">B-Unit Bases</a>
                                </li>
                                <li><a href="#">B-Parking</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>    <a href="#">Maps</a>

                    <ul >
                        <li>    <a href="#">Enfield map</a>

                            <ul>
                                <li><a href="#">ME-Locations</a>
                                </li>
                                <li><a href="#">ME-Unit Bases</a>
                                </li>
                                <li><a href="#">ME-Parking</a>
                                </li>
                            </ul>
                        </li>
                        <li>    <a href="#">Barnet Map</a>

                            <ul>
                                <li><a href="#">MB-Locations</a>
                                </li>
                                <li><a href="#">MB-Unit Bases</a>
                                </li>
                                <li><a href="#">MB-Parking</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>    <a href="#">CONTACT</a>

        </li>
        <li>    <a href="#">LINKS</a>

        </li>
    </ul>
</div>
<div id="right_container">&nbsp;</div>

DEMO1

DEMO2

Answer 2

我终于找到了我想要的解决方案。 http://jsfiddle.net/rjbd5g3o/1/就在这里。

在这个示例中，我没有显示主要项目，例如主页，事件，领导等。在实际项目菜单中，项目可用作导航项目，当我将鼠标悬停在事件上时，它将打开我在{中显示的下拉垂直菜单{3}}

<section id="introduction">
    <div class="menu_wrapper">
      <div id="example" class="year_menu">
        <div class="slideshow parent" data-visible="4" data-pagination="false">
          <ul class="carousel">
            <li class="slide" id="2013_events"><a href="lead-meetings.html">2013 Events</a></li>
            <li class="slide active" id="2014_events"><a href="lead-meetings-2014.html">2014 Events</a></li>
            <li class="slide" id="2015_events"><a href="lead-meetings-2015.html">2015 Events</a></li>
            <li class="slide" id="2016_events"><a href="javascript:;">2016 Events</a></li>
            <li class="slide" id="2017_events"><a href="javascript:;">2017 Events</a></li>
            <li class="slide" id="2018_events"><a href="javascript:;">2018 Events</a></li>
            <li class="slide" id="2019_events"><a href="javascript:;">2019 Events</a></li>
            <li class="slide" id="2020_events"><a href="javascript:;">2020 Events</a></li>
          </ul>
        </div>
        <div class="slideshow child" data-visible="4" data-pagination="false">
          <ul class="carousel">
            <li class="slide" id="2013_events_child">
              <a href="speakers-info.html">Belfast</a>
              <a href="speakers-info.html">Dublin</a>
              <a href="speakers-info.html">Manchester</a>
              <a href="speakers-info.html">London</a>
              <a href="speakers-info.html">Berlin</a>
              <a href="speakers-info.html">Paris</a>
            </li>
            <li class="slide" id="2014_events_child">
              <a href="speakers-info.html">Prague</a>
              <a href="speakers-info.html">Madrid</a>
              <a href="speakers-info.html">Verona</a>
            </li>
            <li class="slide" id="2015_events_child">
              <a href="speakers-info.html">Lyon</a>
              <a href="speakers-info.html">Rotterdam</a>
              <a href="speakers-info.html">Toulouse</a>
              <a href="speakers-info.html">Cork</a>
              <a href="speakers-info.html">Paris</a>
            </li>
            <li class="slide" id="2016_events_child">&nbsp;</li>
            <li class="slide" id="2017_events_child">&nbsp;</li>
            <li class="slide" id="2018_events_child">&nbsp;</li>
            <li class="slide" id="2019_events_child">&nbsp;</li>
            <li class="slide" id="2020_events_child">&nbsp;</li>
          </ul>
        </div>
      </div>
    </div>
    </section>

希望我的例子对其他人有用。

谢谢， Rakshit Maniar

带下拉菜单的JS菜单滑动主要项目

2 个答案:

DEMO1

DEMO2