Create Sidebar Nav Menu Using jQuery & WordPress


One of the recent requirements I’ve had to design is a nav bar menu in the sidebar of a website running on WordPress. As the site has sub-pages as well as a sub-menu navigation structure. The designer of the site didn’t want drop-down menus on the statically fixed nav bar on the top, and I agreed: the drop-down menus looked a little strange.

Other ideas raised on whether to widen the statically fixed nav bar at the top of the page to accommodate the sub-pages, but after prototyping this it didn’t look any better.

So another option which was chosen was to incorporate the sub-pages for a parent page in the sidebar. All I did was create a widget that contained a <ul> tag and then I used some jQuery magic to grab the nav menu’s structure to populate the sidebar menu with all the links to the sub-pages.

The beauty of this technique is that should the designers wish to change their minds on the nav menu items (such as the link names) they can all do this within WordPress’ Menu area, and the site will automatically adjust accordingly.

So all I did was paste the following code into the footer area of the website:

Ryan

Author of scripteverything.com, Ryan has been dabbling in code since the late '90s when he cut his teeth by exploring VBA in Excel when trying to do something more. Having his eyes opened with the potential of automating repetitive tasks, he expanded to Python and then moved over to scripting languages such as HTML, CSS, Javascript and PHP. When he is not behind a screen, Ryan enjoys a good bush walk with the family during the cooler months, and going with them to the beach during the warmer months.

Recent Posts