Horizontal drop menus

[Josh]

I have been trying for quite some time to create horizontal menu bar with some pull-down menus for a couple of static links. Nothing fancy, it seems, but I still can't get it to work.

I tried several tools. The most recent one from http://gosu.pl/demo/mygosumenu/1.1/example1.html

My problem: When you click on the green bar on my blog: http://atlanticreview.org/ none of the the menus drops down...

I assume this is now only a small bug, since I pretty much used the standard code that this tool provided. Perhaps you can help.

Or alternatively: How do you put horizontal drop down menus on your blog? Are you willing to share your code and javascript file? Or does it work without javascript as well?



This is what I have done:

1.) I have inserted this code into the style.css of the Carl Blue Theme I am using:

Code: Select all

/* Begin Menu Styles */
.ddm1 {
    font-family: Arial, Helvetica, Sans-Serif;
}
.ddm1 .item1,
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
    padding: 3px 8px 4px 8px;
    border: 1px #003366;
    border-style: solid none solid none;
    text-decoration: none;
    display: block;
    position: relative;
}
.ddm1 .item1 {
    background: #0EA138;
    color: #ffffff;
}
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
    background: #FF6600;
    color: #ffffff;
}
.ddm1 .item2,
.ddm1 .item2:hover {
    padding: 3px 8px 4px 8px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}
.ddm1 .item2 {
    background: #3264C7;
    color: #ffffff;
}
.ddm1 .item2:hover {
    background: #6699FF;
    color: #ffffff;
}
.ddm1 .section {
    border: 1px #003366;
    border-style: solid solid solid solid;
    position: absolute;
    visibility: hidden;
    z-index: -1;
    white-space: nowrap;
}
.ddm1 .left, .ddm1 .left:hover { border-style: solid none solid solid; }
.ddm1 .right, .ddm1 .right:hover { border-style: solid solid solid none; }

* html .ddm1 td { position: relative; } /* ie 5.0 fix */
/* End Menu Styles */

2.) I have inserted the following code inside the head by using the HTML-Head Nugget plugin:

Code: Select all

<style type="text/css">
    body {
        font-family: Arial, Helvetica, Sans-Serif;
        background: #ffffff;
        margin: 0;
        padding: 5px;
    }    
    </style>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="../ie5.js"></script>
    <script type="text/javascript" src="DropDownMenu1.js"></script>

3.) I have inserted the following code into an HTML Nugget plugin and chose "top of content":

Code: Select all

<table cellspacing="0" cellpadding="0" id="menu1" class="ddm1">
    <tr>
        <td>
            <a class="item1 left" href="example1.html">Test</a>
        </td>
        <td>
            <a class="item1" href="javascript:void(0)">Does</a>
            <div class="section">
                <a class="item2" href="example1.html">Category One</a>
                <a class="item2" href="example1.html">Category Two</a>
                <a class="item2" href="example1.html">Category Three</a>
                <a class="item2" href="example1.html">Category Four</a>
                <a class="item2" href="example1.html">Category Five</a>
                <a class="item2" href="example1.html">Category Six</a>
                <a class="item2" href="example1.html">Category Seven</a>
            </div>
        </td>
        <td>
            <a class="item1" href="javascript:void(0)">not</a>
            <div class="section">
                <a class="item2" href="example1.html">First Product</a>
                <a class="item2" href="example1.html">Second Product</a>
                <a class="item2" href="example1.html">Third Product</a>
                <a class="item2" href="example1.html">Fourth Product</a>
                <a class="item2" href="example1.html">Fifth Product</a>
                <a class="item2" href="example1.html">Sixth Product</a>
            </div>
        </td>
        <td>
            <a class="item1" href="javascript:void(0)">work</a>
            <div class="section">
                <a class="item2" href="example1.html">About our Company</a>
                <a class="item2" href="example1.html">Careers</a>
                <a class="item2" href="example1.html">Media Center</a>
                <a class="item2" href="example1.html">News</a>
            </div>
        </td>
        <td>
            <a class="item1" href="example1.html">yet.</a>
        </td>
        <td>
            <a class="item1" href="example1.html">Do not</a>
        </td>
        <td>
            <a class="item1 right" href="example1.html">click</a>
            <div class="section">
                <a class="item2" href="example1.html">Help blabla 1</a>
                <a class="item2" href="example1.html">Help bleble 22</a>
                <a class="item2" href="example1.html">Help bleble 3</a>
                <a class="item2" href="example1.html">Help bleble 44444</a>
            </div>
        </td>
    </tr>
    </table>

4. I have saved the file DropDownMenu1.js into the same template folder, where style.css is. This file has the following code:

Code: Select all

/*
 * DO NOT REMOVE THIS NOTICE
 *
 * PROJECT:   mygosuMenu
 * VERSION:   1.0.8
 * COPYRIGHT: (c) 2003,2004 Cezary Tomczak
 * LINK:      http://gosu.pl/dhtml/mygosumenu.html
 * LICENSE:   BSD (revised)
 */

function DropDownMenu1(id) {

    /* Type of the menu: "horizontal" or "vertical" */
    this.type = "horizontal";

    /* Delay (in miliseconds >= 0): show-hide menu */
    this.delay = {
        "show": 0,
        "hide": 300
    }
    /* Change the default position of sub-menu by Y pixels from top and X pixels from left
     * Negative values are allowed */
    this.position = {
        "top": 0,
        "left": 0
    }
    /* Z-index property for .section */
    this.zIndex = {
        "visible": 1,
        "hidden": -1
    };

    // Browser detection
    this.browser = {
        "ie": Boolean(document.body.currentStyle),
        "ie5": (navigator.appVersion.indexOf("MSIE 5.5") != -1 || navigator.appVersion.indexOf("MSIE 5.0") != -1)
    };
    if (!this.browser.ie) { this.browser.ie5 = false; }

    /* Initialize the menu */
    this.init = function() {
        if (!document.getElementById(this.id)) { return alert("DropDownMenu1.init() failed. Element '"+ this.id +"' does not exist."); }
        if (this.type != "horizontal" && this.type != "vertical") { return alert("DropDownMenu1.init() failed. Unknown menu type: '"+this.type+"'"); }
        if (this.browser.ie && this.browser.ie5) { fixWrap(); }
        fixSections();
        parse(document.getElementById(this.id).childNodes, this.tree, this.id);
    }

    /* Search for .section elements and set width for them */
    function fixSections() {
        var arr = document.getElementById(self.id).getElementsByTagName("div");
        var sections = new Array();
        var widths = new Array();
        
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].className == "section") {
                sections.push(arr[i]);
            }
        }
        for (var i = 0; i < sections.length; i++) {
            widths.push(getMaxWidth(sections[i].childNodes));
        }
        for (var i = 0; i < sections.length; i++) {
            sections[i].style.width = (widths[i]) + "px";
        }
        if (self.browser.ie) {
            for (var i = 0; i < sections.length; i++) {
                setMaxWidth(sections[i].childNodes, widths[i]);
            }
        }
    }

    function fixWrap() {
        var elements = document.getElementById(self.id).getElementsByTagName("a");
        for (var i = 0; i < elements.length; i++) {
            if (/item2/.test(elements[i].className)) {
                elements[i].innerHTML = '<div nowrap="nowrap">'+elements[i].innerHTML+'</div>';
            }
        }
    }

    /* Search for an element with highest width among given nodes, return that width */
    function getMaxWidth(nodes) {
        var maxWidth = 0;
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].nodeType != 1) { continue; }
            if (nodes[i].offsetWidth > maxWidth) { maxWidth = nodes[i].offsetWidth; }
        }
        return maxWidth;
    }

    /* Set width for item2 elements */
    function setMaxWidth(nodes, maxWidth) {
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].nodeType == 1 && /item2/.test(nodes[i].className) && nodes[i].currentStyle) {
                if (self.browser.ie5) {
                    nodes[i].style.width = (maxWidth) + "px";
                } else {
                    nodes[i].style.width = (maxWidth - parseInt(nodes[i].currentStyle.paddingLeft) - parseInt(nodes[i].currentStyle.paddingRight)) + "px";
                }
            }
        }
    }

    /* Parse nodes, create events, position elements */
    function parse(nodes, tree, id) {
        for (var i = 0; i < nodes.length; i++) {
            if (1 != nodes[i].nodeType) {
                continue;
            }
            switch (true) {
                // .item1
                case /\bitem1\b/.test(nodes[i].className):
                    nodes[i].id = id + "-" + tree.length;
                    tree.push(new Array());
                    nodes[i].onmouseover = item1over;
                    nodes[i].onmouseout = item1out;
                    break;
                // .item2
                case /\bitem2\b/.test(nodes[i].className):
                    nodes[i].id = id + "-" + tree.length;
                    tree.push(new Array());
                    break;
                // .section
                case /\bsection\b/.test(nodes[i].className):
                    // id, events
                    nodes[i].id = id + "-" + (tree.length - 1) + "-section";
                    nodes[i].onmouseover = sectionOver;
                    nodes[i].onmouseout = sectionOut;
                    // position
                    var box1 = document.getElementById(id + "-" + (tree.length - 1));
                    var box2 = document.getElementById(nodes[i].id);
                    if ("horizontal" == self.type) {
                        box2.style.top = box1.offsetTop + box1.offsetHeight + self.position.top + "px";
                        if (self.browser.ie5) {
                            box2.style.left = self.position.left + "px";
                        } else {
                            box2.style.left = box1.offsetLeft + self.position.left + "px";
                        }
                    } else if ("vertical" == self.type) {
                        box2.style.top = box1.offsetTop + self.position.top + "px";
                        if (self.browser.ie5) {
                            box2.style.left = box1.offsetWidth + self.position.left + "px";
                        } else {
                            box2.style.left = box1.offsetLeft + box1.offsetWidth + self.position.left + "px";
                        }
                    }
                    // sections, sectionsShowCnt, sectionsHideCnt
                    self.sections.push(nodes[i].id);
                    self.sectionsShowCnt.push(0);
                    self.sectionsHideCnt.push(0);
                    break;
            }
            if (nodes[i].childNodes) {
                if (/\bsection\b/.test(nodes[i].className)) {
                    parse(nodes[i].childNodes, tree[tree.length - 1], id + "-" + (tree.length - 1));
                } else {
                    parse(nodes[i].childNodes, tree, id);
                }
            }
        }
    }

    /* event, item1:onmouseover */
    function item1over() {
        var id_section = this.id + "-section";
        if (self.visible) {
            var el = new Element(self.visible);
            el = document.getElementById(el.getParent().id);
            if (/item1-active/.test(el.className)) {
                el.className = el.className.replace(/item1-active/, "item1");
            }
        }
        if (self.sections.contains(id_section)) {
            self.sectionsHideCnt[self.sections.indexOf(id_section)]++;
            var cnt = self.sectionsShowCnt[self.sections.indexOf(id_section)];
            setTimeout(function(a, b) { return function() { self.showSection(a, b); } } (id_section, cnt), self.delay.show);
        } else {
            if (self.visible) {
                var cnt = self.sectionsHideCnt[self.sections.indexOf(self.visible)];
                setTimeout(function(a, b) { return function() { self.hideSection(a, b); } } (self.visible, cnt), self.delay.show);
            }
        }
    }

    /* event, item1:onmouseout */
    function item1out() {
        var id_section = this.id + "-section";
        if (self.sections.contains(id_section)) {
            self.sectionsShowCnt[self.sections.indexOf(id_section)]++;
            if (id_section == self.visible) {
                var cnt = self.sectionsHideCnt[self.sections.indexOf(id_section)];
                setTimeout(function(a, b) { return function() { self.hideSection(a, b); } }(id_section, cnt), self.delay.hide);
            }
        }
    }

    /* event, section:onmouseover */
    function sectionOver() {
        self.sectionsHideCnt[self.sections.indexOf(this.id)]++;
        var el = new Element(this.id);
        el = document.getElementById(el.getParent().id);
        if (!/item1-active/.test(el.className)) {
            el.className = el.className.replace(/item1/, "item1-active");
        }
    }

    /* event, section:onmouseout */
    function sectionOut() {
        self.sectionsShowCnt[self.sections.indexOf(this.id)]++;
        var cnt = self.sectionsHideCnt[self.sections.indexOf(this.id)];
        setTimeout(function(a, b) { return function() { self.hideSection(a, b); } }(this.id, cnt), self.delay.hide);
    }

    /* Show section (1 argument passed)
     * Try to show section (2 arguments passed) - check cnt with sectionShowCnt */
    this.showSection = function(id, cnt) {
        if (typeof cnt != "undefined") {
            if (cnt != this.sectionsShowCnt[this.sections.indexOf(id)]) { return; }
        }
        this.sectionsShowCnt[this.sections.indexOf(id)]++;
        var el = new Element(id);
        var parent = document.getElementById(el.getParent().id);
        if (!/item1-active/.test(parent.className)) {
            parent.className = parent.className.replace(/item1/, "item1-active");
        }
        if (this.visible) {
            if (id == this.visible) { return; }
            this.hideSection(this.visible);
        }
        //document.getElementById(id).style.display = "block";
        document.getElementById(id).style.visibility = "visible";
        document.getElementById(id).style.zIndex = this.zIndex.visible;
        this.visible = id;
    }

    /* Hide section (1 argument passed)
     * Try to hide section (2 arguments passed) - check cnt with sectionHideCnt */
    this.hideSection = function(id, cnt) {
        if (typeof cnt != "undefined") {
            if (cnt != this.sectionsHideCnt[this.sections.indexOf(id)]) { return; }
        }
        var el = new Element(id);
        var parent = document.getElementById(el.getParent().id);
        parent.className = parent.className.replace(/item1-active/, "item1");
        document.getElementById(id).style.zIndex = this.zIndex.hidden;
        document.getElementById(id).style.visibility = "hidden";
        //document.getElementById(id).style.display = "none";
        if (id == this.visible) { this.visible = ""; }
        else {
            //throw "DropDownMenu1.hideSection('"+id+"', "+cnt+") failed, cannot hide element that is not visible";
            return;
        }
        this.sectionsHideCnt[this.sections.indexOf(id)]++;
    }

    /* Necessary when showing section that doesn't exist - hide currently visible section. See: item1over() */
    this.hideSelf = function(cnt) {
        if (this.visible && cnt == this.sectionsHideCnt[this.sections.indexOf(this.visible)]) {
            this.hideSection(this.visible);
        }
    }

    /* Element (.section, .item2 etc) */
    function Element(id) {
        /* Get parent element */
        this.getParent = function() {
            var s = this.id.substr(this.menu.id.length);
            var a = s.split("-");
            a.pop();
            return new Element(this.menu.id + a.join("-"));
        }
        this.menu = self;
        this.id = id;
    }

    var self = this;
    this.id = id; /* menu id */
    this.tree = []; /* tree structure of menu */
    this.sections = []; /* all sections, required for timeout */
    this.sectionsShowCnt = [];
    this.sectionsHideCnt = [];
    this.visible = ""; /* visible section, ex. menu-0-section */
}

/* Finds the index of the first occurence of item in the array, or -1 if not found */
if (typeof Array.prototype.indexOf == "undefined") {
    Array.prototype.indexOf = function(item) {
        for (var i = 0; i < this.length; i++) {
            if ((typeof this[i] == typeof item) && (this[i] == item)) {
                return i;
            }
        }
        return -1;
    }
}

/* Check whether array contains given string */
if (typeof Array.prototype.contains == "undefined") {
    Array.prototype.contains = function(s) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] === s) {
                return true;
            }
        }
        return false;
    }
}

I hope you can let me know what I have done wrong or share the solution that you are using on your blog, if you are using horizontal pulldown menues.

Thank you!

And all the best for the new year to everyone who is reading this.

[garvinhicking]

You referenced the javascript's wrongly. "../ie5.js" does not exist in your document root, and the menu .js file must also be put within your document root, not within the template directory.

Then it should basically work, I think.

Regards,
Garvin

[Josh]

Thank you Garvin,

I have now put both files in the very top directory that I have:

/

Since it did not work I have also put both files in

/webseiten/.../serendipity/serendipity/

This is the directory where the serendipity_editor.js file and all kinds of other files and all S9Y folders are

That did not work either. Where is the root directory?

[garvinhicking]

With document root I did indeed mean the directory where Serendipity's serendipity_editor.js files are.

But you must then also correctly change the path to those .js files. Enter their path like http://atlanticreview.org/ie5.js and http://atlanticreview.org/DropDownMenu1.js within your HTML nuggets

Regards,
Garvin

[Josh]

I have changed the code in the HTML nugget for the head. Copy below.
It still does not work.

Code: Select all

<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<title></title>
<style type="text/css">
    body {
        font-family: Arial, Helvetica, Sans-Serif;
        background: #ffffff;
        margin: 0;
        padding: 5px;
    }    
    </style>
<link href="style.css" type="text/css" rel="stylesheet" />     <script type="text/javascript" src="http://atlanticreview.org/ie5.js"></script>     <script type="text/javascript" src="http://atlanticreview.org/DropDownMenu1.js"></script>

I have also tried to replace

Code: Select all

link href="style.css"

with

Code: Select all

<link href="/webseiten/wordpress/serendipity/serendipity/templates/MODcarl_blue/style.css" 

, but that did not work either. Therefore I have changed it back to just

Code: Select all

link href="style.css"

Do I have to change .htaccess, because I am using mod_rewrite?

[Josh]

The programmer has an example of his drop down menu in action here: http://gosu.pl/demo/mygosumenu/1.0/example1.html

I had a look at the Seitenquelltext of that page. He has not given a detailed path to the js files...
His head looks like this:

Code: Select all

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>#1.0 DropDownMenu1 example 1</title>
    <style type="text/css">
    body {
        font: 11px tahoma;
        background: #ffffff;
        margin: 0;
        padding: 50px;
    }    
    </style>
    <link rel="stylesheet" type="text/css" href="example1.css" />
    <script type="text/javascript" src="../ie5.js"></script>
    <script type="text/javascript" src="DropDownMenu1.js"></script>

</head>

I have replaced his reference to "example1.css" with "style.css", because I have copied the code from example1.css into the style.css of the template that I am using.

Could the problem be somewhere there? I thought I had to merge the two stylesheets...

[garvinhicking]

You must differentiate your path setups between HTTP paths and Filesystem paths. Both are not congruent.

All your files in

/webseiten/wordpress/serendipity/serendipity/

actually are within the HTTP path

/

on your webserver. Thus you must enter

/templates/carl_blue/style.css

in your HTML code.

Now, for what you actually forgot to place anywhere in your code is this:

Code: Select all

    <script type="text/javascript">
    var ddmx = new DropDownMenuX('menu1');
    ddmx.delay.show = 0;
    ddmx.delay.hide = 400;
    ddmx.position.levelX.left = 2;
    ddmx.init();
    </script>

Without this code, the javascript menu is not loaded at all!

You should palce that code somewhere via a HTML page nugget...

Regards,
Garvin

[carl_galloway]

Josh,

You may hate me for suggesting this ,but get rid of your javascript menu, instead replace it with a completely css driven menu, all your links will be visible to search engine spiders, your filesizes will be smaller, it is easier to configure, and you can get support from standard css resources as well, rather than just the s9y forum (because you don't have to include anything)

The best css menu is the suckerfish menu avail from a list apart, but also check out the update to this menu, son of suckerfish

By the way, I'll be starting to work on your new horizontal menu with the archives, most recent entries etc next week, and will be using the son of suckerfish, so maybe that's another reason. In my experiments so far I've been able to put the most recent entries and archives into the banner of the page, so now I know it can be taken out of the sidebar, next I'm going to play with restyling it into a menu. This is getting exciting, whole new themes will be possible.

[Josh]

Carl,

no, I don't hate you, but love you for this. I copied the code from son of suckerfish as an experiment and it worked beautifully in both Firefox and IE. I took the code out again.

I am looking forward to your new theme. Thank you so much for your service to the s9y community. This is very exciting indeed. One horizontal menu bar and a single sidebar are the ideal combination.


I can wait to use your new theme. Thank you.

[judebert]

D*mn, Carl, I can't keep up! I'm working on replacing the left "sidebar" with a horizontal menu just below the header. I'm thinking it'll require a different sidebar.tpl, to format everything into an unordered list.

I'm figuring on a one-level menu, with all the titles on the top level, and the content of the sidebar appearing when you hover over the sidebar item's title. You doing something similar?

[carl_galloway]

Judebert, that was exactly what I was thinking, but I really haven't progressed very far yet, been working on other themes, a theme userguide with new basic theme etc. I had thought another option would be to create a new file menu.tpl, and simply include this at the spot where the menu is to appear, then only bring in the sidebar bits you want, then use the new exclude smarty hook to prevent the sidebars from displaying whatever is in the menu. This has the elegance of continuing to allow three column display. Unfortunately I don't know enough about smarty, and s9y versioning to make this happen just yet. The hardest thing for me is to get the content into something I can style, once I'm there its just trial and error to make it look nice.

If you get the menu working (your knowledge of smarty being what it is), could you shoot me a copy, I would love to create a standard menu that could be simply dropped into ANY theme. Some of the older themes might need a small update, and I'm thinking not everyone wants to use a theme I create, in fact I've had 4 requests for changes to very old, very basic stylesheet-only based themes, so the menu kinda needs to fit into these as well.

Apart from using the son of suckerfish menu, I had also been thinking another option would be the 'fake' dropdowns as seen in the cereal theme at zengarden, which I haven't played with yet, but they look groovy although very css intense/complex.

[judebert]

I especially liked cereal for the IE warning.

If I get anything going, I'll let you know.

[carl_galloway]

Hi all,

I have successfully integrated the recent entries and recent comments into a drop down menu, but I'm having trouble with the categories list. The problem is that categories aren't a plugin so I'm not able to use the serendipity_showPlugin, I've tried using the code developed in another thread for the breadcrumb but this doesn't produce any output that is usable.

Is there a way of using the showplugin with categories, preferably without the check boxes, but definitely with the xml images/links?

I would be happy to do something in my config.inc.php if I need to.

Cheers
Carl

[garvinhicking]

Uhm, the categories sidebar listing IS a s9y plugin. It's the "serendipity_category_plugin" (found in include/plugins_internal.inc.php)...

Best regards,
Garvin

[carl_galloway]

Garvin,

I couldn't find it within the plugins folder so assumed it wasn't a plugin,

anyway I can't seem to get this to work for categories. With recent entries and comments I use

Code: Select all

{serendipity_showPlugin class="serendipity_plugin_comments" side="hidden" negate="null"}

Trying the same thing with categories

Code: Select all

{serendipity_showPlugin class="serendipity_category_plugin" side="hidden" negate="null"}

produces no result, just an empty box,

Have I not understood the showplugin?