asked on

Show three menu choices

I'm not really sure how to go about this and am looking for some direction. I have a large menu with about 20 main menu choices and each main menu choice has about 10 sub menu choices. I would like to only show three of the sub menu choices at a time and have a "View All" button that will expand the menu and show all 10 sub-men choices? CSS? jQuery?

Julian Hansen

Here is some code and working sample - this is to demonstrate the concept

<style type="text/css">
ul {
  list-style: none;
  width: 100%;
  margin: 0;
  background: #252525;
  padding: 0;
}
ul li a {
  width: 100%;
  display: block;
  padding: 15px;
  background: #252525;
  color: #999;
  line-height: 25px;
}
li {
  border-bottom: 1px solid #444;
}
ul ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid #444;
}
nav ul ul li a {
  padding-left: 40px;
}
nav > ul > li > ul {
  display: none;
}
nav > ul > li:hover > ul.submenu {
  display: block;
}
.noshow {
  display: none;
}
</style>

Open in new window

HTML

      <nav class="col-lg-3">
        <ul class="">
          <li><a href="#">Menu option 1</a>
            <ul class="submenu">
              <li><a href="#">Sub Menu 1</a></li>
              <li><a href="#">Sub Menu 2</a></li>
              <li><a href="#">Sub Menu 3</a></li>
              <li class="sublinks noshow"><a href="#">Sub Menu 4</a></li>
              <li class="sublinks noshow"><a href="#">Sub Menu 5</a></li>
              <li class="sublinks noshow"><a href="#">Sub Menu 6</a></li>
              <li><a href="#" class="viewmore">View more ...</a></li>
            </ul>
          </li>
          <li><a href="#">Menu option 2</a></li>
          <li><a href="#">Menu option 3</a></li>
          <li><a href="#">Menu option 4</a></li>
          <li><a href="#">Menu option 5</a></li>
          <li><a href="#">Menu option 6</a></li>
          <li><a href="#">Menu option 7</a></li>
          <li><a href="#">Menu option 8</a></li>
          <li><a href="#">Menu option 9</a></li>
          <li><a href="#">Menu option 10</a></li>
          <li><a href="#">Menu option 11</a></li>
          <li><a href="#">Menu option 12</a></li>
          <li><a href="#">Menu option 3</a></li>
          <li><a href="#">Menu option 14</a></li>
          <li><a href="#">Menu option 15</a></li>
          <li><a href="#">Menu option 16</a></li>
          <li><a href="#">Menu option 17</a></li>
          <li><a href="#">Menu option 18</a></li>
          <li><a href="#">Menu option 19</a></li>
          <li><a href="#">Menu option 20</a></li>
        </ul>
      </nav>

Open in new window

Javascript

$(function() {
  $('.viewmore').click(function(e) {
    e.preventDefault();
    $(this).closest('ul').find('.sublinks').toggleClass('noshow');
    var text =  ($(this).text() == 'View more ...') ? 'View Less ...' : 'View more ...';
    $(this).html(text);
  });
});

Open in new window

Robert Granlund

ASKER

@Julian Is there a way to animate that? Like slide down slow and fade in?

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial