CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Yassine Kira
Yassine Kira

Reputation: 29

Bootstrap add close button on dropdown menu

I am new in Bootstrap and I would like to know how to add a close button on dropdown menu.

Instead of the default Bootstrap response to toggle the menu once we click outside of it or when we click on 'no submenu items' I would like to add a close button and make it the responsible for toggling it. The close button must goes on both menu and its submenu "see picture and the position of the close icon"

Screenshot

The code am working in " dropdown menu item is 'The Magazine' and the 'Travel solo' is the submenu item ": http://www.bootply.com/qYOW7v2DcM

Any suggestions would be appreciate!

Upvotes: 2

Views: 6376

Answers (1)

Grizzly
Grizzly

Reputation: 5953

In the beginning of your html, specifically this line:

<ul class="dropdown-menu">

you can add this line to make an x close button.

<button type="button" class="close">&times;</button>

maybe even put the button in its own <li></li> element like so:

<ul class="dropdown-menu">
    <li><button type="button" class="close">&times;</button></li>

Then in your sub-menu's you can use the same concept.

<li class="menu-item dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">TRAVEL SOLO <i class="fa fa-play" aria-hidden="true"></i></a>
    <ul class="dropdown-menu">
        <li><button type="button" class="close">&times;</button></li>

Let me know if that helps.

Upvotes: 3

Related Questions