THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
Wiki Markup |
---|
{style:import=http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css} {html} <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <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/superfish/js/superfish.js"></script> <script type="text/javascript" src="http://users.tpg.com.au/j_birch/plugins/supersubs/js/supersubs.js"></script> <ul class="sf-menu sf-js-enabled sf-shadow" id="sample-menu-5"> <li class="current"> <a href="#a" class="sf-with-ul">menu item<span class="sf-sub-indicator"> »</span></a> <ul style="float: none; width: 16.8462em; display: none; visibility: hidden;"> <li style="white-space: normal; float: left; width: 100%;" class=""> <a href="#aa" style="float: none; width: auto;">menu item that is quite long</a> </li> <li class="current" style="white-space: normal; float: left; width: 100%;"> <a href="#ab" class="sf-with-ul" style="float: none; width: auto;">menu item<span class="sf-sub-indicator"> »</span></a> <ul style="left: 16.8462em; float: none; width: 20em; display: none; visibility: hidden;"> <li class="current" style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item that is even longer still!</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#aba" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#abb" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#abc" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#abd" style="float: none; width: auto;">menu item</a></li> </ul> </li> <li style="white-space: normal; float: left; width: 100%;" class=""> <a href="#" class="sf-with-ul" style="float: none; width: auto;">menu item<span class="sf-sub-indicator"> »</span></a> <ul style="left: 16.8462em; float: none; width: 12em; display: none; visibility: hidden;"> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> </ul> </li> <li style="white-space: normal; float: left; width: 100%;" class=""> <a href="#" class="sf-with-ul" style="float: none; width: auto;">menu item<span class="sf-sub-indicator"> »</span></a> <ul style="left: 16.8462em; float: none; width: 12em; display: none; visibility: hidden;"> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> </ul> </li> </ul> </li> <li class=""> <a href="#">menu item</a> </li> <li class=""> <a href="#" class="sf-with-ul">menu item<span class="sf-sub-indicator"> »</span></a> <ul style="float: none; width: 12em; display: none; visibility: hidden;"> <li style="white-space: normal; float: left; width: 100%;" class=""> <a href="#" class="sf-with-ul" style="float: none; width: auto;">menu item<span class="sf-sub-indicator"> »</span></a> <ul style="left: 12em; float: none; width: 12em; display: none; visibility: hidden;"> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">short</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">short</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">short</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">short</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">short</a></li> </ul> </li> <li style="white-space: normal; float: left; width: 100%;" class=""> <a href="#" class="sf-with-ul" style="float: none; width: auto;">menu item<span class="sf-sub-indicator"> »</span></a> <ul style="left: 12em; float: none; width: 12em; display: none; visibility: hidden;"> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> </ul> </li> <li style="white-space: normal; float: left; width: 100%;" class=""> <a href="#" class="sf-with-ul" style="float: none; width: auto;">menu item<span class="sf-sub-indicator"> »</span></a> <ul style="left: 12em; float: none; width: 12em; display: none; visibility: hidden;"> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> </ul> </li> <li style="white-space: normal; float: left; width: 100%;" class=""> <a href="#" class="sf-with-ul" style="float: none; width: auto;">menu item<span class="sf-sub-indicator"> »</span></a> <ul style="left: 12em; float: none; width: 12em; display: none; visibility: hidden;"> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;"><a href="#" style="float: none; width: auto;">menu item</a></li> </ul> </li> <li style="white-space: normal; float: left; width: 100%;" class=""> <a href="#" class="sf-with-ul" style="float: none; width: auto;">menu item<span class="sf-sub-indicator"> »</span></a> <ul style="left: 12em; float: none; width: 12em; display: none; visibility: hidden;"> <li style="white-space: normal; float: left; width: 100%;" class=""><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;" class=""><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;" class=""><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;" class=""><a href="#" style="float: none; width: auto;">menu item</a></li> <li style="white-space: normal; float: left; width: 100%;" class=""><a href="#" style="float: none; width: auto;">menu item</a></li> </ul> </li> </ul> </li> <li class=""> <a href="#">menu item</a> </li> </ul> <script type="text/javascript"> $(document).ready(function(){ $(document).getElementById("sample-menu-5").supersubs({ minWidth: 12, // minimum width of sub-menus in em units maxWidth: 27, // maximum width of sub-menus in em units extraWidth: 1 // extra width can ensure lines don't sometimes turn over // due to slight rounding differences and font-family }).superfish(); // call supersubs first, then superfish, so that subs are // not display:none when measuring. Call before initialising // containing tabs for same reason. }); </script> {html} |