Twitter Bootstrap Question posted in

How can I implement a drop down clickable icon menu using Twitter BootStrap?

I am prettyn new in Twitter BootStrap and I have the following problem.

I know that BootStrap provide a drop down menu, something like this: http://getbootstrap.com/components/#dropdowns-example

Implementing in this way:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

As you can see it show a button with Dropdown as text and when the button is clicked the menu voices are shown.

Now my problem is that i want something like this but I need to have a clickable icon, when the icon is clicked the drop down menu is shown (as is in FaceBook where clicking on the down arrow in the main menu you obtain a sub menu related to your profile).

How can I implement something like this using BootStrap?

Tags:

3

Answers


  1. 0 
    <!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
  	style="background:url('https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png');background-size:cover;width:50px;height:50px">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

</div>

</body>
</html>

    You could do it like so… using css background and setting appropriate size

    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
    style="background:url('https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png');background-size:cover;width:50px;height:50px">
    Login or Signup to reply.
  2. 0

    Change this part

    Dropdown
<span class="caret"></span>

    to 

    <span class="glyphicon"></span>

    and replace the word ‘glyphicon’ with the corresponding name of the icon you want to use from Bootstrap’s glyphicon library

    eg. 

    <span class="glyphicon glyphicon-heart"></span>

    for a heart icon on your dropdown

    Login or Signup to reply.
  3. 0

    Simply replace your code 

    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>

    to

    <a class="dropdown-toggle" type="button" data-toggle="dropdown"><img src="http://www.futuregensoftwares.com/images/facebook_icon.gif"></a>

    You can replace your img source with whichever icon you desire, add some additional style to make it awesome.
    For Eg. I’ve used facebook’s icon.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search