Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Thread Tools Display Modes
Old 12-14-2011, 06:25 PM   #1
johnMoss's Avatar
Join Date: Dec 2010
Location: Dallas
Posts: 867
Default change default highlighted menu item in Superfish

Hitting a roadblock here. I want to change the default highlighted menu item from "Home" to "Vacation Rentals". Home is item one of 5 parent menu items, V rentals is the 3rd item. There isn't an intuitive method that I can ascertain as to how to change the default active menu item. Point being I am creating additional pages to this javascript site, and using superfish menus. I have created a rentals page, and I've played with the list class html with the home & VR menu items, & that didn't work. Bottom line is "Home" is showing by default as active menu item on the page (rentals) I have created, and I cannot figure out how to change it. I gather I possibly need a second .js file, and hence question is where to go in that script to make the necessary changes. Example of the whole thing in action is here:

This is not the page in question, but rather the index page, for example purposes. I do not have the rentals page posted but here is the menu html & superfish script (work in progress):

HTML Code:
 <nav class="menu">
         <ul id="menu">
           <li id="firstPage"><a href="index.html"><span><span>Home</span></span></a></li>
           <li><a href="services.html"><span><span>Services</span></span></a>
             <ul class="submenu_1">
               <li class="first"></li>
               <li><a href="#!/page_Tours">Special Events</a>
                 <ul class="submenu_2">
                   <li><a href="#!/page_Tours">Weddings</a></li>
                   <li><a href="#!/page_Tours">Quinceaneras</a></li>
                   <li><a href="#!/page_Tours">Birthdays</a></li>
                   <li><a href="#!/page_Tours">Groups</a></li>
                   <li><a href="#!/page_Tours">Charters</a></li>
               <li><a href="#!/page_Tours">Property Mgmt</a></li>
               <li><a href="#!/page_Tours">Child Care</a>
                 <ul class="submenu_2">
                   <li><a href="#!/page_Tours">Babysitters</a></li>
                   <li><a href="#!/page_Tours">Fulltime Nanny</a></li>
               <li><a href="#!/page_Tours">About Us</a></li>
               <li><a href="#!/page_Tours">FAQ</a></li>
               <li class="last"></li>
           <li><a href="#!/page_Destinations"><span><span>Vacation Rentals</span></span></a>
             <ul class="submenu_1">
               <li class="first"></li>
               <li><a href="#!/page_Tours">Area Map</a></li>
               <li><a href="#!/page_Tours">By # of Persons</a></li>
               <li><a href="#!/page_Tours">By Location</a>
                 <ul class="submenu_2">
                   <li><a href="#!/page_Tours">La Cruz</a>
                     <ul class="submenu_3">
                       <li><a href="#!/page_Tours">All Listings</a></li>
                       <li><a href="#!/page_Tours">Marina Front</a></li>
                       <li><a href="#!/page_Tours">Condos</a></li>
                       <li><a href="#!/page_Tours">Homes</a></li>
                   <li><a href="#!/page_Tours">Costa Banderas</a></li>
                   <li><a href="#!/page_Tours">Bucerias</a></li>
                   <li><a href="#!/page_Tours">El Tizate</a></li>
                   <li><a href="#!/page_Tours">Nuevo Vallarta</a></li>
               <li><a href="#!/page_Tours">B &amp; B Style</a></li>
               <li><a href="#!/page_Tours">Grandeur</a></li>
               <li><a href="#!/page_Tours">Group Events</a></li>
               <li><a href="#!/page_Tours">Extended Stay</a></li>
               <li class="last"></li>
           <li><a href="#!/page_Hotels"><span><span>Fun Stuff</span></span></a>
             <ul class="submenu_1">
               <li class="first"></li>
               <li><a href="#!/page_Tours">Sea Charters</a></li>
               <li><a href="#!/page_Tours">In the Jungle</a></li>
               <li><a href="#!/page_Tours">Out &amp; About</a>
                 <ul class="submenu_2">
                   <li><a href="#!/page_Tours">Necessities &amp; such</a></li>
                   <li><a href="#!/page_Tours">Art Walks</a></li>
                   <li><a href="#!/page_Tours">Restaurants &amp; Coffee</a></li>
               <li class="last"></li>
           <li><a href="#!/page_Contacts"><span><span>Contact Us</span></span></a> </li>
     <!--header end-->
     <!--content -->
     <article id="content">
 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 * Dual licensed under the MIT and GPL licenses:
 *  http://www.opensource.org/licenses/mit-license.php
 *  http://www.gnu.org/licenses/gpl.html
 * CHANGELOG: http://users.tpg.com.au/j_birch/plug.../changelog.txt
 $.fn.superfish = function(op){
  var sf = $.fn.superfish,
   c = sf.c,
   $arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')),
   over = function(){
    var $$ = $(this), menu = getMenu($$);
   out = function(){
    var $$ = $(this), menu = getMenu($$), o = sf.op;
     if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
   getMenu = function($menu){
    var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
    sf.op = sf.o[menu.serial];
    return menu;
   addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
  return this.each(function() {
   var s = this.serial = sf.o.length;
   var o = $.extend({},sf.defaults,op);
   o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
    $(this).addClass([o.hoverClass,c.bcClass].join(' '))
   sf.o[s] = sf.op = o;
   $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
    if (o.autoArrows) addArrow( $('>a:first-child',this) );
   var $a = $('a',this);
    var $li = $a.eq(i).parents('li');
  }).each(function() {
   var menuClasses = [c.menuClass];
   if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
   $(this).addClass(menuClasses.join(' '));
 var sf = $.fn.superfish;
 sf.o = [];
 sf.op = {};
 sf.IE7fix = function(){
  var o = sf.op;
  if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
 sf.c = {
  bcClass     : 'sf-breadcrumb',
  menuClass   : 'sf-js-enabled',
  anchorClass : 'sf-with-ul',
  arrowClass  : 'sf-sub-indicator',
  shadowClass : 'sf-shadow'
 sf.defaults = {
  hoverClass : 'sfHover',
  pathClass : 'overideThisToUse',
  pathLevels : 1,
  delay  : 800,
  animation : {opacity:'show'},
  speed  : 'normal',
  autoArrows : true,
  dropShadows : true,
  disableHI : false,  // true disables hoverIntent detection
  onInit  : function(){}, // callback functions
  onBeforeShow: function(){},
  onShow  : function(){},
  onHide  : function(){}
  hideSuperfishUl : function(){
   var o = sf.op,
    not = (o.retainPath===true) ? o.$path : '';
   o.retainPath = false;
   var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
   return this;
  showSuperfishUl : function(){
   var o = sf.op,
    sh = sf.c.shadowClass+'-off',
    $ul = this.addClass(o.hoverClass)
   $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
   return this;
LinkedIn: jM
johnMoss is offline   Reply With Quote

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 04:29 AM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com