PDA

View Full Version : [UPDATED] Slashdot Menu



Ictinus
05-06-2007, 04:25 PM
Moved From Thread: http://www.dynamicdrive.com/forums/showthread.php?t=14497

Ok so here's a link http://www.ictinus.com/sdNestedMenu/menu1.html

As it is based on DimX's sdmenu and therefore isn't all my original work, I wasn't sure if it should be submitted to DD.

Cheers,
Ictinus

slisar
05-16-2007, 01:46 PM
Hi Ictinus,

I have followed a couple threads on the slashdot menu and I think your link: http://www.ictinus.com/sdNestedMenu/menu1.html is a great demo of what can be done with it.

I am not an experienced programmer in java and am not even sure about css programming and i was wondering if there is a way of editing this meny system simply to include on a website.

Looking forward to hearing from you.

Steve Slisar

Ictinus
05-17-2007, 10:42 AM
Steve,
I've created a 'simple example' page which is just the menu with Slashdot styling without all the demo bits.
http://www.ictinus.com/sdNestedMenu/simple_example.html

If you include the: link, script, and body 'onload' elements from this example in your page, along with the 'sdmenu' div somewhere on your page, you should be just about there.

The files required along with the example are:

sdnestedmenu.js
sdcollapsed.gif
sdcollapsedOn.gif
sdexpanded.gif
sdexpandedOn.gif

and these if you want the Slashdot style:
sdnestedmenu1.css
sdtitle.gif
sdtitle2.gif

or this if you want the Flatdot style:

sdnestedmenu2.css

The only file you should *need* to modify is the html file for you menu contents, but you may want to modify the .css files to change the colours/images.

I hope that helps.
ps. I think you meant 'Javascript' not 'Java'. Two different things.

pilotsnipes
06-11-2007, 03:13 PM
Thanks so much for doing this menu. I really needed the nested facility and it works lovely.

However I have 2 small problems.

1) When a user clicks on one of the menu items that links to another page on my website, How can I get the menu to show what levels had already been open?

What I mean is, that everytime I go to a new page, my menu is completely collapsed. I would like to to remember the explaned state it was in when the user clicked the link.

2) Is there much work to make this a horizontal menu? I've tried but failed badly. Would you be able to point me in the right direction?

Thanks for sharing this.

Ictinus
06-15-2007, 12:41 AM
Pilotsnipes,

1. Can you provide a link to your site which uses sdNestedMenu? Then I may be able to identify your problem.

2. I would not try and make this menu into a horizontal menu. It would probably be more worthwhile using one of the existing horizontal menus and perhaps modifying it if required.

Cheers.

axscorpio
07-03-2007, 09:23 AM
Very nice script
How can I do a tooltip to buttons Collapse/Expand
- something like this on "Simple Menu" http://www.4thorder.us/Scripts/Scripts/JS.MDME/

AX

Ictinus
07-03-2007, 10:23 AM
axscorpio,
you can add a tooltip by including a 'title' attribute to any of the spans tags within the menu.
e.g.


<span class="title" title="A Tooltip message"><span class="tt">Menu 1</span></span>

axscorpio
07-03-2007, 11:26 AM
axscorpio,
you can add a tooltip by including a 'title' attribute to any of the spans tags within the menu.
e.g.


<span class="title" title="A Tooltip message"><span class="tt">Menu 1</span></span>

I know this solution.
I mean, I'd like to add a tooltip only to buttons "Collapse all" and "Expand all" in javascript, something like onmouseover = "TEXT".
I think this is a good idea :cool:

Sliight
07-10-2007, 08:13 PM
Figured it out, but now I have another question in it's place...

Sliight
07-11-2007, 08:33 AM
I figured out how to get the menu on the page and make it work, very cool btw, thank you.

There was mention of validation earlier, and I'm not sure if that removes this but...

When I preview in a browser I get the message "IE has restricted this webpage from running scripts or activeX controls" Granted I have my settings set to do this because I don't always trust sites, however when I view the demo of this I don't get the message.

Does anyone know how to eliminate this issue in case someone uses higher security settings than the typical default?

Thank you!

vagrant
07-21-2007, 08:44 PM
How can I get the full package for this modified version?

RobbyS
07-25-2007, 12:14 AM
Hi Ictinus,

Excellent, nice bit of work. However...

As I am new to javascript and css, how would you go about changing the background color/images of individual menu headers?

I can add another selector(image1) within the span class, e.g.
<span class="title image1"><span class="tt">Test Menu</span></span>
but this needs to be handled in the .js file to work.

And I can't get this working correctly. Any help would be welcome.

Thanks,

RobbyS

Figured it out. Thanks.

bsquared0
08-03-2007, 06:07 PM
I have used DimX Slashdot menu on my web site and cannot seem to initialize it as I would like. Currently it is used just as downloaded from DynamicDrive, but I find that some customers do not realize they can collapse menu by clicking. I simply want all menus to be in the collapsed state when the site is opened. If possible, once a menu is opened then the cookie would store and open the same menu position on each page as it is opened.

I have tried the initialization options that DimX specified without success. This is my first web site and I am untrained in Java Script. Help is very much appreciated.

http://www.mcgymswim.com

Regards - bsquared

vagrant
08-04-2007, 07:33 PM
sdnestedmenu.js
sdcollapsed.gif
sdcollapsedOn.gif
sdexpanded.gif
sdexpandedOn.gif

and these if you want the Slashdot style:
sdnestedmenu1.css
sdtitle.gif
sdtitle2.gif


Dumb question, but where do the above files come from? There aren't in the original DimX version

Thanks for any input

Ictinus
08-06-2007, 01:20 PM
bsquared,
I see you've modified your site to collapse all menus but the first by default and also to not use cookies.
Now that you are forcing your initial state as you wish, does the cookie remembering not work as you wish?

Some thoughts on your pages...
* You appear to have two the SDMenu init specified twice on each page. One at the top, one toward the bottom. Do you actually need both?

* If you want to remember the state of each menu (on different pages) I think DimX's sdmenu cookies will work for you if you just name your menu divs with a different name. ie. <div id="menu_about"> and <div id="menu_swim"> rather than just <div id="my_menu">. Of course you'll need to change the init calls to reflect the name changes too.

* the older design of DimX's sdmenu which I modified may be more forgiving on your long menu text. eg. 'Did you know?' appears as 'Did you' on my browser because of font size differences. (however, handling multiple menu cookies will not work in the same way as described above... at the moment).

Cheers,

Ictinus
08-06-2007, 01:25 PM
vagrant,
all of the files you list can be grabbed directly from the link in my signature.
eg. add the filename in question to the end of the url:
http://www.ictinus.com/sdNestedMenu/

Cheers,

bsquared0
08-06-2007, 03:51 PM
Ictinus,
Thank you for your reply.
* The comment concerning the text on the menu header was especially helpful since I have received no feedback on that point. Curious about the browser you are using. I took the cowards way out and renamed it shorter. Life is just getting in the way of writing this site so time is limited.

* I removed the first of the SDMenu init specified twice on each page which you pointed out. Thanks. I started with this site knowing nothing about this stuff 3 months ago; I did have a vision though. I could probably clean my code considerably now by revisiting it.

* The cookie is working correctly since I modified the sdmenu.js file to : this.remember = false;. The reason I had to do this is the page Season Standouts under the gymnastics menu has numerous menu headers and the cookie was messing up the open state of all the other pages after a visit.

After catching up on business, I'll be starting a new design using what I've learned and will save your pointers. Thanks again.

Best Regards - bsquared

salohcinzero
08-08-2007, 07:34 PM
Hello Ictinus,

I am currently developing a website with some friends. Up to now we have been using DimX's version of the slashdot menu. To view what we have so far visit http://students.washington.edu/salohcin/1wnewcontent/layout1.html

Being able to use nested menus will dramatically help our navigation menu.

You'll notice that we are using several iframes to display all the content. I am having difficulty having a menu item open a page in the content iframe and at the same time expand to show its submenus.

I've tried to edit Menu 3 and 4 to perform said task. But when entries are placed within the <div class="submenu"> tag, the original menu link, to say google.com, no longer functions.

Can you help?

Thanks for your time and excellent menu. Cheers

Ictinus
08-10-2007, 02:08 PM
salohcinzero,
Can you provide a link example of the menu that is not working as you require.

Cheers,

studio505
08-12-2007, 06:26 PM
Ictinus,

Your modification to the Slashdot menu is great. I have made a modification to the script sdnestedmenu.js to use <ul> tags instead of <div> tags.

You can see the example at http://www.studio505.com/site3

Everything seems to work fine, except that after I click on Menu 1.1 (a third level menu), I cannot get Menu 1 to close up completely when clicking one of the other top level menus. Menu 1 only closes up to the Menu 1.1. after Menu 1.1 is open. Any suggestions on ways to resolve?

Changes made to sdnestedmenu.js shown in blue:

menu = getElementsByClassName("sdmenu", "ul", document)[0];
titles = getElementsByClassName("title", "span", menu);
submenus = getElementsByClassName("submenu", "ul", menu);
titletext = getElementsByClassName("tt", "span", menu);

Ictinus
08-13-2007, 12:21 AM
studio505,
I think what you need to do is set the .js variable "collapse_topmenus_only" to true.

var collapse_topmenus_only = false; //if true, collapse top level menus only; requires collapse_lastmenu to be true.

Cheers,

studio505
08-14-2007, 01:14 AM
Ictinus - I tried setting the variable "collapse_topmenus_only" to true, but that seems to have the effect of keeping the menus open.

See: http://www.studio505.com/site3

I'll keep trying! Thanks again. :)

chameleondg
08-23-2007, 05:31 AM
Hello,

I am trying the new menu....very cool. I am having a problem with a javascript pop-up box. When I go to view the site in the browser, I keep getting a pop-up box saying:

"JAVASCRIPT
The number of default states is 17, but the number of menus is 5"

before the site loads. I just can't seem to find the script anywhere to remove it.

Does anybody know?

Thanks!

chameleondg
08-23-2007, 06:13 PM
It might help if I read your great comments.....

I had to many array values against the menus..

you guys rock!!

Ictinus
09-12-2007, 03:00 PM
Hello all,
I was hoping to get more done on this, but I'm away for a little while so I thought I'd ask for feedback while I'm away.
I've updated the sdNestedMenu (SDNMenu) so that it is manipulated similar to the original (current) sdmenu by DimX.

ie. var mymenu1 = new SDNMenu();

With that, some things have changed.
* Multiple menus can be created on the same page, and be configured independently.
* Menus items without submenus now appear with a different bullet (square).
* Menus/Submenus can now be forced open all the time.
* a couple of bug fixes.
* probably a few other things too... and more later perhaps.

Please post here anything that doesn't work and I'll read it in a little over a week.
The demo makes use of Prototype.js, but the menu itself doesn't need it.
(and I think there might be a problem with IE6 and the slide bars I created for the demo... hey! try Firefox ).

You can find the new demo at: http://www.ictinus.com/sdnmenu/index.html

Thirty Six
09-21-2007, 10:40 PM
First of all, thanks for the great contribution and support, this is one of the best menu systems out there!

So I'm just wondering how I can modify a few things now that I've done a fair amount of customizing with your menu.

:D ok, here we go... :D

Here is a link to the menu system as it is now. On this html page I have also included the CSS and JS below the actual menu in case anyone would like to view how I have it currently.
http://www.aardvarkmulti.com/media/menu_test.html

Attached to this post are also screen shots (menu-ss.gif) of how I would like the end result to appear. (menu-ss2.gif) is how it is currently apppearing.

Overall, my menu needs the following changes:

1. When a parent item is selected, I would like the "Grey Rounded Box" image to swap out with a different image. This image will be the same size, but will be a dark red color, vs. the grey color.

2. When a parent item is selected, and the submenu drops down, there is a white space in between the parent menu image and the dropdown, I would like that white space to be gone. Again, this effect can be seen in the screen shot I have attached.

3. I would like a small "rounded corner" image to appear at the very bottom of each submenu, giving the effect of the rounded corner on the bottom. Once again, this can be seen in the screenshot gif I have attached to this post.

I'm sure this can be achieved with some css commands that I'm obviously not aware of, but any help would be Greatly appreciated!!!

Thanks in advance!

axscorpio
09-21-2007, 10:49 PM
Hi, Ictinus.
The script is very nice!
You're right, there is a problem with IE6, because IE6 don't interpreting code css:
div.sdmenu span.titlehidden:hover span {background-image: url(images/sdcollapsedOn.gif); background-repeat: no-repeat; background-position: 8px 50%; } - hover.
Only a:hover :(

Any help would be Greatly appreciated :)

Here's the Install multiple versions of IE for testing: http://tredosoft.com/Multiple_IE

A lot of people still use IE6 :mad:

AX

Ictinus
09-22-2007, 02:06 AM
axscorpio,
You are right, still alot of IE6 users around... pity about that. I think it should be shunned by all.

I forgot to upload the files for IE7 ( http://dean.edwards.name/IE7/ as mentioned in the credits ) which should fix the hover stuff for IE6. I've now done that, but can't test it just now (will do later).

baz999
09-23-2007, 05:53 AM
I'm loving this menu. I've combined it with Ajax to use the Slashdot Menu to change a content div. Therefore this menu is fixed on the page while the right-hand-side is changed.

What I require is a way to highlight in some way the active link. I've tried changing the a:active in CSS but doesn't work. Any help would be great.

Ictinus
09-23-2007, 02:45 PM
I'm loving this menu. I've combined it with Ajax to use the Slashdot Menu to change a content div. Therefore this menu is fixed on the page while the right-hand-side is changed.

What I require is a way to highlight in some way the active link. I've tried changing the a:active in CSS but doesn't work. Any help would be great.

I've added a function call ('setCurrent') that can be called onClick of the A tag.
An example in the new demo can be seen in the Width configuration settings.
Doesn't work in IE only for the first menu at the moment. (edit: ok, that's fixed now).

This really only solves the currrent link for the scenario you describe, it doesn't remember the last current link on a page reload (perhaps later if there is a need).

Ictinus
09-24-2007, 12:11 AM
Thirty Six:
Thanks for the kind words, but please be clear... the 'sdmenu' you are using is not my menu, it was created/is maintained by DimX. Sure I help out where I can, but this thread would be best left to queries on the modified version I created.

Some suggestions:


1. When a parent item is selected, I would like the "Grey Rounded Box" image to swap out with a different image. This image will be the same size, but will be a dark red color, vs. the grey color.

Create a red version (toptitle_red.gif) of the gif file and reference it in the
:hover ... see next question.


2. When a parent item is selected, and the submenu drops down, there is a white space in between the parent menu image and the dropdown, I would like that white space to be gone. Again, this effect can be seen in the screen shot I have attached.

The gap appears to be related to the height in '.sdmenu div.collapsed ', when made smaller brings your 'collapsed' submenu content up to be visible. I would not have thought this would happen, I expected the submenu height to be set to 0 and display to be none. At least I think that's the way I do it with sdnmenu.
Using toptitle for all your DIVs (top and the rest), to get the rounded look, it make it a little more difficult to do the full red colour... the corners would get in the way. You'll probably need to have toptitle, toptitle_red, toptitle_red_expanded... and apply them in the css where needed to get the effect.
Try this and see how close you get... don't forget to create the gifs.


div.sdmenu {
width: 140px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #f7f7f7;
padding-left: 7px;

}
div.sdmenu div {
background: url(toptitle_red_expanded.gif) no-repeat;
overflow: hidden;
border:2px solid white;
}
div.sdmenu div.collapsed:hover {
background: url(toptitle_red.gif) no-repeat;
overflow: hidden;
border:2px solid white;
}
div.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
background: url(toptitle.gif) no-repeat;
height: 25px;
margin: 0px;
padding: 0px;
border:2px solid white;
}
div.sdmenu div span {
display: block;
padding: 5px 5px;
font-weight: bold;
color: white;
background-image: url(expanded.gif);
background-repeat: no-repeat;
background-position: 120px center;
cursor: default;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
display: block;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
background-color: #59200d;
font-size: 11px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 5px;
}
div.sdmenu div a.current {
background-color: #990000;
color: #FFFFFF;
padding: 5px 5px;
}
div.sdmenu div a:hover {
color: #FFFFFF;
text-decoration: none;
background-color: #990000;
background-repeat: no-repeat;
background-position: right center;
}




3. I would like a small "rounded corner" image to appear at the very bottom of each submenu, giving the effect of the rounded corner on the bottom. Once again, this can be seen in the screenshot gif I have attached to this post.

I've run out of time at the moment... but with another red image bottom aligned to the submenu should do the trick.

Of course all these images for corners make the menu limited to the designed width... if your menu text is too big, it will not look pretty.

Thirty Six
09-24-2007, 08:15 PM
First, thanks so much Ictinus for your valuable advice. This seems to have resolved a few issues, but I am still missing something, perhaps my response below might provide some insight.


Thirty Six:
Thanks for the kind words, but please be clear... the 'sdmenu' you are using is not my menu, it was created/is maintained by DimX. Sure I help out where I can, but this thread would be best left to queries on the modified version I created.
Thanks for clarifying. If I can't get this one to work, I will try the modified version you have created.



Create a red version (toptitle_red.gif) of the gif file and reference it in the
:hover ... see next question.
This works quite well for swapping the image out when I hover over it. However, how do I make that red image stay when the item is selected? http://www.aardvarkmulti.com/media/sdmenu/toptitle_red.gif

I have actually created another "red" image, that does not have rounded corners at the bottom. I am hoping that once the menu image is clicked on, it will swap out the 'toptitle_red.gif' image with this one, so then the submenu will line up correctly with the bottom of the image: http://www.aardvarkmulti.com/media/sdmenu/toptitle_red_expanded.gif

additionally, I have created a 3rd image, that I would like to appear at the bottom of each submenu: http://www.aardvarkmulti.com/media/sdmenu/toptitle_red_bottom.gif

This would give me the rounded corner look I want at the bottom of each submenu, I just can't figure out where to put the CSS code to make it align properly.



The gap appears to be related to the height in '.sdmenu div.collapsed ', when made smaller brings your 'collapsed' submenu content up to be visible. I would not have thought this would happen, I expected the submenu height to be set to 0 and display to be none. At least I think that's the way I do it with sdnmenu.
I've gone in as you've suggested and changed the height from 36px to 25px and it's giving me this effect:
http://www.aardvarkmulti.com/media/sdmenu/25px.png
It appears that it's adjusting the height of the button, but not the sub-submenu.




Using toptitle for all your DIVs (top and the rest), to get the rounded look, it make it a little more difficult to do the full red colour... the corners would get in the way. You'll probably need to have toptitle, toptitle_red, toptitle_red_expanded... and apply them in the css where needed to get the effect.
Try this and see how close you get... don't forget to create the gifs.

Here are the gifs I have created, hopefully I can use these?

Red button for hover: http://www.aardvarkmulti.com/media/sdmenu/toptitle_red_bottom.gif

Red button for expanded: http://www.aardvarkmulti.com/media/sdmenu/toptitle_red_expanded.gif

Red image for bottom of sub-menu: http://www.aardvarkmulti.com/media/sdmenu/toptitle_red_bottom.gif



and here is the current code with your suggestions in place:



.sdmenu {
width: 140px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #f7f7f7;
padding-left: 7px;
}
.sdmenu div {
background: url(toptitle.gif) no-repeat;
overflow: hidden;
border:2px solid white;
}
div.sdmenu div.collapsed:hover {
background: url(toptitle_red.gif) no-repeat;
overflow: hidden;
border:2px solid white;
}
.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
}
.sdmenu div.collapsed {
background: url(toptitle.gif) no-repeat;
height: 36px;
padding: 0px;
border:2px solid white;
}
.sdmenu div span {
display: block;
padding: 15px 5px;
font-weight: bold;
color: white;
background-image: url(expanded.gif);
background-repeat: no-repeat;
background-position: 120px center;
cursor: default;
}
.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
.sdmenu div a {
display: block;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
background-color: #59200d;
font-size: 11px;
padding-top: 3px;
padding-right: 15px;
padding-bottom: 3px;
padding-left: 5px;
text-decoration: none;
}
.sdmenu div a.current {
background-color: #990000;
color: #FFFFFF;
padding: 5px 5px;
}
.sdmenu div a:hover {
color: #FFFFFF;
text-decoration: none;
background-color: #990000;
}


perhaps I should start from scratch with your modified version?

Thirty Six
09-24-2007, 10:21 PM
FYI, I have created a 2nd menu which differs than this one. I am going to post that menu in the "dynamic drives script help" forum, as someone stated that's where it probably belongs. Feel free to comment on this one still, as I still might use this menu if I can get it to work. I just wanted to post a 2nd, less modified version of this in the other forum to see if the author can reply.

;)

Ictinus
09-25-2007, 12:03 AM
Thirty Six,
Thanks for creating the thread, I've posted a response there.
For anyone wanting to follow this thread in the future... http://www.dynamicdrive.com/forums/showthread.php?p=111011

freedguy
10-21-2007, 05:18 PM
I am a newbee...:)

Could anyone please help me with a complete developer's view for http://www.ictinus.com/sdNestedMenu/simple_example.html like that of in http://www.dynamicdrive.com/dynamici...ashdot_dev.htm?

Thanks a lot in advance...:)

regards,
freedguy

Ictinus
10-21-2007, 10:58 PM
I am a newbee...:)
Could anyone please help me with a complete developer's view for http://www.ictinus.com/sdNestedMenu/simple_example.html like that of in http://www.dynamicdrive.com/dynamici...ashdot_dev.htm?
Thanks a lot in advance...:)
regards,
freedguy

I've updated the simple_example (http://www.ictinus.com/sdNestedMenu/simple_example.html) with a download link of the files you need for the Slashdot style menu. Inside the zip you'll find 'simple_example.html'. This should give you what you need.
Cheers

freedguy
10-23-2007, 01:43 PM
God bless you Ictinus :) Thanks much :)

I find this example: http://www.ictinus.com/sdnmenu/simple_example_36.html interesting too. I want its zip. You've told on 3rd post (#13) of this page http://www.dynamicdrive.com/forums/showthread.php?t=25047&page=2 about 'Download this example'. But am not able to find it.

Thanks again,
freedguy

Ictinus
10-23-2007, 02:43 PM
Thanks for pointing that out Freedguy... You should be able to find the download link there now (and in my sig below).
Cheers

freedguy
10-26-2007, 08:32 AM
Thanks a lot Ictinus :)

Blessings :)
freedguy :)

aglaranna
02-25-2008, 04:25 PM
I've got the menu all set up and working really well now, except for one thing - when I open a submenu, then click on a title menu, it closes the submenu, but not the previously opened title menu, so I end up with a bunch of menus open. Is this just a glitch with the menu code, where it can only close one open menu at a time? Here is my code in the sdnestedmenu.js:


var remember = true; //Remember menu states, and restore them on next visit.
//defaultStates - An array of zeros and ones (0,1,1,0) that represent open (0) and closed (1) menus.
//if the array is empty, no default state of menu will be loaded. if the array has values, but not as many as there are menus, you will be alerted.
var defaultStates = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);
var contractall_default = true; //Should all submenus be contracted by default? (true or false)

//NOTE: order or priority for menu states is 'remember' (ie. use cookie), defaultStates (if array not empty), 'contractall_default'

var bypixels = 2; //Basicly it's speed,
//but if the (number of submenu elements * bypixels) is larger than the submenu height
//the menu will change height by ~50% each step.
var collapse_lastmenu = true; //if true, close the last menu that was opened if it was not a parent or child menu.
var collapse_topmenus_only = true; //if true, collapse top level menus only; requires collapse_lastmenu to be true.
var bInstantMenus = false; //if you want the menus to open instantly

var redraw_timeout = 30; //milliseconds to menu redraw incase of window or font resize.

var bRefreshMenu = true; //if true, the submenus will be refreshed if needed at the redraw_timeout interval.
//this allows the menu to work with font and window resizing.

var iSubmenuIndent = 10; //number of pixels for submenu menu title indents.
var iSubmenuItemIndent = 10; //number of pixels for submenu item indent level.


Please help!!

ange
05-28-2008, 05:11 AM
I'd like to use this menu, however I need it to be completely accessible. Currently on the simple menu demo, if you turn off css with the menu collapsed, you can access any of the hidden links.

Is there a fix for this?

I'd rather not list out the collapse all and expand all that are in the full demo. Seems that to a screen reader it might not be obvious that there are more links to be seen.

Ictinus
05-28-2008, 11:15 AM
Ange,
Have I misunderstood your question? When I turn off style sheets within Firefox, I do see all the links that are available within the menu... on both the full and simple demos.

Cheers,

ange
05-28-2008, 04:31 PM
Ictinus,

The only links that show up with the style sheets available are the links that are then currently visible. If a menu is collapsed, the links within that menu are not visible with the css turn off.

If someone has their style sheets disabled, I need them to be able to see all of the links within all of the menus when they first come to the site. I'm not a coder, so don't know who to make serious changes. But when javascript is disabled, all of the menus fully expand, can the same behavior happen for when css is disabled?

This menu is wonderful, but to be able to use it, I have to have it meet the section 508 standards and the manual evaluation that will be preformed by the university I work at.

ange

adriannn
05-28-2008, 04:56 PM
Hi Ictinus,

I was initially using dimx's menu but I needed the nest feature so I searched and came across you version.

I have tried to use it on a site I am working on but I am having one problem, the menu will not work as it should in Internet Explorer 6 or 7.

My url is here: http://www.hop.ca/may08/laminators.html

I have 5 browsers on my computer, IE7, Firefox, Safari, Opera and IE 6

The menu shows up and works perfectly along with the other javascript menu I have across the top of the webpage in all of the browsers except IE 6 & 7. As soon as I comment out the other javascript menu and leave only yours running, it works as expected in IE7.

Do you have any ideas as to how I can fix this? I do not know javascript so I do not know what to check for if there is something like a conflict.

Thanks.

Ictinus
05-28-2008, 09:57 PM
Ictinus,
The only links that show up with the style sheets available are the links that are then currently visible. If a menu is collapsed, the links within that menu are not visible with the css turn off.
ange
Ange, I'm looking the following url with Firefox and stylesheets turned off... I can see all the links, http://www.ictinus.com/sdnmenu/simple_example.html
This is a cut/paste of what I see, obviously the links are no longer working, but your can see that all the menu items appear.
---
Menu 1
Menu 1 - Item 1 Menu 1 - Item 2 Menu 1 - Item 3
Menu 2 - Item
Menu 3
Additional text or graphic - not a menu - not a link
Menu 3.1
Menu 3.1 - Item 1 Menu 3.1 - Item 2
Menu 3 - Item 1 Menu 3 - Item 2
Download this example
---

Are you testing the menu on your own site? Can you provide a link?
Cheers,

Ictinus
05-28-2008, 10:33 PM
Sorry adriannn, I can't see exactly what is wrong. In IE7, I get an error at line 27, char 304 when I scroll the page. Because of the long line number, I suspect this is a line within mmenu.js, but I can't be certain.
Cheers,

ange
05-28-2008, 10:38 PM
Ictinus,

I think I see what the difference in what we are seeing. In firefox you are going to View > Page Style > No Style to turn of style sheets. I am using a Web Developer Tool Bar to disable style sheets. https://addons.mozilla.org/en-US/firefox/addon/60

When I disable the style sheets for http://www.ictinus.com/sdnmenu/simple_example.html I see:

Menu 1 Menu 2 - Item Menu 3 Download this example

I see that my evaluation documentation actually uses IE's AIS Web Developer Tool bar to check which gets the same results that you are getting. Hopefully, the tool bar that that I have been using just has a glitch.

I also just realize that I'm not seeing a current page indicator. Is that in your script? I was a nice feature in Dimx' script.
http://identity.csusb.edu/pa_nav.html

adriannn
06-02-2008, 02:40 PM
Thanks for looking, maybe I will just get rid of the horizontal menu instead.

ange
06-11-2008, 11:36 PM
I'm seeing a strange problem with the menu. My first title has now submenu links. When I load or refresh the page, it starts off as the intended Square. As soon I expand any other menu, it turns into the arrow image.

Am I doing something wrong or is there a bug with the first title?
http://identity.csusb.edu/test2/index7.asp

Banixxx
06-12-2008, 08:35 PM
Ictinus,

I see the JavaScript file has been updated and looks a lot more cleaner. Did you ever figure out why IE needed the Prototype.js file to work with the old one? and does the new one work fine. As when i was using the old one and building my page it would display fine from your sever but not locally. i added the prottype.js file and everything worked.

Ictinus
06-14-2008, 04:21 AM
ange,
I think the bug you are seeing is now fixed in the next version soon to be up on the site.
With regard to the 'current page' indicator, please look at the setCurrent function within SDNMenu.js.
An example of its use can be seen within the demo on the menu items for setting the menu width (approx. line 139 of the demo html). e.g.

<a href="#" onClick="mymenu1.setCurrent(this);"><span class="s">10%</span></a>

Now since you say 'current page', I should point out that my solution does not look at the url to determine if a menu item is current. If the above example actually took you to another page rather than trigger an action on the current page, then you will need to be a little tricker.
You could call .setCurrent and pass the menu item to set on page load.
You could set the classname of the link that represents the 'current page' <a href... class="current">. Different link on each page obviously.

I might consider storing the 'current' state in a cookie, it might make it easier, but for now, just try the above.
Cheers

Ictinus
06-14-2008, 04:26 AM
Banixxx,
Thanks for the reminder on this, I believe I have now found the problem. IE does not support Array.indexOf and so prototype was required.
I've now added some code grabbed from http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:indexOf to the bottom on the SDNMenu.js that removes the IE prototype.js dependency.

As I mention to ange, the next version should be up on the demo site soon.
Cheers

Ictinus
06-14-2008, 07:26 AM
Ok, the new version is up. See the signature below for links.

Prototype.js not required for the simple demos.
No errors in IE when viewing locally (hopefully).
First menu item doesn't become expandable when it shouldn't.
.js cleanup.
New default menu speed (-1) provides more consistent menu speeds regardless of link/non-link content size. It is based on the overall height of the submenu not the number of links within it.
.css file have been renamed.

Let me know how it goes for you.
Enjoy.

joenez
07-04-2008, 09:54 AM
Hi Ictinus

When I open your New Demo (cracking btw) I find that there is a slight delay while the whole page is loaded, in which everything is expanded, then when the page is loaded it contracts. When I try and create a menu using your template, when I initially open it the page - and therefore the whole menu - hangs open and won't fully load unless I refresh. Unfortunately this means that new visitors to a prospective page would think it looks pretty poor!

Have you come accross this before?

Cheers,

Joe.

Ictinus
07-04-2008, 02:56 PM
Hello Joenez,
If you can provide a link to your site I'll take a look, but it sounds like there is another reason that the menu does not redraw itself (at all) in the closed state. It might be an error in your javascript, it might be a clash with another script loading during the onload event.

With regard to the display of the menu in the open state before the redraw occurs, try the New Demo page again. Hopefully you will not see it this time... even if you clear your cache.

I've added an id ('demo') to the containing table around the menus, and set its default display state to 'none'. Then, in the bottom of the doInits function, I've added

$("demo").style.display = "block";
If you are not using prototype.js in your pages you want

document.getElementById("demo").style.display = "block";

That should ensure that the menu does not display until it is redrawn.
I'll add that to the simple demos a little later.
Cheers.

joenez
07-08-2008, 01:57 PM
Hi again

Thanks for the speedy reply and the information too. That's really handy stuff!

I found what was wrong too...there was a clash between scripts...the one for the menu and also one to dodge the activeX problem for a flash file on the page.

All sorted now!!!

Keep up the good work bud, its well worth it!

Cheers,

Joenez

bibabb
08-02-2008, 01:14 PM
Thanks a lot for this script, Ictinus!

I hope you can help me with this: I want only one submenu to be open at the same time.
I've set collapse_lastmenu, collapse_topmenus_only, and collapse_children_too to true, and this seems to do the job, except for one thing: the submenu that's opened when the page loads doesn't close automatically. Is there a way to make this happen?

Ictinus
08-18-2008, 02:13 PM
Thanks a lot for this script, Ictinus!

I hope you can help me with this: I want only one submenu to be open at the same time.
I've set collapse_lastmenu, collapse_topmenus_only, and collapse_children_too to true, and this seems to do the job, except for one thing: the submenu that's opened when the page loads doesn't close automatically. Is there a way to make this happen?

bibabb,
If you are setting a menu open by default and want it to act as if it has been opened by the user, try setting 'lastMenu' to be the index number within 'loadDefaultStates' of the menu that is opened by default. In the example below (from the simple example demo), lastMenu is being set to 2 because that is the menu being set open by default.
In this example I've set 'remember' to false so that the default state is always the same and not restored from cookie.
You will need to set lastMenu after the call to 'init'.


mymenu1.collapse_lastmenu = true;
mymenu1.remember = false;
mymenu1.loadDefaultStates ([0,0,1,0,0]);
mymenu1.bypixels = -1;
mymenu1.init('sdnmenu');
mymenu1.lastMenu = 2;

bibabb
08-19-2008, 10:40 PM
Thank you very much, Ictinus! Your solution works very well.

Peter2007
08-31-2008, 11:28 PM
I have 1 question and 1 problem:

Question:
Is it possible to shorten the submenu urls from:

<a href="http://www.xxxxx.com/xxxx.html"><span class="s">submenu1</span></a>

to

<a class="s" href="http://www.xxxxx.com/xxxx.html">submenu1</a>

Problem:
My page has a very long menu. When I open a submenu at the bottom of the screen, it jumps to the top of the page (and it opens the submenu).

viya
09-10-2008, 11:43 AM
Hi ,

1)How to make the subtitle to be closed whenever the page load----currently all my main headers will be closed whenever the page is load but when i click the submenu the third submenu still open.
for example,

animals
cat
dog
plants
flowers
rose
jasmine
human


when i load the page the flowers's subcategory rose and jasmine also open
how to auto close when the page load.




2)and in my current page all the main headers will be closed whenever the page loads. How to make the current active submenu to be opened when the page load.

Thank u in advance.

sygrup
09-10-2008, 12:14 PM
I'm loving this menu. I've combined it with Ajax to use the Slashdot Menu to change a content div. Therefore this menu is fixed on the page while the right-hand-side is changed or web tasarım (http://www.sygrup.com)web site.

What I require is a way to highlight in some way the active link. I've tried changing the a:active in CSS but doesn't work. Any help would be great

Peter2007
09-17-2008, 07:46 AM
I want to have the title as a url/link and open the submenu.

<span class="title"><span class="tt"><a href="index-4-beeld.php">Auto en Vervoer</a></span></span>

But this isn't going to work as I want it.

Take this example:
http://www.ictinus.com/sdnmenu/
When you click with your mouse on the 'Menu A' button and not on the text-link 'Menu A' it opens an submenu, but when you click on text-link 'Menu A'
it opens http://slashdot.com/

The thing that I want is that when you click on the 'Menu A' button it opens the page http://slashdot.com/ and open the submenu.

I hope you can help me :-)

holyninja
03-23-2009, 07:52 PM
i am trying to put an href around the text for a submenu title, but when i do that, it has the same formatting as a submenu item. is there a way to keep the formatting of a title?

thanks!