#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2005
    Posts
    18
    Rep Power
    0

    Suckerfish menu modification


    Hi,

    I am about to build a new web site for the company I work for. It's been decided that the main navigation menu should be a one-level horizontal drop-down menu. The site will be centered and have a fixed width (960px).

    Problem 1, distribution:

    The first problem was to get the menu ďbuttonsĒ to be even horizontally distributed over the full width. After a lot of testing I found itís not possible without setting fixed widths, and thatís not an option because the site will be translated into at least 10 different languages (and then you would have to change the width for every language).
    My second thought was to use CSS display:table; (table-row and table-cell), but thatís no good either because it does not work in Internet Explorer (6 and 7) and we don't want to deal with dual markup.
    I canít say I like it but my solution is basically to use a one-row <table> with the actual drop-down as a <ul>. Thoughts, better solutions and/or other ideas are appreciated?

    Problem 2, align right:

    Ok, so I have the markup and the modified Suckerfish CSS and scripts (see below) and it works perfectly. Now, I need help with getting the last drop-down (furthest to the right) to align right, not left as it does now. I tried to play around with right:auto;, but that gives no effect. Can anyone help me with this?

    This is a working example, just paste it into a html-file and run it (it will need some CSS modifications to look good in IE 6).

    Code:
    <!DOCTYPE html 
        PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb" dir="ltr">
        <head>
            <title>Suckerfish Menu</title>
            <style type="text/css">
                /*********************************************/
                body {
                    margin:0;
                    font-family:Sans-Serif;
                    font-size:0.69em;
                    line-height:1.45em;
                    text-align:center;
                }
                .site {
                    width:960px;
                    margin:0 auto;
                    text-align:left;
                }
                /**************** MENU STYLES ****************/
                .siteMainMenu {
                    margin:0;
                    width:100%;
                    padding:0;
                    line-height:1;
                }
               .siteMainMenu a {
                    background:#333 none;
                    color:#fff;
                    
                    display:block;
                    margin-top:1px;
                    padding:5px 10px;
                    
                    font-weight:bold;
                    text-decoration:none;
                    text-transform:uppercase;
                    text-align:center;
                    white-space:nowrap;
                }
               .siteMainMenu a:hover {
                    background:#999 none;
                }
                .siteMainMenu ul {
                    position:absolute;
                    margin:0;
                    padding:0;
                    top:auto;
                    list-style-type:none;
                }
               .siteMainMenu ul a {
                    background:#666 none;
                    text-align:left;
                }
               .siteMainMenu ul a:hover {
                    background:#999 none;
                }
                .siteMainMenu td.left ul, 
                .siteMainMenu td.mid ul {
                    left:-999em;
                }
                .siteMainMenu td.right ul {
                    right:999em;
                }
                .siteMainMenu td.left:hover ul, 
                .siteMainMenu td.left.over ul,
                .siteMainMenu td.mid:hover ul, 
                .siteMainMenu td.mid.over ul {
                    left:auto;
                }
                .siteMainMenu td.right:hover ul, 
                .siteMainMenu td.right.over ul {
                    right:auto;
                }
                /*********************************************/
            </style>
            
            <script type="text/javascript">
            //<![CDATA[
                /**************** addEvent SCRIPTS ****************/
                function addEvent(element, type, handler) {
                    if (element.addEventListener) {
                        element.addEventListener(type, handler, false);
                    } else {
                        if (!handler.$$guid) handler.$$guid = addEvent.guid++;
                        if (!element.events) element.events = {};
                        var handlers = element.events[type];
                        if (!handlers) {
                            handlers = element.events[type] = {};
                            if (element["on" + type]) {
    	                        handlers[0] = element["on" + type];
                            }
                        }
                        handlers[handler.$$guid] = handler;
                        element["on" + type] = handleEvent;
                    }
                };
                addEvent.guid = 1;
                function removeEvent(element, type, handler) {
                    if (element.removeEventListener) {
                        element.removeEventListener(type, handler, false);
                    } else {
                        if (element.events && element.events[type]) {
                            delete element.events[type][handler.$$guid];
                        }
                    }
                };
                function handleEvent(event) {
                    var returnValue = true;
                    event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
                    var handlers = this.events[event.type];
                    for (var i in handlers) {
                        this.$$handleEvent = handlers[i];
                        if (this.$$handleEvent(event) === false) {
                            returnValue = false;
                        }
                    }
                    return returnValue;
                };
                function fixEvent(event) {
                    event.preventDefault = fixEvent.preventDefault;
                    event.stopPropagation = fixEvent.stopPropagation;
                    return event;
                };
                fixEvent.preventDefault = function() {
                    this.returnValue = false;
                };
                fixEvent.stopPropagation = function() {
                    this.cancelBubble = true;
                };
                /*********************************************/
            //]]>
            </script>
            <script type="text/javascript">
            //<![CDATA[
                /**************** Suckerfish SCRIPTS ****************/
                function findAndApplySuckerfishHover () {
                    var suckerfishMenus = getElementsByClassName('suckerfish');
                    for (var i = 0, j = suckerfishMenus.length; i < j; i++) {
                        suckerfishHover(suckerfishMenus[i]);
                    }
                }
    
                function getElementsByClassName (cssClass) {
                    var elementsToSearch = document.getElementsByTagName('*');
                    var elementsThatMatch = new Array();
                    var regexp = new RegExp('\\b' + cssClass + '\\b', 'g');
                    for (var i = 0, j = elementsToSearch.length; i < j; i++) {
                        if (regexp.test(elementsToSearch[i].className)) {
                            elementsThatMatch.push(elementsToSearch[i]);
                        }
                    }
                    return elementsThatMatch;
                }
    
                function suckerfishHover (element) {
                    var cssClass = 'over';
                    var elements = element.getElementsByTagName('TD');
                    var regexp = new RegExp('\\b' + cssClass + '\\b', 'g');
                    for (var i = 0, j = elements.length; i < j; i++) {
                        elements[i].onmouseover = function() {
                            if (!regexp.test(this.className)) {
                                this.className += ' ' + cssClass;
                            }
                        }
                        elements[i].onmouseout = function() {
                            this.className = this.className.replace(regexp, '');
                        }
                    }
                }
                /*********************************************/
            //]]>
            </script>
            <script type="text/javascript">
            //<![CDATA[
                /*********************************************/
                addEvent(window, 'load', function() { 
                    findAndApplySuckerfishHover();
                });
                /*********************************************/
            //]]>
            </script>
        </head>
        <body>
            <form method="post" action="" class="site">
                <div class="siteHeadingBottom">
                    <table class="siteMainMenu suckerfish">
                        <tr>
                            <td class="left"><a href="#">Item #1</a>
    	                        <ul>
    		                        <li><a href="#">Item #1:1</a></li>
    		                        <li><a href="#">Item #1:2</a></li>
    		                        <li><a href="#">Item #1:3</a></li>
    	                        </ul>
                            </td>
                            <td class="mid"><a href="#">Item #2</a>
    	                        <ul>
    		                        <li><a href="#">Item #2:1</a></li>
    		                        <li><a href="#">Item #2:2</a></li>
    		                        <li><a href="#">Item #2:3</a></li>
    		                        <li><a href="#">Item #2:4</a></li>
    		                        <li><a href="#">Item #2:5</a></li>
    		                        <li><a href="#">Item #2:6</a></li>
    	                        </ul>
                            </td>
                            <td class="mid"><a href="#">Item #3</a></td>
                            <td class="mid"><a href="#">Item #4</a>
    	                        <ul>
    		                        <li><a href="#">Item #4:1</a></li>
    		                        <li><a href="#">Item #4:2</a></li>
    		                        <li><a href="#">Item #4:3</a></li>
    		                        <li><a href="#">Item #4:4</a></li>
    	                        </ul>
                            </td>
                            <td class="mid"><a href="#">Item #5</a>
    	                        <ul>
    		                        <li><a href="#">Item #5:1</a></li>
    	                        </ul>
                            </td>
                            <td class="mid"><a href="#">Item #6</a>
    	                        <ul>
    		                        <li><a href="#">Item #6:1</a></li>
    		                        <li><a href="#">Item #6:2</a></li>
    		                        <li><a href="#">Item #6:3</a></li>
    		                        <li><a href="#">Item #6:4</a></li>
    		                        <li><a href="#">Item #6:5</a></li>
    	                        </ul>
                            </td>
                            <td class="right"><a href="#">Item #7</a>
    	                        <ul>
    		                        <li><a href="#">Item #7:1</a></li>
    		                        <li><a href="#">Item #7:2</a></li>
    		                        <li><a href="#">Item #7:3</a></li>
    		                        <li><a href="#">Item #7:4</a></li>
    		                        <li><a href="#">Item #7:5</a></li>
    		                        <li><a href="#">Item #7:6</a></li>
    		                        <li><a href="#">Item #7:7</a></li>
    	                        </ul>
                            </td>
                        </tr>
                    </table>
                </div>
            </form>
        </body>
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2005
    Posts
    18
    Rep Power
    0

    Solution


    Hi again,

    I found a solution to my problems with the help of a good night sleep and some colleges. There was a numerous problems I had to fix in order to get a good result.

    Move class declarations
    I had to move the class attribute on the TDs to the ULs.

    Fix the right align problem
    Since I have a fixed width on the site itself, I just had do add:
    Code:
    right: 50%;
    margin-right:-480px; /* half the site width */
    instead of:
    Code:
    right: auto;
    Weird IE 6 bottom margin
    I had add a border bottom declaration in order get rid of a weird spacing between the LIs in IE 6.
    Code:
    text-transform:uppercase;
    white-space:nowrap;
    Weird IE 6 right margin
    When I had the CSS below, IE 6 freaked out on the right hand margin of the As. I have no clue why ...
    Code:
    text-transform:uppercase;
    white-space:nowrap;
    Opera and fixed width
    As stated on the Suckerfish web site you might have to add a fixed width on the drop-downs otherwise "Opera goes nuts" ...
    Code:
    .siteMainMenu li {width: 10em;}
    Here is a working solution (it's not 100% finished, but you get the idea)
    Code:
    <!DOCTYPE html 
        PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb" dir="ltr">
        <head>
            <title>Suckerfish Menu</title>
            <style type="text/css">
                /*********************************************/
                body {
                    margin:0;
                    font-family:Sans-Serif;
                    font-size:0.69em;
                    line-height:1.45em;
                    text-align:center;
                }
                table {
                    border-collapse:collapse;
                }
                .site {
                    width:960px;
                    margin:0 auto;
                    text-align:left;
                }
                /**************** MENU STYLES ****************/
                .siteMainMenu {
    	            margin:0 auto;
                    width:100%;
                    padding:0;
    	            text-align:left;
                    line-height:1;
                }
                .siteMainMenu td {
    	            margin:0;
    	            padding:0;
                }
                .siteMainMenu ul {
    	            padding:0;
    	            margin:0;
    	            list-style:none;
    	            line-height:1;
                }
                
    
                .siteMainMenu a {
                    display:block;
                    padding:5px 10px;
                    font-weight:bold;
                    text-decoration:none;
                }
                .siteMainMenu td a {
    	            text-align:center;
                    background:#ccc none;
                }
                .siteMainMenu td a:hover {
                    background:#f00 none;
                }
                .siteMainMenu td ul a {
    	            text-align:left;
                }
                .siteMainMenu ul a:hover {
                    background:#f00 none;
                }
    
    
                 /* second-level */
                .siteMainMenu td ul {
    	            position: absolute;
    	            background: orange;
    	            width: 10em;
                }
    
    
                 /* using left instead of display to hide menus because display: none isn't read by screen readers */
                .siteMainMenu td ul.left, 
                .siteMainMenu td ul.mid {
    	            left:-999em;
                }
                .siteMainMenu td ul.right {
    	            right:999em;
                }
    
    
                 /* lists nested under hovered list items */
                .siteMainMenu td:hover ul.left,
                .siteMainMenu td.over ul.left,
                .siteMainMenu td:hover ul.mid,
                .siteMainMenu td.over ul.mid {
    	            left: auto;
    	            margin-right:0;
                }
                .siteMainMenu td:hover ul.right, 
                .siteMainMenu td.over ul.right {
    	            right: 50%;
    	            margin-right:-480px;
                }
                
                /***** FOR IE 6 ONLY *****/
                .siteMainMenu li {
    	            border-width:0 0 1px 0;
    	            border-style:solid;
    	            border-color:#000;
                }
                /*********************************************/
            </style>
            
            <script type="text/javascript">
            //<![CDATA[
                /**************** addEvent SCRIPTS ****************/
                function addEvent(element, type, handler) {
                    if (element.addEventListener) {
                        element.addEventListener(type, handler, false);
                    } else {
                        if (!handler.$$guid) handler.$$guid = addEvent.guid++;
                        if (!element.events) element.events = {};
                        var handlers = element.events[type];
                        if (!handlers) {
                            handlers = element.events[type] = {};
                            if (element["on" + type]) {
    	                        handlers[0] = element["on" + type];
                            }
                        }
                        handlers[handler.$$guid] = handler;
                        element["on" + type] = handleEvent;
                    }
                };
                addEvent.guid = 1;
                function removeEvent(element, type, handler) {
                    if (element.removeEventListener) {
                        element.removeEventListener(type, handler, false);
                    } else {
                        if (element.events && element.events[type]) {
                            delete element.events[type][handler.$$guid];
                        }
                    }
                };
                function handleEvent(event) {
                    var returnValue = true;
                    event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
                    var handlers = this.events[event.type];
                    for (var i in handlers) {
                        this.$$handleEvent = handlers[i];
                        if (this.$$handleEvent(event) === false) {
                            returnValue = false;
                        }
                    }
                    return returnValue;
                };
                function fixEvent(event) {
                    event.preventDefault = fixEvent.preventDefault;
                    event.stopPropagation = fixEvent.stopPropagation;
                    return event;
                };
                fixEvent.preventDefault = function() {
                    this.returnValue = false;
                };
                fixEvent.stopPropagation = function() {
                    this.cancelBubble = true;
                };
                /*********************************************/
            //]]>
            </script>
            <script type="text/javascript">
            //<![CDATA[
                /**************** Suckerfish SCRIPTS ****************/
                function findAndApplySuckerfishHover () {
                    var suckerfishMenus = getElementsByClassName('suckerfish');
                    for (var i = 0, j = suckerfishMenus.length; i < j; i++) {
                        suckerfishHover(suckerfishMenus[i]);
                    }
                }
    
                function getElementsByClassName (cssClass) {
                    var elementsToSearch = document.getElementsByTagName('*');
                    var elementsThatMatch = new Array();
                    var regexp = new RegExp('\\b' + cssClass + '\\b', 'g');
                    for (var i = 0, j = elementsToSearch.length; i < j; i++) {
                        if (regexp.test(elementsToSearch[i].className)) {
                            elementsThatMatch.push(elementsToSearch[i]);
                        }
                    }
                    return elementsThatMatch;
                }
    
                function suckerfishHover (element) {
                    var cssClass = 'over';
                    var elements = element.getElementsByTagName('TD');
                    var regexp = new RegExp('\\b' + cssClass + '\\b', 'g');
                    for (var i = 0, j = elements.length; i < j; i++) {
                        elements[i].onmouseover = function() {
                            if (!regexp.test(this.className)) {
                                this.className += ' ' + cssClass;
                            }
                        }
                        elements[i].onmouseout = function() {
                            this.className = this.className.replace(regexp, '');
                        }
                    }
                }
                /*********************************************/
            //]]>
            </script>
            <script type="text/javascript">
            //<![CDATA[
                /*********************************************/
                addEvent(window, 'load', function() { 
                    findAndApplySuckerfishHover();
                });
                /*********************************************/
            //]]>
            </script>
        </head>
        <body>
            <form method="post" action="" class="site">
                <div class="siteHeadingBottom">
                    <table class="siteMainMenu suckerfish">
                        <tr>
                            <td><a href="#">Item #1</a>
    	                        <ul class="left">
    		                        <li><a href="#">Item #1:1</a></li>
    		                        <li><a href="#">Item #1:2</a></li>
    		                        <li><a href="#">Item #1:3</a></li>
    	                        </ul>
                            </td>
                            <td><a href="#">Item #2</a>
    	                        <ul class="mid">
    		                        <li><a href="#">Item #2:1</a></li>
    		                        <li><a href="#">Item #2:2</a></li>
    		                        <li><a href="#">Item #2:3</a></li>
    		                        <li><a href="#">Item #2:4</a></li>
    		                        <li><a href="#">Item #2:5</a></li>
    		                        <li><a href="#">Item #2:6</a></li>
    	                        </ul>
                            </td>
                            <td><a href="#">Item #3</a></td>
                            <td><a href="#">Item #4</a>
    	                        <ul class="mid">
    		                        <li><a href="#">Item #4:1</a></li>
    		                        <li><a href="#">Item #4:2</a></li>
    		                        <li><a href="#">Item #4:3</a></li>
    		                        <li><a href="#">Item #4:4</a></li>
    	                        </ul>
                            </td>
                            <td><a href="#">Item #5</a>
    	                        <ul class="mid">
    		                        <li><a href="#">Item #5:1</a></li>
    	                        </ul>
                            </td>
                            <td><a href="#">Item #6</a>
    	                        <ul class="mid">
    		                        <li><a href="#">Item #6:1</a></li>
    		                        <li><a href="#">Item #6:2</a></li>
    		                        <li><a href="#">Item #6:3</a></li>
    		                        <li><a href="#">Item #6:4</a></li>
    		                        <li><a href="#">Item #6:5</a></li>
    	                        </ul>
                            </td>
                            <td><a href="#">Item #7</a>
    	                        <ul class="right">
    		                        <li><a href="#">Item #7:1</a></li>
    		                        <li><a href="#">Item #7:2</a></li>
    		                        <li><a href="#">Item #7:3</a></li>
    		                        <li><a href="#">Item #7:4</a></li>
    		                        <li><a href="#">Item #7:5</a></li>
    		                        <li><a href="#">Item #7:6</a></li>
    		                        <li><a href="#">Item #7:7</a></li>
    	                        </ul>
                            </td>
                        </tr>
                    </table>
                </div>
            </form>
        </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo