Provides shortcodes for generating a sticky menu on a page, populated automatically based on sections on the page or manually with custom links.
Provides shortcodes for generating a sticky menu on a page, populated automatically based on sections on the page or with custom links. This menu system is meant to be used with Bootstrap 4 or the Athena Framework.
Note: jQuery is required for the JavaScript included with this plugin to work. See Installation Requirements for more information.
Head over to the Section Menus Shortcode plugin wiki for detailed information about this plugin, installation instructions, and more.
Enhancements:
- Added late enqueuing to frontend plugin JS, so only pages that use a section menu will load the relevant JS file
- Added a baseline min-height to the section menu wrapper element to help reduce content shift on page load
- Improved affixing offset calculations to better account for when the UCF Header loads in and is visible
- Added missing version number cache-busting to enqueued assets
- Cleaned up some constant names + their values for consistency with our other plugins
- Upgraded packages
Documentation:
- Update the contributing doc.
Enhancements:
- Added a unique
aria-label
attribute to generated menunav
elements. - Removed redundant
aria-label
on generated menu toggler buttons. - Added linter configs and Github issue templates, upgraded packages, and added more information about using and contributing to this project in our CONTRIBUTING doc and new wiki.
Bug Fixes:
- Added KSES filter overrides to support the
data-section-link-title
data attribute ondiv
,article
,aside
, andsection
elements, to help prevent this attribute from being wiped out by non-administrators when editing or saving posts and pages using it on versions of WordPress prior to 5.0.
Enhancements:
-
Added the ability to manually define section menu links instead of them being generated automatically via JavaScript.
The new
[section-menu-item]
allows you to define a link within a section menu. Links can be internal page anchors or external links. Parameters are available for addingrel
attributes, adjusting CSS classes on the generated<li>
and<a>
elements, and to open the generated link in a new window.Example:
[section-menu] [section-menu-item href="#some-section"]Page Section Link[/section-menu-item] [section-menu-item a_class="..." li_class="..." href="https://www.ucf.edu/" rel="nofollow" new_window="true"]External Link[/section-menu-item] [/section-menu]
Manually-defined link items will only take effect if at least one valid inner
[section-menu-item]
shortcode is present within an enclosing[section-menu][/section-menu]
shortcode. Otherwise, links will still be generated automatically based on existing sections on the page.
Bug Fixes:
- Fixed issue where empty section menus would still be visible at smaller screen sizes.
Bug Fix:
- Updated mobile menu to close when menu item is clicked
Enhancements:
- Added affix offset calculations that account for the UCF Header
Bug Fixes:
- Added fix for "jump" when the navbar affixes
- Fixed bug where two nav links could be highlighted at the same time
- Added "Skip to Section" text to the mobile nav toggle button for clarity
- Fixed minor PHP notice
- Updated mobile styles and bug fix
- Initial release
n/a
- A version of jQuery compatible with Bootstrap 4 or the Athena Framework is required on sites that utilize this plugin.
Note that compiled, minified css and js files are included within the repo. Changes to these files should be tracked via git (so that users installing the plugin using traditional installation methods will have a working plugin out-of-the-box.)
Enabling debug mode in your wp-config.php
file is recommended during development to help catch warnings and bugs.
- node
- gulp-cli
-
Clone the Section-Menus-Shortcode repo into your local development environment, within your WordPress installation's
plugins/
directory:git clone https://github.com/UCF/Section-Menus-Shortcode.git
-
cd
into the new Section-Menus-Shortcode directory, and runnpm install
to install required packages for development intonode_modules/
within the repo -
Optional: If you'd like to enable BrowserSync for local development, or make other changes to this project's default gulp configuration, copy
gulp-config.template.json
, make any desired changes, and save asgulp-config.json
.To enable BrowserSync, set
sync
totrue
and assignsyncTarget
the base URL of a site on your local WordPress instance that will use this plugin, such ashttp://localhost/wordpress/my-site/
. YoursyncTarget
value will vary depending on your local host setup.The full list of modifiable config values can be viewed in
gulpfile.js
(seeconfig
variable). -
Run
gulp default
to process front-end assets. -
If you haven't already done so, create a new WordPress site on your development environment to test this plugin against.
-
Activate this plugin on your development WordPress site.
-
Run
gulp watch
to continuously watch changes to scss and js files. If you enabled BrowserSync ingulp-config.json
, it will also reload your browser when plugin files change.
- This plugin's README.md file is automatically generated. Please only make modifications to the README.txt file, and make sure the
gulp readme
command has been run before committing README changes. See the contributing guidelines for more information.
Want to submit a bug report or feature request? Check out our contributing guidelines for more information. We'd love to hear from you!