CSS Joomla 1.5的suckerfish下拉菜单joomla 1.5教程

Posted 2021-05-23

/* =======================================
    Top Menu aka Main Menu
    ======================================= */
    .moduletable_topmenu{
       padding:0;
       color: #333;
       height: 30px;
       margin: 0;
       width: 500px;
       font-size: 90%
    }

    .moduletable_topmenu h3 {
       background:#666;
       color:#fff;
       padding:0.25em 0;
       text-align:center;
       font-size:1.1em;
       margin:0;
    }

    .moduletable_topmenu ul{
       list-style: none;
       margin: 0;
       padding: 0;
    }

    .moduletable_topmenu li{
       margin: 0px 15px 0px 0px;
       float: left;
    }
    .moduletable_topmenu li ul {
       position: absolute;
       width: 135px;
       left: -999em;
       border: 1px solid #474748;
       border-bottom: none;
       top: 22px;
    }
    .moduletable_topmenu li:hover ul {
       left: auto;
    }
    .moduletable_topmenu li ul li {
       width: 135px;
       padding: 0;
       border-bottom: 1px solid #474748;
    }

    .moduletable_topmenu li a{
       display: block;
       padding: 5px;
       background-color:#fff;
       color: #000;
       font-weight: bold;
       text-decoration: none;
    }
    html>body .moduletable_topmenu li a {
       width: auto;
    }

    .moduletable_topmenu li ul li a {
       width: 125px;
       background-color: #221f20;
       color: #fff;
       /* ---
       filter:alpha(opacity=80);
       -moz-opacity: 0.8;
       opacity: 0.8;*/
    }


    .moduletable_topmenu li a:hover,a#active_menu:link,a#active_menu:visited{
       color: #e22f00;
       text-decoration: none;
       /* ---
       filter:alpha(opacity=100);
       -moz-opacity: 1.0;
       opacity: 1.0;*/
    }

    .moduletable_topmenu li ul li a:hover {
       background-color: #e22f00;
       color: #fff;
       background: url(../images/top_link_bg2_on.png) repeat-y top left;
    }

    .moduletable_topmenu li:hover ul, .moduletable_topmenu li.sfhover ul {
       left: auto;
    }


    .moduletable_topmenu ul li.active a {
       color: #038fd9;
       text-decoration: none;
    }
    .moduletable_topmenu li.parent.active a {
       color: #038fd9;
       text-decoration: none;
    }
    .moduletable_topmenu li.parent.active a:hover {
       color: #e22f00;  
    }

    .moduletable_topmenu li.parent.active ul li a {
       color: #fff;
       text-decoration: none;
    }
    .moduletable_topmenu li.parent.active ul li a:hover {
       color: #fff;
       text-decoration: none;
    }
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.

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:

 <div id="header">
   <div id="header_container">
      <div id="top_menu">
         <jdoc:include type="modules" name="top" style="xhtml" />
      </div>
      <div id="logo">
         <a href="http://patronsaintmedia.com" title="Patron Saint Media"><img src="templates/<?php echo $this->template; ?>/images/logo.png" width="107" height="103" /></a>
      </div>
   </div>
</div>

Notice the div with the id of "top_menu". 

        <div id="top_menu">
           <jdoc:include type="modules" name="top" style="xhtml" />
        </div>
     
    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

          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.

          Now create a js file, I call mine custom_lib.js and add the following code into it:
        sfHover = function()
        {
           var sfEls = document.getElementById("top_menu").getElementsByTagName("LI");
           for (var i=0; i<sfEls.length; i++)
           {
              sfEls[i].onmouseover=function()
              {
                 this.className+=" sfhover";
              }

              sfEls[i].onmouseout=function()
              {
                 this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
              }
           }
        }
        if (window.attachEvent) window.attachEvent("onload", sfHover);
    Place that js file in a folder (within a chosen template you're using) and name that folder "js".

    In your chosen template ad this to the head tag:
         <script type="text/javascript" src="templates/<?php echo $this->template; ?>/js/custom_lib.js"></script>
     
    5) You're good to go now just modify the styles within the css file and you should be good to go!