Question

有人可以帮助我在“Graduate”菜单中添加另一个子级别，如下面的屏幕截图所示。我尝试过一些东西，但都没有用。

例如：研究生 - ＆gt;（图像部分研究生1，研究生2，研究生3）

HTML：

<div class="contain-to-grid">
  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">Logo</a></h1>
      </li>
      <li class="toggle-topbar menu-icon">
        <a href="#"><span>Menu</span></a>
      </li>
    </ul>
    <section class="top-bar-section">
      <ul class="left">
        <li class="divider"></li>
        <li>
          <a href="#">University</a>
        </li>
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Programs</a>
          <ul class="dropdown m-menu">
            <li>
              <div class="row">
                <div class="medium-4 column">
                  <h3>Undergraduate</h3>
                  <ul>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Admissions</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Academics</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fields of Study</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Useful Contacts</a>
                    </li>
                  </ul>
                </div>
                <!--end of .column-->
                <div class="medium-4 column">
                  <h3>Graduate</h3>
                  <ul>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Admissions</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Academics</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fields of Study</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
                    </li>
                  </ul>
                </div>
                <!--end of .column-->
                <div class="medium-4 column">
                  <h3>Online Learning</h3>
                  <ul>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Why e-learning?</a
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Studies</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Date & Deadlines</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Contact</a>
                    </li>
                  </ul>
                </div>
                <!--end of .column-->
              </div>
              <!--end of .row-->
              <div class="row">
                <div class="medium-4 column">
                  <h3>Read</h3>
                  <a href="#" class="intro">
                    <i class="icon-play"></i>
                    <img src="https://unsplash.it/400/280?image=532" />
                  </a>
                </div>
                <!--end of .column-->
                <div class="medium-4 column">
                  <h3>Build</h3>
                  <a href="#" class="intro">
                    <i class="icon-play"></i>
                    <img src="https://unsplash.it/400/280?image=534" />
                  </a>
                </div>
                <!--end of .column-->
                <div class="medium-4 column">
                  <h3>Enjoy</h3>
                  <a href="#" class="intro">
                    <i class="icon-play"></i>
                    <img src="https://unsplash.it/400/280?image=452" />
                  </a>
                </div>
                <!--end of .column-->
              </div>
              <!--end of .row-->
            </li>
          </ul>
        </li>
        <li class="divider"></li>
        <li>
          <a href="#">Research</a>
        </li>
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Studies</a>
          <ul class="dropdown m-menu">
            <li>
              <div class="row">
                <div class="medium-6 column show-for-medium-up">
                  <img src="https://unsplash.it/380/220?image=668" />
                  <div class="info-wrap">
                    <div class="info info-visible">
                      <h3>Select your program...</h3>
                      <p>More info...</p>
                    </div>
                    <div class="info">
                      <h3>Undergraduate Studies</h3>
                      <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
                    </div>
                    <div class="info">
                      <h3>Graduate Studies</h3>
                      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.</p>
                    </div>
                    <div class="info">
                      <h3>Internships</h3>
                      <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae adipisci velit, sed quia non numquam eius.</p>
                    </div>
                    <div class="info">
                      <h3>Other Studies</h3>
                      <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
                    </div>
                    <div class="info">
                      <h3>Useful Contacts</h3>
                      <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat adipisci velit, sed quia non numquam eius.</p>
                    </div>
                  </div>
                  <!-- .info-wrap -->

                </div>
                <!--end of .column-->
                <div class="medium-6 column">
                  <h3>Programs</h3>
                  <ul class="is-hover">
                    <li><a href="#"><i class="icon-circle-right"></i>Undergraduate</a></li>
                    <li><a href="#"><i class="icon-circle-right"></i>Graduate</a></li>
                    <li><a href="#"><i class="icon-circle-right"></i>Internships</a></li>
                    <li><a href="#"><i class="icon-circle-right"></i>Other</a></li>
                    <li><a href="#"><i class="icon-circle-right"></i>Contact</a></li>
                  </ul>
                </div>
                <!--end of .column-->
              </div>
              <!--end of .row-->
            </li>
          </ul>
        </li>
        <li class="divider"></li>
        <li>
          <a href="#">Student Life</a>
        </li>
        <li class="divider"></li>
      </ul>
    </section>
  </nav>
</div>
<!--end .contain-to-grid-->

<h2 class="dt">Responsive Mega Menus with Foundation 5</h2>

<p class="p">Demo by George Martsoukos. <a href="http://www.sitepoint.com/building-responsive-mega-menu-foundation" target="_blank">See article</a>.</p>

的jQuery / JavaScript的：

$(document).foundation();

// below does the "Programs" info switch
$('.is-hover a').on('mouseover', function() {
  var idx = $(this).parent().index() + 2;
  $('.info:nth-child(' + idx + ')').addClass('info-visible');
  $('.info:nth-child(' + idx + ')').siblings().removeClass('info-visible');
});

$('.dropdown').on('mouseout', function() {
  $('.info:nth-child(1)').addClass('info-visible').siblings().removeClass('info-visible');
});

基础5的超级菜单下拉列表添加了另一个子级别

0 个答案: