Drop-down for Sub-Pages in Nav Bar

  • Fun Joel

    (@fun-joel)


    15 years ago

    I have searched the archives for the answer to this, and only find plug-in solutions. I tried a few, but found them difficult to make match the overall design the theme already features. I’d rather just modify the theme code, to maintain consistent design through my blog.

    I currently am running the “This Just In!” theme, and have 2 tabs on my top nav bar: Home and About. I have 3 sub-pages beneath my About page. What I would like to do is to keep my nav bar looking the same, but have the three sub-pages drop down when the About tab is hovered over. Is there a simple way to do this?

    I am still designing my blog and it is unlaunched so far, so keep that in mind. But if looking at the blog will help answer this, my url is https://www.funjoelsisrael.com

    Thanks in advance!

    Joel

Viewing 1 replies (of 1 total)

  • I just saw this and don’t have a lot of time to give you a complete solution but I’ll try to start you on the right track. It’s not easy unless you’re familiar with WordPress and jQuery.

    First, the nav menu is hard-coded, which means your sub-pages aren’t even being added to the html. You’ll need to replace the existing hard coded menu with the wp_list_pages function (with correct parameters added). I think that’ll list out your subpages. You’ll then have to adjust the CSS so that the subpages are hidden by default.

    Then in your header you’ll have to add <?php wp_enqueue_script(‘jquery’);?> to make sure jquery is available. Then you’ll have to write some jQuery code to get the drop down features working.

    Check out jquery.com > documentation and look around for the show() / hide() or hover() functions.

    Sorry I couldn’t give more detail…hope that starts you out.

Viewing 1 replies (of 1 total)
  • The topic ‘Drop-down for Sub-Pages in Nav Bar’ is closed to new replies.