Skip to main content
J
Johnny_the_boy
Participating Frequently
May 2, 2019
Question

templates and nav that changes based on current selection (class="current)

  • May 2, 2019
  • 4 replies
  • 718 views

I need to build a template.  The template has a menu navigation that has 4 top level items and 3 of the 4 top level items have submenu items.

My first instinct is that the nav should not be in an editable region so that any changes to the template's main navigation will replicate to all the other pages in the site.

However there is also a class that I want to use within the nav.  The class is called "current" and it underlines the top level navigation menu item to show that a page in that top level menu item is selected.

That means I have to place class="current" within the menu navigation to highlight the currently selected top level menu item.  So that makes me think I have to put the main navigation in an editable region but if I do that and I need to add/change/remove a menu item in the main navigation then I have to manually do it to every page in the site instead of relying on the template to replicate the change.

How can this dilemma be solved?

<nav role="navigation" aria-label="Main" id="nav-main" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" class="main show-for-large dropdown">

      <ul class="row pad">

        <li class="show-on-sticky home"><a href="/index.html">Home</a></li><li class="first"><a href="about.html" class="current">About</a>

          <ul>

            <li><a href="leadership/index.html">Leadership</a></li>

            <li><a href="_assets/doc/treasurer-orgchart.pdf">Org Chart</a></li>

          </ul>

        </li>

This topic has been closed for replies.

4 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
May 2, 2019

What  you want is called a Persistent Page Indicator.   I described how to do this with DW Templates and Editable Tag Attributes below.

Persistent Page Indicator on Menus - https://alt-web.com/

Nancy O'Shea— Product User & Community Expert
    J
    Johnny_the_boyAuthor
    Participating Frequently
    May 3, 2019

    Is it possible for me to use editable tag attributes?


    I think I can make a class="" an editable attribute for the top level nav items?

    Define editable tag attributes in templates Dreamweaver

    Edit content in template-based documents in Dreamweaver

    B i r n o u
    B i r n o u
    Legend
    May 2, 2019

    as we talk about templates, why not simply use a Template property (Template Parameters ) or a conditionnal region (Use optional regions to show/hide content in Dreamweaver ) go further (Use general syntax for template tags in Dreamweaver )

    don't hesitate if you need further infos about this way to go

    O
    osgood_
    Legend
    May 2, 2019

    Another way is to just add some page specific css in the page you need marked as being current.

    You would give your <li> tags a class which corresponds to the page name:

    <li class="about"><a href="about.html">About</a>

    <li class="leadership"><a href="leadership/index.html">Leadership</a></li>

    Then create an editable css <style> </style> region in your template <head></head> section for the page specific css:

    ABOUT PAGE add in the css editable region:

    .about a {

    background-color: red;

    }

    LEADERSHIP PAGE add in the css editable region:

    .leadership a {

    background-color: red;

    }

    I can't remember but I think DW does automatically create an editable region in the <head></head> section if you are using the .dwt template system.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    May 2, 2019

    You are right to keep the navigation as a non-editable region. You can change the active class using JavaScript to manipulate the DOM. The JavaScript compares the URL with the menu items and place the 'current' class accordingly. See Setting an active menu item based on the current URL with jQuery | InfoWorld  for more.

    Edit: Here is what I use

    jQuery(document).ready(function($) {

      $(window).on('popstate pushstate', _update);

      _update();

      function _update() {

      var url = window.location.href;

      $('a.nav-link:not([data-toggle]), a.dropdown-item').map(function() {

        $(this).toggleClass('active', this.href == url || this.href == url.split("?")[0].split("#")[0]);

      });

      $('a.dropdown-item.active').map(function() {

          $(this).closest('.nav-item.dropdown').find('.dropdown-toggle').toggleClass('active');

      });

      }

    });

    Please note that you will need to load the jQuery library first.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices