RSD Bootstrap Menus

User 486215 Photo


Registered User
79 posts

Bootstrap is not as rich in Navigation capabilities as Foundation is.

I was able to find in the Bootstrap documentation only one type of menu that will support submenus - a Dropdown Menu.

Below are two examples of Bootstrap Dropdown menus, one uses Text Links for the toggle and the other uses Button Links for the toggle.

http://tjrdevelopment.org/bs-textlink-dropdown-menu/
http://tjrdevelopment.org/bs-button-dropdown-menu/

Note that the "Home" entry in each menu is not a toggle, but an actual link to some page. This menu entry has no submenu.

These dropdown menus are functionally no more sophisticated then this example in a Foundation framework:
http://tjrdevelopment.org/dropdowns/

But, if you really want to use Bootstrap and need some type of built-in menu capability, customize the examples above with styling, sizing, and any other features you would like.

Here is a .zip file with the RSDs:
http://tjrdevelopment.org/BS%20RSD%20Menus.zip
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

Thanks for sharing!
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 486215 Photo


Registered User
79 posts

Thanks, Inger.

Some final thoughts before I cease making posts about menus.:)

Single-level menus are no problem in RSD regardless of whether you are using Coffeegrinder, Foundation or Bootstrap. This can be done by simply using List Containers with Text Links - with horizontal or vertical orientations - in any of these frameworks.

It is the need to use submenus that causes all the complications! Since some sites may require this, there's the problem.
User 244626 Photo


Registered User
811 posts

Webmaster wrote:
Thanks, Inger.

Some final thoughts before I cease making posts about menus.:)

Single-level menus are no problem in RSD regardless of whether you are using Coffeegrinder, Foundation or Bootstrap. This can be done by simply using List Containers with Text Links - with horizontal or vertical orientations - in any of these frameworks.

It is the need to use submenus that causes all the complications! Since some sites may require this, there's the problem.


You can use a ul link after you have used both levels of list containers with text links to get one more submenu.
Bootstrap 5 CSS Grid.
User 2823310 Photo


Registered User
312 posts

Webmaster, I wrote a quick one on nested ULs here: http://www.coffeecup.com/forums/respons … sd/?page=1 if you're interested in doing them in RSD

There is a zip link there to play with and an example.
User 486215 Photo


Registered User
79 posts

You can use a ul link after you have used both levels of list containers with text links to get one more submenu.


Thanks for the hint.

I did try to make a sub submenu using an HTML Element for the third level with content that would be generated from a List Container and Text Links. That works. The HTML list elements will have to be modified of course with Foundation or Bootstrap menu classes and attributes to make the sub submenu operate correctly.

What I didn't try was whether or not a simple Container with Text Links would work for the third level with Foundation or Bootstrap scripts. I suspect not because I think those scripts are set up to operate on <ul> and <li> elements.

I may never have to do this, but I also don't want to write any custom Javascript or jQuery scripts to make anything work in RSD. There might be conflicts with the existing CoffeeCup, Foundation and Bootstrap scripts.

In any case, I think I have enough information for any menus I will ever have to use in RSD in the future.
User 486215 Photo


Registered User
79 posts

I did try to make a sub submenu using an HTML Element for the third level with content that would be generated from a List Container and Text Links. That works. The HTML list elements will have to be modified of course with Foundation or Bootstrap menu classes and attributes to make the sub submenu operate correctly.

I am embarrassed to report that what I wrote above did not work as stated. The third level dropdown list in the HTML Element was okay, but later when I added the classes and attributes for a Foundation Dropdown Menu and previewed the project, the third level dropdown did not work. I forgot that the HTML Element generates a <div> around your HTML code in the exported code. If you remove the <div> and </div> from the exported code, it does work.

This is really not good unless you wish to maintain your project with an HTML Editor from then on.

The second method above, using a simple Container with Text Links, definitely did not work. So I was right about that.

I forgot one rule about programming practice - never offer a solution for something that you haven't tested first.
User 2823310 Photo


Registered User
312 posts

I gave you the link to the thread, it's on the second page but here is the link to the exact post:
http://www.coffeecup.com/forums/respons … post274309
That shows you how, and the couple that follow has a link to the example and zip file..
User 2823310 Photo


Registered User
312 posts

Well you got to love coffeecup right?
They took that, wrote up a Tutorial on it and sent it out in a notification today.
That link is here:
http://www.coffeecup.com/help/articles/ … m-scratch/
User 486215 Photo


Registered User
79 posts

I gave you the link to the thread, it's on the second page but here is the link to the exact post:
http://www.coffeecup.com/forums/respons … post274309
That shows you how, and the couple that follow has a link to the example and zip file..

I looked at the Page Source for the example. Does it not use the CoffeeGrinder Framework? Did you also have to write your own scripts to make it work? Or, am I missing something here...

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.