Topic: How to reach the page which has also a dropdown menu?
In this webpage https://www.andrewolff.nl/FotoSerie/Frankrijk/index.htmI use a Bootstrap 4 navbar with dropdown menues. If you click there as an example on the link “Côte d'Azur” and next on “Cogolin”, followed by “Grimaud”, you get page https://www.andrewolff.nl/FotoSerie/Frankrijk/Cote_d_Azur/Cogolin/Grimaud/index.htm
However if I click a 2nd time on the text “Cogolin”, I like to open page https://www.andrewolff.nl/FotoSerie/Frankrijk/Cote_d_Azur/Cogolin/index.htm
What should I change to my code to implement this?
This is part of the used navbar code:
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="dd-15" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="../Cote_d_Azur/Cogolin/index.htm">Cogolin</a>
<ul class="dropdown-menu" aria-labelledby="dd-15">
<li><a class="nav-link" href="../Cote_d_Azur/Cogolin/Grimaud/index.htm">Grimaud</a>
</li>
<li><a class="nav-link" href="../Cote_d_Azur/Cogolin/PortGrimaud/index.htm">Port Grimaud</a></li>
</ul>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="dd-16" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="../Cote_d_Azur/Les_Tournels/index.htm">Les Tournels</a>
<ul class="dropdown-menu" aria-labelledby="dd-16">
<li><a class="nav-link" href="../Cote_d_Azur/Les_Tournels/CapCamarat/index.htm">Cap Camarat</a></li>
<li><a class="nav-link" href="../Cote_d_Azur/Les_Tournels/Ramatuelle/index.htm">Ramatuelle</a></li>
<li><a class="nav-link" href="../Cote_d_Azur/Les_Tournels/Pamplonne/index.htm">Plage de Pamplonne</a>
</li>
<li><a class="nav-link" href="../Cote_d_Azur/Les_Tournels/Cap-Taillat/index.htm">Cap-Taillat</a></li>
</ul>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="dd-17" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="../Cote_d_Azur/LeDramont/index.htm">Le Dramont</a>
<ul class="dropdown-menu" aria-labelledby="dd-17">
<li><a class="nav-link" href="../Cote_d_Azur/LeDramont/Agay/index.htm">Agay</a></li>
<li><a class="nav-link" href="../Cote_d_Azur/LeDramont/Esterel/index.htm">Estérel gebergte</a></li>
<li><a class="nav-link" href="../Cote_d_Azur/LeDramont/RondLeDramont/index.htm">Rond Cap du Dramont </li>
</ul>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="dd-18" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="../Cote_d_Azur/Le_Bar-sur-Loup/index.htm">Bar-sur-Loup</a>
<ul class="dropdown-menu" aria-labelledby="dd-18">
<li><a class="nav-link" href="../Cote_d_Azur/Le_Bar-sur-Loup/Gourdon/index.htm">Gourdon</a> </li>
<li><a class="nav-link" href="../Cote_d_Azur/Le_Bar-sur-Loup/LeLoup/index.htm">Le Loup</a> </li>
<li><a class="nav-link" href="../Cote_d_Azur/Le_Bar-sur-Loup/Le_Bar-sur-Loup/index.htm">Het dorp Bar-sur-Loup</a> </li>
</ul>
</li>
</ul>
</li>
Hi ACWolff,
To make this behaviour you should use js code to check if "Cogolin" is already opened. However this could be missleading to your users. Normal behaviour of dropdown menu assumes that on 2nd click something will close not link you to another page. If you want to make it more user friendly add cogolin in ul of cogolin dropdown or add it with another element in line with dropdown opener this way:
<a role="button" href="../Cote_d_Azur/Cogolin/index.htm">site</a>
after
<a class="nav-link dropdown-toggle" id="dd-15" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="../Cote_d_Azur/Cogolin/index.htm">Cogolin</a>
and remove href from original a tag.
If you need additional help I am here for you.
Best Regards, Piotr
Hi, now I understand what you want to accomplish.
To make it work you need to use our "Multi level navbar". I recently prepared snippet with basic implementation of this object. You can link to any site with this implementation on clicking any object shown in this multilevel menu.
If you need addition l am here for you. 
Best Regards, Piotr
Hi Piotr,
Thanks for your quick response!
I tried your suggested solution with your slightly modified code:
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="dd-15" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Cogolin</a>
<ul class="dropdown-menu" aria-labelledby="dd-15">
<li><a class="nav-link" href="Cote_d_Azur/Cogolin/index.htm">Cogolin</a></li>
<li><a class="nav-link" href="Cote_d_Azur/Cogolin/Grimaud/index.htm">Grimaud</a></li>
<li><a class="nav-link" href="Cote_d_Azur/Cogolin/PortGrimaud/index.htm">Port Grimaud</a></li>
</ul>
</li>
You see the result here: https://www.andrewolff.nl/FotoSerie/Frankrijk/index_Piotr.htm
This works indeed, but I still prefer that the Cogolin site is opened via a click at the first text 'Cogolin' as I had implemented before I tried Bootstrap: https://www.andrewolff.nl/FotoSerie/Frankrijk/index_No_MDB.htm
It would be nice if Bootstrap could offer a similar solution as an option!
When I tried Bootstrap the first time, the secondary drop-down menu's were not working at all until I discovered somewhere a file bootstrap-4-navbar.js After I added that file via a link the secondary menu's were working. However it is strange that I can find any description of this file in your documentation. I first thought that I had to add file popper.js as suggested in your documentation: https://getbootstrap.com/docs/4.0/getting-started/introduction/ but this file does nothing, I can safely remove it, so it is also strange that the use of popper.js is not explained.
Thanks for your help!
Regards,
André
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.2
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes