Insert and format a Bootstrap dropdown menu

When you insert a Bootstrap basic navbar, you have the option of including a dropdown menu. This menu is not required, but it can prove useful if you need a second-tier of navigation in your site. The Bootstrap dropdown menu is friendly to touch-based devices, such as phones and tablets. Since pointing to, or "hovering over," a navigation item is not easy on these devices, the Bootstrap implementation requires a click or tap to produce the dropdown menu. The only downside is that the main navigation item that produces the dropdown menu can't be linked to a webpage.

If you deleted the Bootstrap dropdown menu as you were setting up your navigation, I have provided the dropdown navigation code that you can simply copy and paste into your code. You would need to paste the dropdown code as its own <li> inside your navigation. See the image below for an example of how the code should look when pasted into your own site.

Modifying the dropdown menu is relatively straightforward once you understand the code that produces the menu. Let's look at the unmodified code below. This code assumes a couple of things: that you've inserted and modified the navbar code, as covered in class and as documented in a previous set of notes; and that you've left the dropdown code in, as we did in our in-class example.

Notice that all of the navbar dropdown code is contained inside a <li> element, which in this instance has a class of dropdown. It's just like any other navigation entry that starts with an opening <li> tag and ends with a closing </li> tag. The difference is that the list item also contains its own nested <ul> element, which in turn has its own nested <li> elements. All of these items work in concert to produce the dropdown menu.

If you need more than one dropdown menu, you can copy this entire block of code, highlighted in the red rectangle above, and paste it after another closing </li> tag in the navigation.

To change "Dropdown" on the menu

  1. Locate word "Dropdown" (beginning with a capital letter) on the same line as the opening <li> tag for the dropdown menu. (See line 29 in the example above.)
  2. Select the word "Dropdown," and then type the name of the navigation item.
  3. Notice that the link goes to a number sign. (Again, see line 29.) Leave this link as is. Remember that the navigation item cannot have its own page in Bootstrap.

To name navigation entries and link to pages within the dropdown menu

  1. Look for the first <li> element within the dropdown code. (See line 31 in the example above.)
  2. Change the word "Action" to the name of the first navigation entry in the dropdown menu.
  3. Click within the word you just typed, and in the Property inspector, click Refresh, if necessary.
  4. With the cursor still within the word you just typed for the first navigation item, in the Property inspector, click the Browse for File button .
  5. Navigate to the file you have created for that particular page in the dropdown menu.

    Note If you haven't yet created the page, follow the instructions for creating a page from the template, and then come back to these steps.
  6. Select the file, and then click OK.
  7. Follow the steps above to create as many links as needed. Notice that the Bootstrap placeholder text includes "Another action" and "Something else here" that you can change and link to, just as you did in steps 2–6.

    Notice, too, that the Bootstrap example includes separator lines, in case you need them. If you want to remove them, simply delete the entire <li> element that contains them. If you delete the separators and later decide you want them, just type the code shown in the example to create a separator line where desired. (See line 34 in the image above for the necessary code.)

    You can remove any unneeded links, such as those represented by "Separated link" and "One more separated link" in the image above.

    If you ever need any additional links, simply add a new <li> element within the dropdown menu code. You might find it easiest to copy an existing <li> element, and then replacing the page link and the navigation entry name.

To style the dropdown list items

  1. In the CSS Designer, select the last navigation rule, and then under @Media, make sure GLOBAL is selected.
  2. Next to Selectors, click the Add Selector button Add Selector button.
  3. Change the name in the selector name box to read nav.row .navbar-default ul ul.
  4. In the CSS Designer panel, under Properties, click the Background button Text button.
  5. In the background-color box, type or select an appropriate background color for the list items inside the dropdown list.
  6. In the CSS Designer panel, under Properties, click the Text button Text button.
  7. In the color box, type or select a color, such as #000, that works well with the list item background color.

To style the hover for the dropdown list items

  1. In the CSS Designer, select the last navigation rule, and then under @Media, make sure GLOBAL is selected.
  2. Next to Selectors, click the Add Selector button Add Selector button.
  3. Change the name in the selector name box to read nav.row .navbar-default ul ul li a:hover.
  4. In the CSS Designer panel, under Properties, click the Background button Text button.
  5. In the background-color box, type or select an appropriate background color for the hover effect when the user points to the list items inside the dropdown list.
  6. In the CSS Designer panel, under Properties, click the Text button Text button.
  7. In the color box, type or select a color, such as #000, that works well with the hover background color.