SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Suckerfish2 Menu Help.....

    OK, I downloaded the new and improved suckerfish menus. I think I found the link in a post by Paul O'B.

    I have been playing with the CSS and have something like this:

    http://www.evolutionmsport.com/temp/sucker2.php

    Now the problem I am having is when I try to move my mouse to a 2nd level menu, the mouse seems to only go over as for as the hover effect and I cannot get to the cascading portion of the menu.

    Also, I would like the little arrows to be right justified.

    Finally, reading the documentation for the Menu, it says it does not work in Netscape 6.0. Does anyone have netscape 6.0 and if so, what does not work mean? Do the menus show???

    I would love to be able to use this menu because it is so lightweight. Right now I have the brainjar menu, but that has tons of code in it.

    Thanks...Mike
    Evolution Motorsport
    The Performance Company

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Mike,

    Try using a full doctype even when you are testing. I think you'll find that ie starts behaving better.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Mike,

    Try using a full doctype even when you are testing. I think you'll find that ie starts behaving better.

    Paul

    Paul,

    Thanks. I added the Doctype, and that clears up part of the problem. However, in Mozilla to menu heading seem to crash into each other. Also, the arrows are still not fully right justified. There seems to be some padding somewhere. I just can't figure out where it is defined.

    Also, in IE as I scroll over to the 2nd or 3rd level menus, the arrows flicker.

    Finally, it seems as though all the dropdown boxes are the same width. I don't really mind that, but was wondering of I could have them fit to the largest entry. And allow the hover to fill the complete width, rather than just the text.

    Thanks...Mike
    Evolution Motorsport
    The Performance Company

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Mike,

    I'm having problems with the computer crashing at the moment so I'm giving up for the night but If I can get it stable I'll have a look tomorrow.

    Paul

  5. #5
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Mike,

    I'm having problems with the computer crashing at the moment so I'm giving up for the night but If I can get it stable I'll have a look tomorrow.

    Paul
    Cool, good luck with the computer.

    Thanks...Mike
    Evolution Motorsport
    The Performance Company

  6. #6
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I just tried it and the arrow flicking problem is gone, although I didn't do anything.

    Did anyone get a chance to look at this in Netscape 6.0 or should I just load that software.

    Also any ideas on fluid widths, or removing the padding to the right of the arrows on the dropdowns?

    Thanks...Mike
    Evolution Motorsport
    The Performance Company

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Mike,

    I was looking at this but my system keeps going down (time for a new computer I think) si I didn't make mucch headway.

    I had a look in NN6 and nothing was showing at all. I could manage to get the first level to display by changing the design but NN6 doesn't support the hover properly and will only hover after the text for some reason. Checking on the web it seems that this is the reason that no one has been able nn6 work with the suckerfish menus.

    You would have to just make the first level a link for NN6 and send it to an intermediate page. You will probably have to do this anyway for ie users with js disabled.

    Unfortunately my system when down and I lost the code so I don't have anything to offer for NN6 at the moment.

    Regarding fluid widths I manged to get ie working ok with a bit of hacking but mozilla won't enlarge the child to be bigger than the parent. The easiest solution would be just to increase the widths to cover all the text.

    This is the line you need to alter to move the first level farther apart.
    Code:
    #nav li {
     float:left;
     margin-right:25px;
    }
    In your page its set to 90px so you could just set it to something larger or try a min-width. Ie increases the width automatically anyway.

    I was also messing about with teh code below which doesn't look to bad in firefox but isn't right in IE. You might be able to play around with it a bit


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body { 
     margin: 0; 
     padding: 0; 
     color: #000; 
     background-color: #fff; 
     text-align: justify; 
     font: normal 76%/150% "Lucida Grande", LucidaGrande, Lucida, Tahoma, Arial, Helvetica, sans-serif;
    /* font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size:76%; */
     }
    #container {
     width: 80%;
    /* background: #669cff; */
     text-align: left;
     border: 1px solid #fff;
     margin: 0 auto;
    }
    #nav, #nav ul {
     float:left;
     width: 100%;
     line-height: 1;
     list-style: none;
     background: #669cff;
     font-weight: bold;
     padding: 0;
     border: 1px solid #000;
     margin: 0 0 1em 0;
     white-space: nowrap;
    }
    #nav a {
     display: block;
     color: #fff;
     text-decoration: none;
     padding: 0.25em 0 ;
    }
    #nav a.daddy {
     background: url(http://www.evolutionmsport.com/temp/rightarrow.gif) center right no-repeat;
    }
    #nav li {
     float:left;
     margin-right:25px;
     min-width:90px;
    }
    #nav li ul {
     position: absolute;
     left: -999em;
     height: auto;
     width: 13.9em;
     font-weight: normal;
     border-width: 1px;
     margin: 0;
    }
    #nav li li {
     width:100%;
    }
    #nav li ul a {
     display:block;
     color:#000;
    }
    #nav li ul ul {
     margin: -1.55em 0 0 100%;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
     left: -999em;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
     left: auto;
    }
    #nav li:hover, #nav li.sfhover {
     background: #2500ff;
     color:#fff;
    }
    </style>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
     var sfEls = document.getElementById("nav").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);
    //--><!]]></script>
    </head>
    <body>
    <div id="container">
    <ul id="nav">
     <li><a href="evm-page2.php?pag=1">About EvM</a>
     <ul>
      <li><a href="evm-page2.php?pag=2">News</a></li>
      <li><a href="evm-page2.php?pag=3">Contact Us</a></li>
      <li><a href="evm-page2.php?pag=4">Privacy Notice</a></li>
      <li><a href="evm-page2.php?pag=5">Terms and Conditions</a></li>
      <li><a href="evm-page2.php?pag=6">Product Purchase Agreement</a></li>
      <li><a href="evm-page2.php?pag=7">Site Map</a></li>
     </ul>
     </li>
     <li><a href="evm-page2.php?pag=8">Product Catalog</a>
     <ul>
      <li><a class="daddy" href="evm-page2.php?pag=9">Rear Suspension</a>
      <ul>
       <li><a href="evm-page2.php?pag=10">Watts Link</a></li>   
       <li><a href="evm-page2.php?pag=13">Tri-Link</a></li>
       <li><a href="evm-page2.php?pag=14">Stabilizer Bars</a></li>
       <li><a href="evm-page2.php?pag=15">Modular LCAs</a></li>
      </ul>
      </li>
      <li><a  class="daddy" href="evm-page2.php?pag=16">Chassis Stiffening</a>
      <ul>
       <li><a href="evm-page2.php?pag=18">Shorty "X" Brace</a></li>
       <li><a href="evm-page2.php?pag=19">Full Length "X" Brace</a></li>
       <li><a href="evm-page2.php?pag=20">"Spyder" Brace</a></li>
       <li><a href="evm-page2.php?pag=21">"V" Brace</a></li>
      </ul>
      </li>
      <li><a class="daddy"  href="evm-page2.php?pag=23">Logo Items</a>
      <ul>
       <li><a href="evm-page2.php?pag=24">T Shirts</a></li>
       <li><a href="evm-page2.php?pag=25">Decals</a></li>
      </ul>
      </li>
     </ul>
     </li>
     <li class="daddy"><a href="evm-page2.php?pag=26">Team EvM</a>
     <ul>
      <li><a class="daddy"  href="evm-page2.php?pag=31">Project Cars</a>
      <ul>
       <li><a  class="daddy" href="evm-page2.php?pag=32">Project Evolution</a>
       <ul>
    	<li><a href="evm-page2.php?pag=33">Auto Trim Express</a></li>
    	<li><a href="evm-page2.php?pag=34">B&M</a></li>
    	<li><a href="evm-page2.php?pag=35">BBS</a></li>
    	<li><a href="evm-page2.php?pag=36">BeaveRun</a></li>
    	<li><a href="evm-page2.php?pag=37">BFgoodrich</a></li>
    	<li><a href="evm-page2.php?pag=38">Fox Run</a></li>
    	<li><a href="evm-page2.php?pag=39">K&N</a></li>
    	<li><a href="evm-page2.php?pag=40">Koni</a></li>
    	<li><a href="evm-page2.php?pag=41">Nitrous Works</a></li>
    	<li><a href="evm-page2.php?pag=42">Maximum Motorsports</a></li>
    	<li><a href="evm-page2.php?pag=43">Prestige Powder</a></li>
    	<li><a href="evm-page2.php?pag=44">SLP</a></li>
    	<li><a href="evm-page2.php?pag=45">Spin Tech</a></li>
    	<li><a href="evm-page2.php?pag=46">Vogtland</a></li>
       </ul>
       </li>
      </ul>
      </li>
     </ul>
     </li>
     <li><a href="evm-page2.php?pag=48">Tech</a>
     <ul>
      <li><a href="evm-page2.php?pag=49">Suspension Basics</a></li>
      <li><a href="evm-page2.php?pag=50">Forum Discussions</a></li>
      <li><a href="evm-page2.php?pag=51">Calculators</a></li>
      <li><a href="evm-page2.php?pag=52">FAQ</a></li>
     </ul>
     </li>
     <li><a href="evm-page2.php?pag=53">Links</a>
     <ul>
      <li><a href="evm-page2.php?pag=54">Mustang Sites</a></li>
      <li><a href="evm-page2.php?pag=55">Mustang Forums</a></li>
      <li><a href="evm-page2.php?pag=56">Mustang Magazines</a></li>
      <li><a href="evm-page2.php?pag=57">Project Partners</a></li>
      <li><a href="evm-page2.php?pag=58">Technical</a></li>
     </ul>
     </li>
    </ul>
    </div>
    </body>
    </html>
    Sorry I can't offer anything better but I haven't really been able to spend any time on it.

    paul

  8. #8
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Mike,

    I was looking at this but my system keeps going down (time for a new computer I think) si I didn't make mucch headway.

    Sorry I can't offer anything better but I haven't really been able to spend any time on it.

    paul
    Paul, Thanks for all the help. I am thinking that this menu may require more tweaking than its worth, since I have one that works.

    I will look around for one that works in NN6. Thanks again for all of your help.

    Thanks...Mike
    Evolution Motorsport
    The Performance Company

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I will look around for one that works in NN6
    Thats probably best for now

    When I get time I will look into that suckerfish menu as I seem to keep having to fix peoples layouts that use it lately

    Paul

  10. #10
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Thats probably best for now

    When I get time I will look into that suckerfish menu as I seem to keep having to fix peoples layouts that use it lately

    Paul

    Yeah it would be nice if that thing would work, its so lightweight. The brainjar menu I am using is like 300-400 lines of code.

    Thanks...Mike
    Evolution Motorsport
    The Performance Company


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •