TeamRaiser - Wrapper Navigation Menu

Heather Dauphiny 2

Hi all,



Hoping someone can (easily) help me figure out how to make my navigation menu have dropdowns (example: Nav Item says: About Us and then when you hover/click it would have two otehr options "Team Members" and "Organization Information")? I tried the very rudimentary thing and indented the bulleted list in the page wrapper for the navigation items and that didn't work. I'm hoping this isn't too terribly hard to do. Any help is appreciated. Thanks!



Heather

heather.dauphiny@orlandohealth.com

Brian Mucha

This will require some Javascript.



And you will also need to make it work on click to be mobile compatible. There is no hover on mobile.



Here's a way using JQuery, which Luminate already uses.



<ul id="item_one">

<li class="menu">Item</li>

<li class="submenu">Sub Item</li>

<li class="submenu">Sub Item</li>

</ul>



<style>

#item_one .menu { cursor: pointer; }

#item_one .submenu { display: none; }

</style>



<script>

$("#item_one .menu").click(function() {

  $( "#item_one .submenu" ).toggle( "slow", function() {

    // Optionally do something after animation is complete.

  });

});

</script>



Working example:

https://jsfiddle.net/n1mzfcqx/embedded/result/