tech @ Beacon Deacon

A cross-browser Superfish horizontal menu with fixed position and automatic resizing of menu items

James "Jamie" Johnson

I was looking for a good horizontal menu to implement the other week and came across Superfish. It works well in modern browsers across the board. However, some of my customers, sadly, still use older Internet Explorer versions, such as IE 7. I did not find in my searches a Superfish menu that worked fully cross-browser. So, I tweaked it to make it so. Further, I made its position fixed so it follows as you scroll. I also added my own script to set the width of the menu items automatically based on how many are there.

Below, I have included the code for the menu to work. I have made the essential assets linkable so you can either view or download them. Please be sure to look at the comments I have placed in menu.css where I have disabled some of the original borders, etc., and also where I specify how to disable the dropdown arrows if desired (They are enabled in this instance).

UPDATE! If using this implementation with Nivo Slider, there will be issues, especially on iOS. Please refer to my article Nivo Slider issue induced by Superfish.

Please contact me if you have questions.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="menu.css" />
<link rel="stylesheet" href="template.css" />
<script type="text/javascript" language="javascript" src="hoverIntent.js"></script>
<script type="text/javascript" language="javascript" src="superfish.js"></script>
<script>

(function($){ //create closure so we can safely use $ as alias for jQuery

$(document).ready(function(){

      // initialise plugin
      var example = $('#example').superfish({
           //add options here if required
      });

      // buttons to demonstrate Superfish's public methods
      $('.destroy').on('click', function(){
           example.superfish('destroy');
      });

      $('.init').on('click', function(){
           example.superfish();
      });

      $('.open').on('click', function(){
           example.children('li:first').superfish('show');
      });

      $('.close').on('click', function(){
           example.children('li:first').superfish('hide');
      });
});

})(jQuery);


</script>
heading...
<div id="content-wrapper">
<div class="sf-menu-parent">
<ul class="sf-menu" id="example">
<li class="sftopli">
<div class="rtbrdr">&#160;</div>
<b><a class="sftopa" href="/index.html">Tech @ Beacon Deacon</a></b>
</li>
<li class="sftopli">
<div class="rtbrdr">&#160;</div>
<a class="sftopa" href="#">James Arthur Johnson ("Jamie")</a>
      <ul>
      <li>
      <a href="http://about.me/jamie.johnson">About.me</a>
      </li>
      <li>
      <a href="http://educ.jmu.edu/~johns2ja/resume.html">Resum&eacute;</a>
      </li>
      <li>
      <a href="http://educ.jmu.edu/~johns2ja/resume/pro/portfolio.pdf">Portfolio</a>
      </li>
      <li>
      <a href="http://www.linkedin.com/profile/view?id=45516116">LinkedIn</a>
      </li>
      <li>
      <a href="https://twitter.com/jamesarthurjohn">Twitter</a>
      </li>
      <li>
      <a href="https://plus.google.com/117412244220421867278/posts">Google+</a>
      </li>
      <li>
      <a href="https://www.facebook.com/beacon.deacon">Facebook</a>
      </li>
      <li>
      <a href="http://beknown.com/jamie_johnson">BeKnown</a>
      </li>
      </ul>
</li>
<li class="current sftopli">
<!--<div class="rtbrdr">&#160;</div> REMOVED last border -->
<a class="sftopa" href="http://beacondeacon.com/">Beacon Deacon</a>
      <ul>
      <li>
      <a href="http://beacondeacon.com/ichthus/">Ichthus Library</a>
      </li>
      <li>
      <a href="http://beacondeacon.com/discourses/">Discourses</a>
      </li>
      <li>
      <a href="http://beacondeacon.com/private/psych/">Psychology and Counseling</a>
      </li>
      <li>
      <a href="http://family.beacondeacon.com/">My Family Tree</a>
      </li>
      <li>
      <a href="http://howzyerteeth.beacondeacon.com/">
      Howz Yer Teeth?!<br />For kids of all ages...</a>
      </li>
      </ul>
</li>
</ul>

<script type="text/javascript" language="javascript">
/*  by James Arthur Johnson.  This script automatically sets the menu item widths */
var numli;
var hnavliwidth;
$(document).ready(function(){
     numli=$('.sf-menu > li').length;
     hnavliwidth = 960/numli;
     $('.sf-menu li').css("width",hnavliwidth+"px");
     $('.sf-menu ul').css("width",hnavliwidth+"px");
jQuery('ul.sf-menu').superfish();
});
</script>
</div>
<!--[if lt IE 8]>
<script>
/* by James Arthur Johnson. This script automatically sets the menu item widths for IE 7. Note that 928 is used because 960 - 16 - 16 (considering padding in IE 7) */
$(document).ready(function(){ 
hnavliwidth = 928/numli;
      $('.sf-menu li').css("width",hnavliwidth+"px");
      $('.sf-menu ul').css("width",hnavliwidth+"px");
});
</script>
<![endif]-->

<!--[if IE]>
<script>
$(document).ready(function(){ /* Added by Jamie to auto center IE top links */
      /* This is only needed if no DTD present; DISABLED for this instance
      $('.sftopa').each(function(){
           wordz = $(this).html().length;
           limargin = hnavliwidth - wordz;
           limargin = limargin/numli;
           $(this).css('left',limargin);
      });*/
});
</script>
<![endif]-->

<div id="content">

Content goes here…

</div><!-- end content -->
</div><!-- end content-wrapper -->