Highlighted

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

Explorer ,
May 02, 2019

Copy link to clipboard

Copied

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>

Views

164

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
May 02, 2019

Copy link to clipboard

Copied

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>

Views

165

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 02, 2019 0
Adobe Community Professional ,
May 02, 2019

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 02, 2019 1
LEGEND ,
May 02, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 02, 2019 0
Adobe Community Professional ,
May 02, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 02, 2019 1
Adobe Community Professional ,
May 02, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 02, 2019 2
Explorer ,
May 03, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 03, 2019 0