Support :: Advanced Features

Dynamic Drop Downs

How do I get dropdowns of sub pages to display upon hovering them in the header navigation? (Dynamic Dropdown)

dd-bulb.png

In order to set up dynamic dropdowns, go to Pages and edit the page that you want to display the sub pages for. In the very far right of the Page Info tab, you will notice the letters "DD" and a bulb icon.

Click the bulb icon to activate dropdown functionality for the page, and then click the "DD" link in order to insert the token needed to make it work.

dd-code.png

The token is in the following format: cms{subs nav parent-page} (wrapped in # signs), where we want to display the subpages of a page called "parent-page.php". (Notice that we will leave ".php" out when inserting the page's name into the token)

Save the page, and you can now navigate to the website and see the dropdowns working.

dd-done.png

 

So here's a recap...creating dynamic drop down sub menus in your navigation is easy to do.

  1. go to pages/settings and make sure "dynamic dropdown" is on (as shown below)
  2. click save settings-dynamic-dropdown.png
  3. go to pages
  4. select the page with sub pages that you want to be activated with a drop down. The page is now in edit mode as shown.
  5. Click on the dynamic dropdown icon and a pop-up will appear.
  6. Insert the dynamic dropdown token as shown below. "" replacing your-page-here with your page and replacing "nav" with your css sub nav class. The page extension is not required, for example .php should not be entered.
    1. To learn more about cms scripting and tokens go here
  7. Click update
  8. Click the yellow lightbulb to make active
  9. Click save to save the page

dynamic-dropdown.png

You may need to adjust your css color styles for the background color of the nav - or may need to make one if you don't have one already. An html/css expert can assist you or our partner LunaStudios can get you an estimate for coding work.

Dynamic Drop Down Special Note

The web builder allows for dynamic content/headers/dropdowns next to each dynamic primary navigation. It won't work however, if the code in the skin is not there that outputs the dynamic dropdown.

Old sites on old themes may use code such as:

<div class="nav">
<ul>
@cms{start_primary_navigation}@
<li class="@cms{navigation_if_selected_class active}@"><a href="@cms{navigation_url}@" @cms{navigation_link_title}@ @cms{navigation_external_url_target_blank}@>@cms{navigation_page_name}@</a>@cms{dynamic_dropdown}@</li>
@cms{end_primary_navigation}@
</ul>
</div>

Below adds text "has_dropdown" as a class to nav.


<ul>@cms{start_primary_navigation}@
<li class="@cms{navigation_if_selected_class active}@">

<a href="@cms{navigation_url}@">@cms{navigation_page_name}@</a> @cms{dynamic_dropdown_active_class}@</li>
@cms{end_primary_navigation}@</ul>

New Themes with Twig turned on use the New Twig Format


<ul id="topnav" class="sf-menu">{% for n in navigation_links %}
<li class="current">

<a title="{{ n.link_title }}" href="{{ n.link_url }}" target="_blank">{{ n.name }}</a>{{n.dynamic_header|raw }}</li>
{% endfor %}</ul>

Categories