Skip to Content

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: