Advanced Search

suckerfish dropdown menu for Joomla 1.5 | joomla 1.5 tutorials

/ Published in: CSS
Save to your folder(s)
here's the suckerfish dropdown menu for Joomla 1.5 that written by tbianco. It's extremely easy and here's what you need to do:

1) Create the main menu module and add a suffix to it of '_topmenu'. I use the underscore to so that the class name in the css is now ".moduletable_topmenu" I want to make sure in my code there is a seperation from the typical ".moduletable" and ".moduletable_topmenu". Besides it's REALLY bad coding practice to run words together unless you are camelCasing them. I am just used to ruby so I have using the underscore for variable names.

2) While in the module for your main menu (under module manager) be sure to check YES for "Always show sub-menu Items". It's in the module param section.

3) It's time to place the CSS code onto the page: (I added the opacity ability just in case you wanted to make the sub menus transparent)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* =======================================
  2.     Top Menu aka Main Menu
  3.     ======================================= */
  4.     .moduletable_topmenu{
  5.        padding:0;
  6.        color: #333;
  7.        height: 30px;
  8.        margin: 0;
  9.        width: 500px;
  10.        font-size: 90%
  11.     }
  12.  
  13.     .moduletable_topmenu h3 {
  14.        background:#666;
  15.        color:#fff;
  16.        padding:0.25em 0;
  17.        text-align:center;
  18.        font-size:1.1em;
  19.        margin:0;
  20.     }
  21.  
  22.     .moduletable_topmenu ul{
  23.        list-style: none;
  24.        margin: 0;
  25.        padding: 0;
  26.     }
  27.  
  28.     .moduletable_topmenu li{
  29.        margin: 0px 15px 0px 0px;
  30.        float: left;
  31.     }
  32.     .moduletable_topmenu li ul {
  33.        position: absolute;
  34.        width: 135px;
  35.        left: -999em;
  36.        border: 1px solid #474748;
  37.        border-bottom: none;
  38.        top: 22px;
  39.     }
  40.     .moduletable_topmenu li:hover ul {
  41.        left: auto;
  42.     }
  43.     .moduletable_topmenu li ul li {
  44.        width: 135px;
  45.        padding: 0;
  46.        border-bottom: 1px solid #474748;
  47.     }
  48.  
  49.     .moduletable_topmenu li a{
  50.        display: block;
  51.        padding: 5px;
  52.        background-color:#fff;
  53.        color: #000;
  54.        font-weight: bold;
  55.        text-decoration: none;
  56.     }
  57.     html>body .moduletable_topmenu li a {
  58.        width: auto;
  59.     }
  60.  
  61.     .moduletable_topmenu li ul li a {
  62.        width: 125px;
  63.        background-color: #221f20;
  64.        color: #fff;
  65.        /* ---
  66.        filter:alpha(opacity=80);
  67.        -moz-opacity: 0.8;
  68.        opacity: 0.8;*/
  69.     }
  70.  
  71.  
  72.     .moduletable_topmenu li a:hover,a#active_menu:link,a#active_menu:visited{
  73.        color: #e22f00;
  74.        text-decoration: none;
  75.        /* ---
  76.        filter:alpha(opacity=100);
  77.        -moz-opacity: 1.0;
  78.        opacity: 1.0;*/
  79.     }
  80.  
  81.     .moduletable_topmenu li ul li a:hover {
  82.        background-color: #e22f00;
  83.        color: #fff;
  84.        background: url(../images/top_link_bg2_on.png) repeat-y top left;
  85.     }
  86.  
  87.     .moduletable_topmenu li:hover ul, .moduletable_topmenu li.sfhover ul {
  88.        left: auto;
  89.     }
  90.  
  91.  
  92.     .moduletable_topmenu ul li.active a {
  93.        color: #038fd9;
  94.        text-decoration: none;
  95.     }
  96.     .moduletable_topmenu li.parent.active a {
  97.        color: #038fd9;
  98.        text-decoration: none;
  99.     }
  100.     .moduletable_topmenu li.parent.active a:hover {
  101.        color: #e22f00;  
  102.     }
  103.  
  104.     .moduletable_topmenu li.parent.active ul li a {
  105.        color: #fff;
  106.        text-decoration: none;
  107.     }
  108.     .moduletable_topmenu li.parent.active ul li a:hover {
  109.        color: #fff;
  110.        text-decoration: none;
  111.     }
  112. 4) To make this really work there are several things that need to be done, follow along because it requires you editing the index.php file (your template file, now understand that I created my own template) and also adding some js into your template.
  113.  
  114. In your index.php file it's important to note the name of the div tag that holds your top module position . For example here in my index.php I have code that looks like this:
  115.  
  116.  <div id="header">
  117.    <div id="header_container">
  118.       <div id="top_menu">
  119.          <jdoc:include type="modules" name="top" style="xhtml" />
  120.       </div>
  121.       <div id="logo">
  122.          <a href="http://patronsaintmedia.com" title="Patron Saint Media"><img src="templates/<?php echo $this->template; ?>/images/logo.png" width="107" height="103" /></a>
  123.       </div>
  124.    </div>
  125. </div>
  126.  
  127. Notice the div with the id of "top_menu". 
  128.  
  129.         <div id="top_menu">
  130.            <jdoc:include type="modules" name="top" style="xhtml" />
  131.         </div>
  132.  
  133.     This is important because in order to get the suckerfish dropdown in IE to work we need to reference the id of the container for that menu. so instead of placing the id in the
  134.  
  135.           like they do in the typical suckerfish article we will place it in the div tag for the module that will be used ONLY for the holding of the top menu. Yes this is a dirty trick but none the less it works.
  136.  
  137.           Now create a js file, I call mine custom_lib.js and add the following code into it:
  138.         sfHover = function()
  139.         {
  140.            var sfEls = document.getElementById("top_menu").getElementsByTagName("LI");
  141.            for (var i=0; i<sfEls.length; i++)
  142.            {
  143.               sfEls[i].onmouseover=function()
  144.               {
  145.                  this.className+=" sfhover";
  146.               }
  147.  
  148.               sfEls[i].onmouseout=function()
  149.               {
  150.                  this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  151.               }
  152.            }
  153.         }
  154.         if (window.attachEvent) window.attachEvent("onload", sfHover);
  155.     Place that js file in a folder (within a chosen template you're using) and name that folder "js".
  156.  
  157.     In your chosen template ad this to the head tag:
  158.          <script type="text/javascript" src="templates/<?php echo $this->template; ?>/js/custom_lib.js"></script>
  159.  
  160.     5) You're good to go now just modify the styles within the css file and you should be good to go!

URL: http://joomlatp.com/joomla-1.5-tutorials/suckerfish-dropdown-menu-for-Joomla-1.5.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.