My goal is to get the SuperSubs to work with the SuperFish-NavBar for 3rd level menu items. Below, I outline the issue with what specifically causes it to break.
Has anyone successfully used SuperFish sf-navbar with the "Superfish-SuperSubs" ? SuperSubs works fine alone, and the sf-NavBar works on its own, but I am looking to combine the two for 3rd level menu options.
The purpose of SuperSubs is to fix the width of the sub menu items, allowing long Captions to be displayed without wrapping text.
The sample on the website for supersubs (You will have to click
with Supersubs)
There is an example of the navbar usage on the same page.
http://users.tpg.com.au/j_birch/plugins/superfish/#examples Here is the UL for supersubs that works
<ul id="MainNavigation" class="sf-menu">
To make it compatible with NavBar, the class
sf-navbar is added. Once this is added, the menu breaks.
Does Not Render Correctly:
$("#MainNavigation").supersubs().superfish();
FOR:
<ul id="MainNavigation" class="sf-menu sf-navbar">
Here is the complete code with menu structure. You should be able to use this independently, all links are full to make it easy. HTML files can not be attached.
- <html >
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish-vertical.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish-navbar.css" />
<script type="text/javascript" src="http://users.tpg.com.au/j_birch/plugins/assets/js/hoverIntent.js"></script>
<script type="text/javascript" src="http://users.tpg.com.au/j_birch/plugins/assets/js/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<script type="text/javascript" src="http://users.tpg.com.au/j_birch/plugins/supersubs/js/supersubs.js"></script>
<script type="text/javascript">
function displayNavOnly(){
$("#MainNavigation").superfish();
}
function displaySuperSubsOnly(){
// The class has to be removed for supersubs to be displayed correctly
$("#MainNavigation").removeClass('sf-navbar').supersubs({maxWidth: 50}).superfish();
}
function displayCombo(){
$("#MainNavigation").supersubs().superfish();
}
$(document).ready(function(){
/* REMOVE COMMENT TO DISPLAY EACH TYPE */
//displayNavOnly();
//displaySuperSubsOnly();
displayCombo();
});
</script>
</head>
<body>
<div>
<ul id="MainNavigation" class="sf-menu sf-navbar">
<li>
<a class="sf-with-ul" href="#">long menu item<span class="sf-sub-indicator"> »</span></a>
<ul>
<li><a href="#">subitem 1a</a></li>
<li><a href="#">subitem 1b</a></li>
<li><a href="#">subitem 1c</a></li>
<li><a href="#">subitem 1d</a></li>
</ul>
</li>
<li class="current">
<a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
<ul >
<li>
<a class="sf-with-ul" href="#">subitem 2a<span class="sf-sub-indicator"> »</span></a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
<li><a href="#abc">menu item</a></li>
<li><a href="#abd">menu item</a></li>
</ul>
</li>
<li >
<a class="sf-with-ul" href="#">path to current<span class="sf-sub-indicator"> »</span></a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
<li class="current"><a href="#abc">current page</a></li>
<li><a href="#abd">menu item</a></li>
</ul>
</li>
<li class="current">
<a class="sf-with-ul" href="#">subitem 2c<span class="sf-sub-indicator"> »</span></a>
<ul>
<li><a href="#">menu item which is longer than the others</a></li>
<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
<li><a href="#abc">menu item</a></li>
<li><a href="#abd">menu item</a></li>
</ul>
</li>
<li><a href="#">subitem 2d</a></li>
</ul>
</li>
<li>
<a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
<ul>
<li><a href="#">if no subitems, duplicate parent item href and use this as descriptive label</a></li>
</ul>
</li>
<li>
<a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
<ul>
<li><a href="#">subitem 4a</a></li>
<li><a href="#">subitem 4b</a></li>
<li><a href="#">subitem 4c</a></li>
<li><a href="#">subitem 4d</a></li>
</ul>
</li>
<li>
<a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
<ul>
<li><a href="#">subitem 5a</a></li>
<li><a href="#">subitem 5b</a></li>
<li><a href="#">subitem 5c</a></li>
<li><a href="#">subitem 5d</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>