CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Cornwell
Cornwell

Reputation: 3410

Expand menu, show submenu

I'm trying to create an "expandable" menu. So, if a user clicks on option A two suboptions should show up. I'm trying to do something like this but in a menu...

This is my code so far...

<li>
 <a href="?op=1" data-toggle="collapse" data-target=".nav-collapse88"><i class="icon-picture icon-white"></i> Galleries</a>
                        <div class="nav-collapse88">
                            <ul>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Add</a>
                                  </li>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Delete</a>
                                  </li>
                             </ul>
                        </div>
                      </li>

So when I click on galleries the options Add and Delete should appear. Any suggestions?

Upvotes: 1

Views: 5575

Answers (4)

dahliacreative
dahliacreative

Reputation: 441

I would nest ul's like so:

<ul>
   <li>
      <a class="expand">Link used to expand</a>
      <ul>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
      </ul>
  </li>
</ul>

The I would use this jquery:

$(document).on('click', 'a.expand', function(e) {
  e.preventDefault();
  $(this).siblings('ul').slideToggle();
});

You would need to set the sub menu CSS to display none.

Something along these lines should do the trick.

Upvotes: 4

Paul
Paul

Reputation: 1437

This works:

<ul>
  <li class="dropdown">
    <a href="?op=1">Support</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href=""><i class="icon-play"></i> Add</a></li>
      <li><a href=""><i class="icon-play"></i> Delete</a></li>
    </ul>
  </li>
</ul>

Upvotes: 1

Yorgo
Yorgo

Reputation: 2678

tyy this http://jsfiddle.net/68RXP/213/ 

$(function(){
        $(".nav-collapse88").hide();
        $("a").click(function(e){
            e.preventDefault();
            $(".nav-collapse88", $(this).parent()).slideToggle();        
        });
    })​
<li>
 <a href="?op=1">
     <i class="icon-picture icon-white"></i> Galleries</a>
                        <div class="nav-collapse88">
                            <ul>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Add</a>
                                  </li>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Delete</a>
                                  </li>
                             </ul>
                        </div>
                      </li>​

Upvotes: 0

Mark Meyer
Mark Meyer

Reputation: 3723

I believe you want the class to be dropdown not collapse. That's how the bootstrap documentation recommends it for menus.

Change the class to be dropdown, remove the inner div, and add the class dropdown-menu the inner ul.

<li class="dropdown">
<a href="?op=1" data-toggle="dropdown"><i class="icon-picture icon-white"></i>>Galleries</a>
                        <ul class="dropdown-menu">
                              <li>
                                <a href=""><i class="icon-play"></i> Add</a>
                              </li>
                              <li>
                                <a href=""><i class="icon-play"></i> Delete</a>
                              </li>
                         </ul>
                  </li>

Upvotes: 0

Related Questions