asked on

Bootstrap dropdown and sub-dropdown

Good morning all !

I ask for your help on the following problem.
I'm trying to scroll down the list of languages or currencies in my main dropdown but I can not.

Do you have an idea?
thank you in advance

<div class="dropdown">
<button class="btn btn-light dropdown-toggle border" type="button" data-toggle="dropdown"><?php echo LANGUE_DEVISE_TTR; ?></button>
<div class="dropdown-menu" style="width:200px; padding:10px">

	<div class="txt_gras mb-1 small"><?php echo LANGUE_DEVISE_01; ?></div>
	<div class="dropdown mb-3">
		<button class="btn btn-sm btn-light btn-block dropdown-toggle border" type="button" data-toggle="dropdown"><?php echo LANGUE_DEVISE_01; ?></button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">Français</a>
			<a class="dropdown-item" href="#">English</a>
		</div>
	</div>

<div class="dropdown-menu"></div>

	<div class="txt_gras mb-1 small"><?php echo LANGUE_DEVISE_02; ?></div>
	<div class="dropdown">
		<button class="btn btn-sm btn-light btn-block dropdown-toggle border" type="button"><?php echo $MNY_Franc." ".$MNY_Symbole; ?></button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">USD</a>
			<a class="dropdown-item" href="#">EUR</a>
			<a class="dropdown-item" href="#">XOF</a>
		</div>
	</div>

</div>
</div>

Open in new window

Nicolas Lecanu

Hi Ahmad Jaber,

You want to use the values of your dropdown menu or you have a visual effect problem on the dropdown menu ?

Jaber Ahmad

ASKER

Hi Nicolas and thank you for looking into my problem.

In a dropdown, I added 2 more dropdowns.
When I click on the main, the other two do not take place. Can you test on this link please ?
https://www.sivop.com/taux_change_all.php

Nicolas Lecanu

To help you make that I tried this:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">                                    
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">DropDown
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">languages <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Français</a></li>
          <li><a tabindex="-1" href="#">English</a></li>
        </ul>
      </li>
	  <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">currencies  <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">USD</a></li>
          <li><a tabindex="-1" href="#">EUR</a></li>
		  <li><a tabindex="-1" href="#">XOF</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>

Open in new window

You can take it as exemple for you page.

ASKER CERTIFIED SOLUTION

Jaber Ahmad

membership

This solution is only available to members.

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

Start Free Trial

Nicolas Lecanu

Nice job Ahmad Jaber, you're welcome.