[sociallocker ]
[/sociallocker]

Making Bootstrap 3 Main Menu Hover Dropdown and Clickable DDRMenu DNN7

May 19, 2014 1:58 pm
More videos
1,842
Views
   
PluginForage.com Member

Make a Bootstrap Main Menu Click
When it is Only a Parent Link/Page in DNN

This article covers how-to make some changes to the DDRMenu template XSLT & Bootstrap 3 on a DNN7 install. The original article examining the menu template can be found at: http://www.dnnhero.com/Premium/Tutorial/tabid/259/ArticleID/4/Beginning-XSLT-with-DDRMenu-Part-1.aspx

Find out where your website ranks with your chosen keywords in Google, Yahoo and Bing.
14 day free trial. No credit card required.

The DDRmenu can be obtained at codeplex.

Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership

Bootstrap 3 was designed as a mobile first platform to build websites on. One issue that comes up often is when using the built-in bootstrap navigation menu, the way it is designed is if there are any child pages, the parent link is not clickable. Furthermore, when you hover over the menu item with a child, bootstrap requires you to click to see the drop down portion of the menu.

This way of doing things with the menu, though it makes sense from a mobile first point of view isn’t always optimal for individual websites.

To make a bootstrap 3 nav menu open up on hover is pretty easy and straight forward. With just a little CSS trickery, we can make that happen. All you need to add to your CSS is this code and you will get the hover effect you desire.

ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; margin: 0 }

There are times when you may want the parent link in a menu to actually display a page when clicked. By default with Bootstrap 3, when there are children pages to the main anchor link in a bootstrap navbar menu, you cannot get to a page by clicking the main anchor link. All that will appear is the drop down menu. In order to get the main anchor link to go to a page, you will need to edit the Bootstrap Menu ULXSLT.xslt file. So find the .xslt file and make their edits.

Where you find:

dropdown-toggle

xsl:if>

xsl:attribute>

dropdown

xsl:if>

Replace it with:

dropdown

1000

true

Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership

Your parent link will now be clickable with a slight delay, so people on their phones don’t start clicking around to soon. We want the drop down menu to occur!

Recommended Bootstrap Course

Bootstrap Basics: Program Responsive Websites

(1842)

Share your thoughts!