CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmenudropdown
mathieu
mathieu

Reputation: 29

How to open by default the Bootstrap menu?

I have a site with "Bootstrap 3.3.7" and I want the menu to be opened by default.

Here is my HTML code :

<div id="#block-menuprincipal">
<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fas fa-plus-circle fa-lg"></i> Menu principal</a>
    <ul class="dropdown-menu">
      <li>
        <a href="/profil" data-drupal-link-system-path="profil"><i class="fas fa-id-card fa-lg"></i> Profils</a>
      </li>
      <li>
        <a href="/boutique" data-drupal-link-system-path="boutique"><i class="fas fa-shopping-bag fa-lg"></i> Boutiques</a>
      </li>
      <li>
        <a href="/produit" data-drupal-link-system-path="produit"><i class="fas fa-gift fa-lg"></i> Produits</a>
      </li>
      <li>
        <a href="/service" data-drupal-link-system-path="service"><i class="fas fa-sign-language fa-lg"></i> Services</a>
      </li>
      <li>
        <a href="/groupe" data-drupal-link-system-path="groupe"><i class="fas fa-users fa-lg"></i> Groupes</a>
      </li>
      <li>
        <a href="/annonce" data-drupal-link-system-path="annonce"><i class="fas fa-newspaper fa-lg"></i> Annonces</a>
      </li>
      <li>
        <a href="/article" data-drupal-link-system-path="article"><i class="fas fa-file-alt fa-lg"></i> Articles</a>
      </li>
      <li>
        <a href="/discussion" data-drupal-link-system-path="discussion"><i class="fas fa-comments fa-lg"></i> Discussions</a>
      </li>
      <li>
        <a href="/recette" data-drupal-link-system-path="recette"><i class="fas fa-utensils fa-lg"></i> Recettes</a>
      </li>
      <li>
         <a href="/itineraire" data-drupal-link-system-path="itineraire"><i class="fas fa-map-signs fa-lg"></i> Itinéraires</a>
      </li>
      <li>
        <a href="/evenement" data-drupal-link-system-path="evenement"><i class="fas fa-calendar fa-lg"></i> Événements</a>
      </li>
    </ul>
  </li>
</ul>
</div>

how to tell bootstrap to open the menu by default ?

The path to open is #block-menuprincipal .dropdown

If I try the following code, Bootstrap or Drupal automatically deletes the class open :

$("#block-menuprincipal .dropdown").addClass('open');

I want to open with JS but I do not know the code :

$("#block-menuprincipal .dropdown").dropdown('show');
});

The code above does not work because the class open is added to <ul class="nav navbar-nav"> normally she should be added to <li class="dropdown">

Here is the link of the page https://www.s1biose.com you have to click on the menu at the top left. The "Main Menu" should be opened by default.

UPDATE

After several tests, collapse causes the closing of the menu.

I added this code to open the menu after collapse, but it does not work :

$('#navbar-collapse-first').on('show.bs.collapse', function () {
       $('#block-menuprincipal .dropdown').dropdown('show');
})

enter image description here

Upvotes: 0

Views: 274

Answers (2)

Nidhi
Nidhi

Reputation: 1453

I have changed jquery:

$('#block-menuprincipal').on('shown.bs.collapse', function () {  
    $(this).find(".dropdown-toggle").dropdown("toggle");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed btn btn-success" data-toggle="collapse" data-target="#block-menuprincipal" aria-expanded="false">
            menu
          </button>
        </div>

        <div id="block-menuprincipal" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fas fa-plus-circle fa-lg"></i> Menu principal</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="/profil" data-drupal-link-system-path="profil"><i class="fas fa-id-card fa-lg"></i> Profils</a>
                  </li>
                  <li>
                    <a href="/boutique" data-drupal-link-system-path="boutique"><i class="fas fa-shopping-bag fa-lg"></i> Boutiques</a>
                  </li>
                  <li>
                    <a href="/produit" data-drupal-link-system-path="produit"><i class="fas fa-gift fa-lg"></i> Produits</a>
                  </li>
                  <li>
                    <a href="/service" data-drupal-link-system-path="service"><i class="fas fa-sign-language fa-lg"></i> Services</a>
                  </li>
                  <li>
                    <a href="/groupe" data-drupal-link-system-path="groupe"><i class="fas fa-users fa-lg"></i> Groupes</a>
                  </li>
                  <li>
                    <a href="/annonce" data-drupal-link-system-path="annonce"><i class="fas fa-newspaper fa-lg"></i> Annonces</a>
                  </li>
                  <li>
                    <a href="/article" data-drupal-link-system-path="article"><i class="fas fa-file-alt fa-lg"></i> Articles</a>
                  </li>
                  <li>
                    <a href="/discussion" data-drupal-link-system-path="discussion"><i class="fas fa-comments fa-lg"></i> Discussions</a>
                  </li>
                  <li>
                    <a href="/recette" data-drupal-link-system-path="recette"><i class="fas fa-utensils fa-lg"></i> Recettes</a>
                  </li>
                  <li>
                     <a href="/itineraire" data-drupal-link-system-path="itineraire"><i class="fas fa-map-signs fa-lg"></i> Itinéraires</a>
                  </li>
                  <li>
                    <a href="/evenement" data-drupal-link-system-path="evenement"><i class="fas fa-calendar fa-lg"></i> Événements</a>
                  </li>
                </ul>
              </li>
            </ul>
        </div>

Upvotes: 0

Bhumi Shah
Bhumi Shah

Reputation: 9474

You can do it like this: https://codepen.io/creativedev/pen/bKvabG

$(function() {
   $('ul[class="navbar-nav"] li[class="dropdown"]').addClass('open');
});

Upvotes: 1

Related Questions