Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Okay, so my problem is simple: I've got some CSS dropdowns set up, with a little Javascript mixed in to make IE work (direct descendant selectors and :hovers on lis are throwing it off). However, when I hover over a list item with a submenu, an extra space appears under the hovered item. See the behavior at http://theoldquarter.dyndns.org:3000/ (be kind, it's a development Rails server running on my home computer). The CSS is linked in, it's at http://theoldquarter.dyndns.org:3000...ts/general.css

    Thanks in advance for any help :-)

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    shadowfiend ...

    That Javascript menu deal you have is really complex.
    There are multiple js scripts for the whole thing?

    <script src="/javascripts/effects.js?1153348068" type="text/javascript"></script>
    <script src="/javascripts/dragdrop.js?1153348068" type="text/javascript"></script>
    <script src="/javascripts/controls.js?1153348068" type="text/javascript"></script>
    <script src="/javascripts/lowpro.js?1158773082" type="text/javascript"></script>
    <script src="/behaviours/index.js?" type="text/javascript"></script>
    <script src="/javascripts/application.js?1158379128" type="text/javascript"></script>
    <script src="/javascripts/pages/show.js?" type="text/javascript"></script>


    What's the deal with that?

    I think you should go pure CSS and lose the Javascripting.

    http://www.seoconsultants.com/css/menus/vertical/
    http://www.cssplay.co.uk/menus/dd_valid.html
    http://www.csscreator.com/menu/multimenu.php


  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    The menu is Javascriptless on all non-IE browsers, if you glance at the CSS. Those various JS includes are, in order, the script.aculo.us effects, drag & drop, and controls libraries, followed by the lowpro library that provides some Behaviour functionality, followed by the behaviour file for the index page, followed by the general JS file with my application-wide data, followed by the JS file associated with that particular Rails controller (which I don't think exists at the moment).

    The point is, the Javascript of interest is in /behaviours/index.js, and is inaccessible except by the browser (i.e., pointing your browser to that file in particular doesn't seem to work). Moreover, I doubt the JS is the problem, and it isn't what drives the menus on non-IE browsers :-)

    I can write out the JS here, though:
    PHP Code:
      <% # Once we've built the HTML, we add the behaviors to provide
            # Javascript-driven dropdowns for those idiotic browsers (*cough*
            # IE *cough*) that don't support proper CSS dropdowns.
            
    apply_behaviour 'ul.menu li:mouseover',
                
    'this.className = "hover";' +
                
    '$A(this.childNodes).each(
                    function( elt )
                    {
                        if ( elt.tagName == "UL" )
                            elt.className = "parent_li_hovered";
                    } );'
    ;
           
    apply_behaviour 'ul.menu li:mouseout',
                
    'this.className = "";' +
                
    '$A(this.childNodes).each(
                    function( elt )
                    {
                        if ( elt.tagName == "UL" )
                            elt.className = "";
                    } );'
    ;

           
    apply_behaviour 'ul.menu li:mouseover > ul''this.className = "hover";'
           
    apply_behaviour 'ul.menu li:mouseout > ul''this.className = "";' %> 
    If you need any extra explanation, let me know. (By the way, this isn't PHP code, but the PHP highlighting is useful. This is Ruby.)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:18 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com