Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-63326

use href for custom menu with children

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.5.1, 3.6
    • Fix Version/s: None
    • Component/s: HTML and CSS, Themes
    • Labels:
      None
    • Testing Instructions:
      Hide

      Visit the theme settings page:

      /admin/settings.php?section=themesettings

      and find the "Custom menu items (custommenuitems)" setting about halfway down.

      Copy in the example content:

      Moodle community|https://moodle.org
      -Moodle free support|https://moodle.org/support
      -Moodle Docs|http://docs.moodle.org|Moodle Docs
      -German Moodle Docs|http://docs.moodle.org/de|Documentation in German|de
      -###
      -Moodle development|https://moodle.org/development
      Moodle.com|http://moodle.com/

      And save.

      A menu should be shown at the top of the page. Notice that the url of the "Moodle community" parent link is now "https://moodle.org" rather than "#" that it previously was. The menu should still work exactly as before. The JS captures the click and prevents the url ever being actually visited, the same as before.

      However, custom CSS like the following, pasted into the Boost Raw SCSS box in settings:

      ul.navbar-nav .nav-item .nav-link[href="https://moodle.org"]:before {
      content: $fa-var-graduation-cap;
      font-family: FontAwesome;
      }
      

      Should allow that menu item to be targetted with CSS, and not be affected if someone adds new items before/after it or changes the text string used or uses the multi-lingual ability to have different text pointing to the same url for different languages.

      Show
      Visit the theme settings page: /admin/settings.php?section=themesettings and find the "Custom menu items (custommenuitems)" setting about halfway down. Copy in the example content: Moodle community|https://moodle.org -Moodle free support|https://moodle.org/support -Moodle Docs|http://docs.moodle.org|Moodle Docs -German Moodle Docs|http://docs.moodle.org/de|Documentation in German|de -### -Moodle development|https://moodle.org/development Moodle.com|http://moodle.com/ And save. A menu should be shown at the top of the page. Notice that the url of the "Moodle community" parent link is now "https://moodle.org" rather than "#" that it previously was. The menu should still work exactly as before. The JS captures the click and prevents the url ever being actually visited, the same as before. However, custom CSS like the following, pasted into the Boost Raw SCSS box in settings: ul.navbar-nav .nav-item .nav-link[href= "https://moodle.org" ]:before { content: $fa-var-graduation-cap; font-family: FontAwesome; } Should allow that menu item to be targetted with CSS, and not be affected if someone adds new items before/after it or changes the text string used or uses the multi-lingual ability to have different text pointing to the same url for different languages.
    • Affected Branches:
      MOODLE_35_STABLE, MOODLE_36_STABLE
    • Pull 3.5 Branch:
      MDL-63326-35_custom_menu_href
    • Pull Master Branch:
      MDL-63326-master_custom_menu_href

      Description

      The current mustache file for the items in the custom menu throws away any url given for items with children, and instead uses href="#".

      theme/boost/templates/core/custom_menu_item.mustache

       

      #haschildren
       <li class="dropdown nav-item">
       <a class="dropdown-toggle nav-link" id="drop-down-uniqid" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
      

       

      This doesn't affect the behaviour of the menu, but it does mean that you can uniquely target every child item of the menu with CSS using [href="http://example.com/url"] syntax, but you can't do the same for the parent items.

       

        Attachments

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              bawjaws David Scotson
              Participants:
              Component watchers:
              Amy Groshek, David Scotson, Amaia Anabitarte, Bas Brands, Carlos Escobedo, Sara Arjona (@sarjona), Víctor Déniz Falcón, Amaia Anabitarte, Bas Brands, Carlos Escobedo, Sara Arjona (@sarjona), Víctor Déniz Falcón
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated: