Slashdot menu

[Phil HD]

1) Script Title: SlashDotMenu

2) Script URL (on DD): www.horizondevelopers.co.uk/testpage.htm

3) Describe problem:

Fantastic code, many thanks .

Just one issue that I'm sure has come up before. Some of my menu items do not have a sub menu. How do I tell the program that there is no sub menu associated with a high level option ?, I have tried removing the sub code but it creates an error when clicked on as it tries to drop down & has not the data it needs.

Thanks in advance
Regards
Phil

[jscheuer1]

      <span class="title"><img src="slashfiles/collapsed.gif" class="arrow" alt="" />No sub</span>
      <div class="submenu" style="display:none;">
      </div>

[Phil HD]

Thanks jscheuer.

So how do I get the nonmenu items to act as a button & link to a new page .... I assume it is an HREF tag ?

I tried some combinations but cant seem to figure it out

Regards
Phil

[jscheuer1]

Use this menu.css file:

.sdmenu {
    width: 150px;
    font-family: Sans-Serif;
    font-size: 12px;
    padding-bottom: 10px;
    background: #eee url(bottom.gif) no-repeat  right bottom;
    color: #FFF;
}

.sdmenu .title, .sdmenu .titlehidden{
    display: block;
    padding: 5px 0;
    font-weight: bold;
    color: white;
    background: #FFF url(title.gif) repeat-x;
}

.nosub, .nosub:visited, .nosub:active, .nosub:hover {
    text-decoration:none;
    display:block;
    width:100%;
    height:100%;
    color:white;
}

.sdmenu .arrow {
		margin-left: 10px;
    margin-right: 7px;
}

.sdmenu .titlehidden {
    border-bottom: none;
}

.sdmenu #top {
    background: url(toptitle.gif) no-repeat;
}

.sdmenu .submenu {
    overflow: hidden;
}

.sdmenu .submenu a {
    padding: 5px 0;
    text-indent: 10px;
    background: #EEE;
    display: block;
    border-bottom: 1px solid #DDD;
    color: #066;
    text-decoration: none;
}

.sdmenu .submenu a:hover {
    background : #066 url(linkarrow.gif) no-repeat right center;
    color: #FFF;
}

Use this function restore() in place of the current one in menu.js:

function restore() {
    if(getcookie("menu") != null) {
        var hidden = getcookie("menu").split(",");
        for(var i in hidden) {
        if(hidden[i]){
            titles[hidden[i]].className = "titlehidden";
            submenus[hidden[i]].style.height = "0px";
            submenus[hidden[i]].style.display = "none";
            arrows[hidden[i]].src = "slashfiles/collapsed.gif";
            }
        }
    }
}

Use this markup:

      <span class="title"><a class="nosub" href="http://www.google.com/"><img src="slashfiles/collapsed.gif" class="arrow" alt="" border="0" />Google</a></span>
      <div class="submenu" style="display:none;">
      </div>

[Phil HD]

Hi jscheuer1

I have updated the files & changed the HTML but get an error when I run it .... I think it is pointing to an error in the javascript. I have attached a screenprint of the error message below

Many thanks for all your help

OK, so i cant attach a screen print ...

Line 81
Char 5
error submenu(...) style' is null or not an object
code 0

Any ideas ?

Regards
Phil

[jscheuer1]

That wasn't showing up here as an error that raised any flags* or that I could see was hindering performance but, if I studied the error console in FF it did show up. After modifying this function as shown (additions red), even that went away:

function gomenu(e) {
    if (!e)
        var e = window.event;
    var ce = (e.target) ? e.target : e.srcElement;
    var sm;
    for(var i in titles) {
        if(titles[i] == ce || arrows[i] == ce)
            sm = i;
    }
    if(submenus[sm]&&parseInt(submenus[sm].style.height) > parseInt(heights[sm])-2) {
        hidemenu(sm);
    } else if(submenus[sm]&&parseInt(submenus[sm].style.height) < 2) {
        titles[sm].className = "title";
        showmenu(sm);
    }
}

*Notes: By 'that raised any flags' I mean that showed as an error in any browser in its default configuration, the sort of thing that pops out at you while casually viewing the page. However, I may have missed it in one of the browsers (IE 7, FF 1.5.0.8 and Opera 9.01) that I was using to test this.

[Phil HD]

Thanks John,

I will try this later... the errors showed up in Websphere Homepage builder, it seems quite sensitive to script errors

Thanks again

Regards
Phil

[Phil HD]

This works very well .... thanks. Last point ... if I want to have a different symbol (not the arrow that shows that the menu can be expanded, maybe a block) ... if I create one and add it to the html it works ... but as soon as I access the all expand or all contact it changes back to the triangle ,,,, is there a way of keeping it as a block ?

Thanks in advance
Regards
Phil

[jscheuer1]

Rather than try to trace down everywhere in the script, the HTML page and the css where the image's filename is used and editing that, it would be easier to leave all that alone and just name your image(s) that you want to substitute for the default one(s) by the same name as the default image that it is replacing.

[chep]

You dont have to change the javascript to get this working. I agree with jscheurer1.

You can edit the css and add in some dummy classes like title1 which is what I did.

examples below. Then you can just edit your html so that your non collapsing item will be in the class called title1 for example.

It is not elegant but it is working great for me.

.sdmenu .title1, .sdmenu .titlehidden1{
display: block;
padding: 5px 0;
font-weight: bold;
color: white;
background: url(title.gif) repeat-x;
}
.sdmenu .title1 {
border-bottom: none;
}
.sdmenu .arrow1 {
margin-left: 10px;
margin-right: 7px;
}

.sdmenu .titlehidden1 {
border-bottom: none;
}