Global navigation bug when using text-only heading

May 1, 2013 at 11:40 PM
First, let me just say thanks so much for this great project! I've been playing with it for a few days now and today I ran into a small bug with the global nav (version 2013 BetaV1.1.12 of your framework) . I'm using managed navigation and I have a first level item that is a "text-only heading" (no link). Under this there are a few other items. When I hover of this item the drop down does not activate. Also, the styling is off. A similar problem happens when viewing at a narrower resolution that activates the accordian version of the menu. Clicking the arrow next to the item does not expand it and the styling is off here too. I made a few edits to the bootstrap-custom.css and the bootstrap-custom.js to fix the issue. Basically just adding additional selectors for the spans. Here's the code in case it helps anybody else out there.

bootstrap-custom.css edits:
.nav.ms-core-listMenu-horizontalBox li.static > a,
.nav.ms-core-listMenu-horizontalBox li.static > span.dynamic-children {
    margin: 0 5px;
}
.nav.ms-core-listMenu-horizontalBox li.static > a,
.nav.ms-core-listMenu-horizontalBox li.static > span.dynamic-children {
    float: none;
    padding: 10px 15px;
    text-decoration: none;
    margin: 0px;
    border: none;
}
.nav li.static > a.selected,
.nav li.static > a:hover,
.nav li.static > span.selected,
.nav li.static > span:hover  {
    background-color: #2284A1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;
    color: #FFFFFF;
    text-decoration: none;
}
/*inverse*/
.navbar-inverse .brand, .navbar-inverse .nav li.static > a,
.navbar-inverse .brand, .navbar-inverse .nav li.static > span {
    color: #999999;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar-inverse .nav.ms-core-listMenu-horizontalBox li.static > a,
.navbar-inverse .nav.ms-core-listMenu-horizontalBox li.static > span {
    color: #eee;
}
.navbar-inverse .nav li.static > a.selected,
.navbar-inverse .nav li.static > a:hover,
.navbar-inverse .nav li.static > span.selected,
.navbar-inverse .nav li.static > span:hover, {
    background-color: #2284A1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;
    color: #FFFFFF;
    text-decoration: none;
}
bootstrap-custom.js edits:
function BindTopNav($) {
...
u.find('a.dynamic-children, span.dynamic-children').each(function() {
...
DropTopNav($(this).parent('a, span').eq(0),'',$);
...
function HoverTopNav(l, a, $) {
...
DropTopNav(l.children('a.dynamic-children, span.dynamic-children').eq(0), a, $);
...
function DropTopNav(l, a, $) {
...
u.find('a.dynamic-children, span.dynamic-children').removeClass('selected');
...
Jun 19, 2013 at 2:11 PM
I had this issue as well. While Mike's code changes above corrected the drop-down issues I was experiencing, it created or contributed to another issue. It seems there is a function within the bootstrap-custom.js file that binds a click event to child spans of span.dynamic-children. For some reason, this was causing headings with no URLs to throw a page not found error when clicked.

I commented out the following section to resolve the issue. Note, my jQuery skills aren't the best and this code seems like it's here to support some browsers, so this may not be the optimal solution.
//need to trap span too for some browsers
//s.bind('click',function(e) {
//  var w = $(this).outerWidth(true);
//  var rs = parseInt($(this).css("padding-right")) + parseInt($(this).css("margin-right"));
//  var x = e.pageX - $(this).offset().left;
//  if (x > (w-rs))
//      DropTopNav($(this).parent('a, span').eq(0),'',$);
//  else
//      window.location.href = $(this).parent('a').eq(0).attr('href');
//  return false;
//});
Coordinator
Jun 20, 2013 at 12:20 AM
Hi all,

The reason for the additional code in the bootstrap-custom.js file that tweaks the top navigation is to override the hover menus that SP provides OOTB. The problem with these menus are that they are not mobile/touch friendly. I am going to be looking into the code that seems to be causing problems shortly as commenting out the code will allow the hover to work for headers, but then reintroduces the problem with touch.

Or there might be a better way? Ideas?

Eric
Jun 25, 2013 at 12:34 AM
I was getting the same behavior grizzlyadams experienced. I modified the following code and it seems to have helped. I have not fully tested this, however it does seem to eliminate the page not found error and still works with touch and with hover.
            //need to trap span too for some browsers
            s.bind('click',function(e) {
                var w = $(this).outerWidth(true);
                var rs = parseInt($(this).css("padding-right")) + parseInt($(this).css("margin-right"));
                var x = e.pageX - $(this).offset().left;
                if (x > (w-rs))
                    DropTopNav($(this).parent('a, span').eq(0),'',$);
                else
                {
                    var h = $(this).parent('a').eq(0).attr('href');
                    if (h != null)
                        window.location.href = h;
                }
                //return false;
Hope it helps.

Mike