Recently there have been some customers that have been asking if there's anyway to have javascript hover menus for their navigation on their Viviti websites. During the last release we've made the jQuery Superfish plugin available on your websites so that it's easy to get it working with as little work as possible.
In order to activate the hover menus for all of your navigation components you'll need to follow the directions below:
- Go to the My Website toolbar menu, and click on Edit Theme Source Code.
- Click on the default.html in the table that lists your theme files.
- Add the following code below code inside of the <head> element.
<script type="text/javascript" src="/extras/js/superfish.js"></script> <script type="text/javascript"> $j(function(){ $j("ul.navigation").superfish() });</script>
- Click the Save button at the bottom of the dialog.
The page should reload and any nested menus in your Navigation Component will now be activated when the mouse hovers overtop of the label.
If you just want the hover menu activated on one specific Navigation Component, you'll first need to get the CSS ID of the component. To do this, you'll need to:
- Click the collapse component button in the Viviti status bar, so that the components ID are displayed.
- Select and copy the ID into your clipboard (it should look similar to #component_0000)
- Go to the My Website toolbar menu, and click on Edit Theme Source Code.
- Click on the default.html in the table that lists your theme files.
- You'll now need to add the following code inside of the <head> element:
<script type="text/javascript" src="/extras/js/superfish.js"></script> <script type="text/javascript"> $j(function(){ $j("#component_0000 .navigation").superfish() });</script>
- The second line of the above code needs to have #component_0000 replaced with whatever you copied as the components CSS ID.
- Click the Save button at the bottom of the dialog.
Superfish also has a variety of options that can be tweaked. A list of these options are available on the Superfish documentation page.
Any questions, comments, problems can posted on our Viviti forum, to keep things organized.
