CODEWITHSUNDEEP
jqueryhtmltwitter-bootstraptwitter-bootstrap-3
Mihai Zamfir
Mihai Zamfir

Reputation: 2166

Bootstrap dropdown on a div

I have this div:

<div class = 'top-bar' id='top-bar-accounts'>
     <img src={{ user.MoreAboutUser.get_profile_photo_url }} alt = "Thumbnail" />
     <div> <strong>{{ user.username }}</strong> </div>
</div>

{{ user. }} are some fields which are generated, they are not important.

How exactly can I make a dropdown menu on this div? I want to populate it with 2 options: Edit Profile and Logout. What should I write and what should I write exactly in the html header?

Upvotes: 0

Views: 1156

Answers (2)

mark1234
mark1234

Reputation: 1121

The element type shouldn't matter. You just need the appropriate selector in the function. I did one like this:

<ul class="nav navbar-nav navbar-right">
                    <li id="theme_selector" class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Theme <b class="caret"></b></a>
                        <ul id="theme" class="dropdown-menu" role="menu">
                            <li><a href="#">Amelia</a></li>
                            <li><a href="#">Cerulean</a></li>
                            <li><a href="#">Cyborg</a></li>
                            <li><a href="#">Cosmo</a></li>
                            <li><a href="#">Darkly</a></li>
                            <li><a href="#">Flatly</a></li>
                            <li><a href="#">Lumen</a></li>
                            <li><a href="#">Simplex</a></li>
                            <li><a href="#">Slate</a></li>
                            <li><a href="#">Spacelab</a></li>
                            <li><a href="#">Superhero</a></li>
                            <li><a href="#">United</a></li>
                            <li><a href="#">Yeti</a></li>
                        </ul>
                    </li>
                </ul>

Here's the function that responds to a change in an li element inside a UL whose ID is theme:

$('#theme li').click(function () {
        //alert('item: ' + $(this).text());
        switch_style($(this).text());
    });

Upvotes: 0

Simon C
Simon C

Reputation: 9508

In it's simplest form, your bootstrap menu would look something like this: 

<!-- Your navbar -->
<nav class="navbar navbar-default" role="navigation"> 

    <!-- A container for menu items -->
    <div class="container-fluid">

      <!-- A list of items that will float right -->
      <ul class="nav navbar-nav navbar-right">

        <!-- Your dropdown menu item -->
        <li class="dropdown"> 

          <!-- Define your dropdown menu item -->
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="{{ user.MoreAboutUser.get_profile_photo_url }}" width="25" height="25" alt = "Thumbnail" /><strong>{{ user.username }}</strong> <b class="caret"></b>
          </a>

          <!-- The list of dropdown menu items -->
          <ul class="dropdown-menu">
            <li><a href="#">Edit Profile</a></li>
            <li><a href="#">Logout</a></li>
          </ul>

        </li>
      </ul>
  </div>
</nav>

Here is a fiddle: http://jsfiddle.net/nzcKY/

You will need to import:

  • The bootstrap css
  • The bootstrap js
  • jQuery

Upvotes: 1

Related Questions