PDA

View Full Version : Slashdot Menu Customization



Thirty Six
09-24-2007, 09:57 PM
1) Script Title:
Slashdot Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

3) Describe problem:

First of all, thanks for the great contribution and support, this is one of the best menu systems out there! I have made a similar post in a different category on this forum. Please be aware that this is a different menu and the code is different than the other post I made.

ok, here we go..

Here is a link to the menu system as it is now. I've done a minimal amount of modification to it from it's original state, mostly with colors and background images.
http://www.aardvarkmulti.com/sdmenu/

Here are three screen shots.

#1 - how the menu currently appears (SS2.jpg)
http://www.aardvarkmulti.com/sdmenu/menu-ss2.jpg
A: Text and Arrow need to be lower. When trying to adjust this text with padding, it pushes the submenu (red bg) down as well, creating space between the menu image and the submenu. When selected, I would also like that grey rounded corner image to be replaced with a red rounded corner image. I have achieved the red corner background when you mouse over the item, but how do I make it stay red once clicked?

B: Submenu needs the rounded corner image snugged up at the bottom of the submenu giving the entire "home" section a red "rounded box" look.

C: The bottom 10 pixels or so is being cut off of the image. When I try and adjust the height in the following code, it throws the whole balance of the menu off. I am replacing the default "toptitle" image with one that is less wide but taller. Default is 25px, this one is 36 px tall.


div.sdmenu div.collapsed {
height: 25px;

D: Red rounded corner "bottom" image, again this needs to be on each submenu at the bottom.

#2 Elements for new menu (SS3.jpg)
http://www.aardvarkmulti.com/sdmenu/menu-ss3.jpg
E: How the background image should be appearing on previous issue above (C)...

F: How the rollover image should appear when moving mouse over image.

G: Graphic to replace "toptitle.gif" when clicked. This image has no rounded corners on the bottom, making it line up nicely with sub-menu.

J: Bottom graphic to appear at bottom of each submenu.

#3 And finally, this is how I would like the end result to appear: (SS.JPG)
http://www.aardvarkmulti.com/sdmenu/menu-ss.jpg

here is the CSS for what I currently have:


div.sdmenu {
width: 140px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat center bottom;
color: #fffFFF;
}
div.sdmenu div {
background: url(toptitle.gif) repeat-x;
overflow: hidden;
border: 2px solid white;
}
div.sdmenu div.collapsed:hover {
background: url(toptitle_red.gif) repeat-x;
overflow: hidden;
border:2px solid white;
}
div.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 10px;
font-weight: bold;
color: #FFFFFF;
background: url(expanded.gif) no-repeat 120px center;
cursor: default;
border-bottom: 1px solid #59200d;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: #59200d;
display: block;
border-bottom: 1px solid #59200d;
color: #FFFFFF;
text-decoration: none;
}
div.sdmenu div a.current {
background : #993300;
}
div.sdmenu div a:hover {
background : #993300 no-repeat right center;
color: #fff;
text-decoration: none;
}


Thanks in advance!

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!!!

Ictinus
09-24-2007, 10:59 PM
Thirty Six,
This just about does what you want.
You need to create a bottom_grey.gif and the bottom.gif would need to have non-transparent corners (white in this case so the red bottom corners can be seen)
Edit: Note - only tested in Firefox 2.x
Cheers.



div.sdmenu {
width: 140px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(/sdmenu/sdmenu/bottom_grey.gif) no-repeat center bottom;
color: #fffFFF;
}
div.sdmenu div {
background: url(/sdmenu/sdmenu/toptitle_red_expanded.gif) repeat-x;
overflow: hidden;
border: 2px solid white;
}
div.sdmenu div.collapsed {
background: url(/sdmenu/sdmenu/toptitle.gif) repeat-x;
overflow: hidden;
border:2px solid white;
height: 31px;
}
div.sdmenu div.collapsed:hover {
background: url(/sdmenu/sdmenu/toptitle_red.gif) repeat-x;
overflow: hidden;
border:2px solid white;
}
div.sdmenu div span {
height: 13px;
display: block;
padding: 9px 10px;
font-weight: bold;
color: #FFFFFF;
background: url(/sdmenu/sdmenu/expanded.gif) no-repeat 120px center;
cursor: default;
}
div.sdmenu div.collapsed span {
background: url(/sdmenu/sdmenu/collapsed.gif) no-repeat 120px center;
}
div.sdmenu div a {
padding: 5px 10px;
background: #59200d;
display: block;
color: #FFFFFF;
text-decoration: none;
}
div.sdmenu div a:last-child {
background: #59200d url(/sdmenu/sdmenu/bottom.gif) no-repeat center bottom;
padding:5px 10px;
}
div.sdmenu div a.current {
background : #993300;
}
div.sdmenu div a:hover {
background : #993300 no-repeat right center;
color: #fff;
text-decoration: none;
}

Strangeplant
09-25-2007, 01:08 PM
Most excellent work - the look, feel and content options are super.

I know there has been at least one post about adapting this to a horizontal style, and I feel that it's extremely important - yes, I need that too. And the BIG reason is that this is a SEARCH ENGINE FRIENDLY menu! because no search engine will index the links in a .js based array. Currently, there are no horizontal multi-level menus that fit the current search engine requirements on DD.

Thirty Six
09-25-2007, 03:44 PM
First of all, Ictinus, thank you SO MUCH for taking the time to help me with this. Looking at the CSS code, I can now see how I should have done it. It's amazing that folks like you are willing to lend a hand to beginners like myself. PLEASE let me know if you ever need any sort of graphic design services, as that's more my forte and I would love to give back.

So this has achieved nearly everything I want it to do, there are just a few more things I want to ask about.

#1 My original design puts the text and collapse/expand arrow graphics at the bottom of each button vs. in the middle.

This screen shot shows how I want the text and arrows to appear. I've achieved this by editing the following line of code from 9px padding to 15px padding.
http://www.aardvarkmulti.com/sdmenu/screen%20shots/text-align-cert-code.png

Doing this gives me the effect I want as far as text alignment, however it also pushes the submenu down an additional 6 px. Here's another screen shot that shows this.
A = white space created due to adjustment in padding and
B = how I want the text and arrow icon to appear.
http://www.aardvarkmulti.com/sdmenu/screen%20shots/text-align-vert.png

Is there a way I can push just the text down that additional 6 px without it effecting the submenu positioning?

if you click this link, you can see how it's now aligned in the middle vs. the bottom:
http://www.aardvarkmulti.com/sdmenu/


#2 And just one more thing, when clicking on a button and the submenu expands, there is a slight "cut" between the red button graphic and the submenu. Can anyone think of a way that I can "push" the submenu up a few pixels, or perhaps another way to get rid of that? And here's a screen shot detailing this:
http://www.aardvarkmulti.com/sdmenu/screen%20shots/expanding-corner.png

thanks again for the help, this has really been great!
:D

Thirty Six
09-25-2007, 04:05 PM
oh, and I forgot one more screen shot, oops!

This one shows that when you roll over the bottom menu item in the sub-menu the background color is having some sort of conflict with the bottom red image:

http://www.aardvarkmulti.com/sdmenu/screen%20shots/roll-over.png

;)

Ictinus
09-25-2007, 10:38 PM
Ok, changes in bold again, but I removed a couple of other redundant lines, so might want to compare the lot with what you've got.
I'm a little suspicious of the :hover:last-child, haven't tested with IE yet and I can't recall if IE6 can do that.

When do you see the white corners ? Only when the menu is expanding or also when it has finished. I only see them while the menu is expanding, after that, the image is changed to 'toptitle_red_expanded.gif' without the bottom corners.



div.sdmenu {
width: 140px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(/sdmenu/sdmenu/bottom_grey.gif) no-repeat center bottom;
color: #fffFFF;
}
div.sdmenu div {
background: url(/sdmenu/sdmenu/toptitle_red_expanded.gif) repeat-x;
overflow: hidden;
border: 2px solid white;
}
div.sdmenu div.collapsed {
background: url(/sdmenu/sdmenu/toptitle.gif) repeat-x;
overflow: hidden;
border:2px solid white;
height: 31px;
}
div.sdmenu div.collapsed:hover {
background: url(/sdmenu/sdmenu/toptitle_red.gif) repeat-x;
overflow: hidden;
border:2px solid white;
}
div.sdmenu div span {
line-height:28px;
height: 13px;
display: block;
padding: 9px 10px;
font-weight: bold;
color: #FFFFFF;
background: url(/sdmenu/sdmenu/expanded.gif) no-repeat 120px 18px;
cursor: default;
}
div.sdmenu div.collapsed span {
background: url(/sdmenu/sdmenu/collapsed.gif) no-repeat 120px 18px;
}
div.sdmenu div a {
padding: 5px 10px;
background: #59200d;
display: block;
color: #FFFFFF;
text-decoration: none;
}
div.sdmenu div a:last-child {
background: #59200d url(/sdmenu/sdmenu/bottom.gif) no-repeat center bottom;
}
div.sdmenu div a.current {
background : #993300;
}
div.sdmenu div a:hover {
color: #fff;
text-decoration: none;
background-color: #990000;
background-repeat: no-repeat;
background-position: right center;
}
div.sdmenu div a:hover:last-child {
background: #990000 url(/sdmenu/sdmenu/bottom.gif) no-repeat center bottom;
}

Thirty Six
09-28-2007, 10:41 PM
Ok, changes in bold again, but I removed a couple of other redundant lines, so might want to compare the lot with what you've got.
I'm a little suspicious of the :hover:last-child, haven't tested with IE yet and I can't recall if IE6 can do that.
Ictinus,

Thanks again for the great help! This seems to have resolved the text alignment issues, so that's great!

Still having some issues with the rollover background colors on the submenu system, here's a screen shot of how it looks in firefox. It appears that perhaps that bottom red gif might be overlapping the background color.
http://www.aardvarkmulti.com/sdmenu/screen%20shots/FF.jpg

And yeah, in internet explorer 7, the bottom red gif image isn't showing at all:
http://www.aardvarkmulti.com/sdmenu/screen%20shots/IE7.jpg



When do you see the white corners ? Only when the menu is expanding or also when it has finished. I only see them while the menu is expanding, after that, the image is changed to 'toptitle_red_expanded.gif' without the bottom corners.

Yeah, it's only when it's expanding...of course, just enough for the client to ask for it to be changed, heh.. :)


Also noticing that when the page loads with heavy content, the menu seems to take on sort of a jerky, mechanical effect. If you visit the link, click a parent item, select "yahoo", then go back over to the menu and select a different parent item.... you'll see what I mean. http://aardvarkmulti.com/sdmenu/index.html

Can anyone think of any way to get rid of that jerky motion? Our site will indeed have some pretty content heavy pages, so we need to see if there's a way to make it move a bit smoother. The client sent me this link, saying he likes the way this moves, however I really don't want to have to start from scratch again! :rolleyes: http://moofx.mad4milk.net/old/

Anyhow, thanks again for the help, if anything, I've learned some new stuff out of this!

Ictinus
09-29-2007, 12:41 AM
Thirty Six,
Forgetting the fact that IE (especially 6) doesn't play nice with a:hover:last-child, the bottom.gif would need to be changed to a bottom_hover.gif with the brighter red colour. Sorry I didn't mention that earlier.
(perhaps try a:last-child:hover for IE see if that helps)

To get the white corners to not appear, you could examine the .js code to find the point at which the div.collapsed becomes div. If you can move this the beginning of the animation, then your problem should be solved.

I'm not 100% certain at the cause of the jerky, but indeed there are now quite a few images being considered in this solution. Revert to the original code and see if it is smooth again in the same scenario.

The moo.fx accordian is a different animal. It is using only one background image for the 'title' area, no hover/rollover effects. All elements look the same at all times with the exception of what is expanded.
If the client is happier with that look, it may be easier to implement exactly that.

Ictinus
09-29-2007, 02:03 AM
ThirtySix.... please take a look at this option. It isn't exactly what you wanted, but is close. It uses the modified version of the menu (sdnmenu)... a slightly modified version of that actually.
It appears to be smooth (although occassionally a little jumpy) and works the same in Firefox and IE7. A small fix for non CSS2 selector compatible browsers (IE6 tested) is implemented in the init function of the html (which gives gives a visual defect before page load complete).

EDIT: Too much of a challenge... ok, no need for the fix for IE6... and the menu is getting closer to what you want. Making the menu change to a red colour on expand is a different challenge. The images used for the corners will need to change. It could be done with alternate images and hover... or maybe not if something else I'm working on goes well. See how you go.

Note: there is a fair bit of CSS in the css file that is not used in this example, mainly to do nested menus. I might wrap this up as an example without that code later (if the nested menu doesn't look good... haven't tried it with this style)

http://www.ictinus.com/sdnmenu/simple_example_36.html

Ictinus
09-30-2007, 11:53 AM
Everybody loves options....

So, attached is the SDMenu by DimX with modifications to get as close as I can to what you need ThirtySix. Unfortunately, it is not exactly a generic flexible solution and I've had to use javascript to make sure IE6 works. I can't test IE7 at the moment so you'll have to let me know.

There is still the smoothness issue that you may not like. I believe this is down to the expand and contract functions using separate 'intervals' which is allowing more than one micro expand to to occur before a collapse can occur (and/or visa versa).
I have used a single collapse/expand interval in SDNMenu which I believe is why it is sometimes smoother. Unfortunately, it uses a different HTML structure and can't easily do what I've done here with SDMenu. That may have to change in the future.

1308

Thirty Six
10-02-2007, 07:59 PM
Ictinus,

Thanks so much for all the help, I really can't express what a great help this has been. Sorry it took so long to reply, I've been travelling a lot in the last week. I am going to spend some time looking at this today but at a brief glance, what you've done here is AMAZING!!!!

Could you possibly attach a zip file of this menu too?
http://www.ictinus.com/sdnmenu/simple_example_36.html

Tylee23
10-02-2007, 08:31 PM
I'm using the same code but cannot get the menu to expand or contract on my main home page. Any suggestions?
thanks!

Ictinus
10-02-2007, 10:56 PM
Ictinus,
Could you possibly attach a zip file of this menu too?
http://www.ictinus.com/sdnmenu/simple_example_36.html

I've now added 'Download this example' as the last menu item on the example.
Cheers.

Thirty Six
10-03-2007, 03:41 PM
I've now added 'Download this example' as the last menu item on the example.
Cheers.

Thanks again!

I really like the "simple example" you created.

Now, if I want to achieve that same roll-over effect with the red images I should be able to pick through the css you helped me with in the other example and make that happen with this "simple example" version.

Cool! :D

Ictinus
10-03-2007, 11:42 PM
Now, if I want to achieve that same roll-over effect with the red images I should be able to pick through the css you helped me with in the other example and make that happen with this "simple example" version.
I believe the problem you will hit is making the top corner images of each menu item change on hover and when the menu is expanded. They are currently placed above the Title spans (previous sibling) so you can't reference them in CSS when the Title is hovered. At least I couldn't find a way to do so.

Thirty Six
10-04-2007, 05:11 PM
Well that's good to know, thanks!

Noticing that when the page is refreshed, the entire menu expands for about half a second and then goes back to the previous setting. Any way to make it so that doesn't happen?

Ictinus
10-04-2007, 10:33 PM
Noticing that when the page is refreshed, the entire menu expands for about half a second and then goes back to the previous setting. Any way to make it so that doesn't happen?

Try this.... add style="display:none" to the top menu div and then mymenu1.menu.style.display = "block"; at the end of your menu init function.

That should hide the menu until the whole page has loaded (iframe content etc), allowing the menu to be redraw to its correct state more quickly.
You see the menu expanded now, because the init function isn't called until the page is loaded.

Thirty Six
10-05-2007, 07:09 PM
Once again, Ictinus saves the day!

Thank you sir! :)

Thirty Six
10-09-2007, 03:45 PM
Noticing now this "simple example 36" menu does not collapse or expand in Safari, wondering if there's anything we can do to make it work correctly in that browser?

cadaha
10-12-2007, 05:53 PM
Hi Ictinus

Thanks for a great menu. I just have one question for you if I may?

Is there any way to create an include file for the <div> section so that if I need to edit the menu I can update it in a single file that would be included in all other files.

I have created a nav.html file with the div section in it and added <!--#indlude virtual="nav.html"--> to point to the include.

This is causing a problem with the script block to initialise the menu as it probably hasn't been loaded yet and the script can't find the div section so that it can build the menu.

If you could just point me in the right direction I would be most grateful.

Many Thanks

Carl

Ictinus
10-13-2007, 02:29 AM
Noticing now this "simple example 36" menu does not collapse or expand in Safari, wondering if there's anything we can do to make it work correctly in that browser?

ThirytySix.... are you able to provide any error messages or other clue as to why it is not working? I don't have access to Safari to test. Perhaps throw in a few javascript alerts to see how far through the code it is getting.

Ictinus
10-13-2007, 02:35 AM
Hi Ictinus
I have created a nav.html file with the div section in it and added <!--#indlude virtual="nav.html"--> to point to the include.
This is causing a problem with the script block to initialise the menu as it probably hasn't been loaded yet and the script can't find the div section so that it can build the menu.
Carl, if that is a server side include then the browser wouldn't know the difference between that and normally included html. Aside from the type in #include, do you perhaps need the nav.html to be named nav.shtml (I've not used server side includes like this, but read this somewhere else (http://webmaster.iu.edu/tool_guide_info/ssi.shtml))
EDIT: Do you have a link to an example test case?

SilverWolf
10-14-2007, 07:27 PM
First of all Ictinus I want to thank you for the wonderful help you have been with this menu.

Now I was wondering if you have a zip file for your alterations of the sdmenu. I am particularly interested in your first example here: http://www.ictinus.com/sdnmenu/. It fits perfectly into what I want to with the sdmenu but totally lack the knowledge as to how. Thank you.

CWH
10-15-2007, 04:17 AM
Thank you this is a very cool script. When installed within a direct file it works great, however when I try to add it into a file named leftnavigation.htm as part of an includes folder it just show links and does not perform as intended on any of the root files.

<!--webbot bot="Include" U-Include="includes/leftnavigation.htm" TAG="BODY" -->

freedguy
10-21-2007, 03:38 PM
Hey Ictinus, you are God! :) Thanks a zillion for your codes....

I am a newbee and this is my first post here. I want to have http://www.ictinus.com/sdNestedMenu/simple_example.html
on my site. I have js and css codes of it but I'm confused how to write div tags in the body section :confused: All you code masters might get irritated by this post :(

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/dynamicindex1/slashdot_dev.htm ?

Any help wil save my life! ;) thanks a lot in advance...

blessings,
freedguy

Ictinus
10-21-2007, 11:56 PM
Freedguy, please see the other thread. (http://www.dynamicdrive.com/forums/showthread.php?p=114502#post114502)

ThirtySix,
I've updated the SDNMenu config I proposed earlier for you (http://www.ictinus.com/sdnmenu/simple_example_36.html). It now includes the onMouseover option for menu activation.
Cheers

SilverWolf
10-27-2007, 07:03 PM
Thank you Ictinus for the zip. I have almost finished my menu customizing it for my site but I have a couple of blocks.

1. do I go through the sdmenu.js and change ALL the "this" to "mymenu1"? On load the menu opens full and remains full. I am unable to collapes it, will this fix the problem


2. how can I add a 2nd submenu?

Ictinus
10-27-2007, 08:58 PM
SilverWolf,

1. No, don't do that, it took me a long time! :)
There must be something causing an error which is preventing the menu from behaving properly. If you are going to chase such an error, I really recommend using Firefox and looking at the error console, perhaps even using plugins 'Web Developer Toolbar' and 'Firebug'.
IE may also popup an error, if not, look to the lower left corner of the IE window for an icon that might.

2. The submenu structure is the same as top level menus. If you were to copy an existing menu item like:


<span class="title"><span class="tt">About</span></span>
<div class="submenu">
<a href="http://google.com" target="testframe"><span class="s">google</span></a>
<a href="http://yahoo.com" target="testframe"><span class="s">yahoo</span></a>
<a href="http://google.com" target="testframe"><span class="s">google</span></a>
<a href="http://yahoo.com" target="testframe"><span class="s">yahoo</span></a>
</div>


and paste it into itself, you will have created a submenu:



<span class="title"><span class="tt">About</span></span>
<div class="submenu">
<a href="http://google.com" target="testframe"><span class="s">google</span></a>
<a href="http://yahoo.com" target="testframe"><span class="s">yahoo</span></a>
<a href="http://google.com" target="testframe"><span class="s">google</span></a>
<a href="http://yahoo.com" target="testframe"><span class="s">yahoo</span></a>
<span class="title"><span class="tt">About</span></span>
<div class="submenu">
<a href="http://google.com" target="testframe"><span class="s">google</span></a>
<a href="http://yahoo.com" target="testframe"><span class="s">yahoo</span></a>
<a href="http://google.com" target="testframe"><span class="s">google</span></a>
<a href="http://yahoo.com" target="testframe"><span class="s">yahoo</span></a>
</div>
</div>


It is important to always follow a <span class="title"><span class="tt"> with <div class="submenu">, even if the div is empty. This could be what is causing your menu to not function. The javascript needs the structure to understand what to do.
Cheers.

SilverWolf
10-28-2007, 02:04 AM
***giggles***

so I've gone over it and I still can't find a reason for the menu to remain open. Maybe a nother pair of eyes might help.:confused:

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#181818" width="850" id="AutoNumber3" height="100%">
<tr>
<td width="150" valign="top" height="600">

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#181818" width="150" id="AutoNumber4" height="9">
<tr>
<td width="100%" background="sh_bk6.gif" height="9" valign="top">

<Body onLoad="doInits();">
<div style="width: 100%">

<div id="sdmenu" class="sdmenu">
<dl class="top_lft"><dd>&nbsp;</dd></dl>
<span class="title"><span class="tt">Gifts</span></span>
<div class="submenu">
<a href="http://google.com"><span class="s">Gifts For You!</span></a>
<a href="http://slashdot.com"><span class="s">Gifts I Have Received</span></a>

</div>

<span class="title"><span class="tt"><a href="http://slashdot.com">Dolls</a></span></span>
<div class="submenu">

<span class="title"><span class="tt">On My Bases</span></span>
<div class="submenu">
<a href="#"><span class="s">Menu 3.1 - Item 1</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 2</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 1</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 2</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 1</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 2</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 1</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 2</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 1</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 2</span></a>
</div>

<span class="title"><span class="tt">On Other Bases</span></span>
<div class="submenu">
<a href="#"><span class="s">Menu 3.1 - Item 1</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 2</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 1</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 2</span></a>
</div>

<a href="#"><span class="s">Colaberations</span></a>
<a href="#"><span class="s">Adopted on My Bases</span></a>
<a href="#"><span class="s">Adpoted</span></a>
</div>



<span class="title"><span class="tt"><a href="http://slashdot.com">Bases</a></span></span>
<div class="submenu">

<span class="title"><span class="tt">Min</span></span>
<div class="submenu">
<a href="#"><span class="s">Min</span></a>
<a href="#"><span class="s">Min Ethnic</span></a>
<a href="#"><span class="s">Min Ethnic2</span></a>
<a href="#"><span class="s">Min Light</span></a>
<a href="#"><span class="s">XXXXX</span></a>

</div>


<span class="title"><span class="tt">Tillie</span></span>
<div class="submenu">
<a href="#"><span class="s">Tillie</span></a>
<a href="#"><span class="s">Tillie Ethnic</span></a>
<a href="#"><span class="s">Tillie Ethnic2</span></a>
<a href="#"><span class="s">Tillie Light</span></a>
<a href="#"><span class="s">Creature Feature</span></a>
</div>

<span class="title"><span class="tt">Zerina</span></span>
<div class="submenu">
<a href="#"><span class="s">Zirina</span></a>
<a href="#"><span class="s">Zirina Ethnic</span></a>
<a href="#"><span class="s">Zirina Ethnic2</span></a>
<a href="#"><span class="s">Zirina Light</span></a>
</div>

<span class="title"><span class="tt">XXXX</span></span>
<div class="submenu">
<a href="#"><span class="s">Menu 3.1 - Item 1</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 2</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 1</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 2</span></a>
</div>

<a href="#"><span class="s">AV's</span></a>
<a href="#"><span class="s">Couples</span></a>
<a href="#"><span class="s">Gia</span></a>
<a href="#"><span class="s">Pamie</span></a>
<a href="#"><span class="s">Tia</span></a>
<a href="#"><span class="s">Trixie</span></a>
<a href="#"><span class="s">Tweenie</span></a>
</div>


<span class="title"><span class="tt"><a href="http://slashdot.com">Pixel Art</a></span></span>
<div class="submenu">

<span class="title"><span class="tt">Holidays</span></span>
<div class="submenu">
<a href="#"><span class="s">Samhain</span></a>
<a href="#"><span class="s">Yule</span></a>
<a href="#"><span class="s">Imbolc</span></a>
<a href="#"><span class="s">Ostara</span></a>
<a href="#"><span class="s">Beltane</span></a>
<a href="#"><span class="s">Litha</span></a>
<a href="#"><span class="s">Lammas</span></a>
<a href="#"><span class="s">Mabon</span></a>
</div>

<span class="title"><span class="tt">Line Art</span></span>
<div class="submenu">
<a href="#"><span class="s">XXXX</span></a>
<a href="#"><span class="s">XXXX</span></a>
<a href="#"><span class="s">XXXX</span></a>
<a href="#"><span class="s">XXXX</span></a>
<a href="#"><span class="s">XXXX</span></a>
</div>

<a href="#"><span class="s">Isometric Art</span></a>
</div>

<span class="title"><span class="tt"><a href="http://slashdot.com">Forum Memberships</a></span></span>
<div class="submenu">
<div style="width:100%; background-color:#f7d1d1; color:#000; text-align:center">Additional text or graphic - not a menu - not a link</div>
<span class="title"><span class="tt">Battlestar Dollandia</span></span>
<div class="submenu">
<a href="#"><span class="s">XXXX</span></a>
<a href="#"><span class="s">XXXX</span></a>
</div>

<div style="width:100%; background-color:#f7d1d1; color:#000; text-align:center">Additional text or graphic - not a menu - not a link</div>
<span class="title"><span class="tt">Mythica</span></span>
<div class="submenu">
<a href="#"><span class="s">XXXX</span></a>
<a href="#"><span class="s">XXXX</span></a>
</div>
<span class="title"><span class="tt">Past Mmeberships</span></span>
<div class="submenu">
<a href="#"><span class="s">XXXX</span></a>
<a href="#"><span class="s">XXXX</span></a>
</div>
<a href="#"><span class="s">Menu 3 - Item 1</span></a>
<a href="#"><span class="s">Menu 3 - Item 2</span></a>
</div>

<a href="http://google.com"><span class="title"><span class="tt">Menu 2 - Item</span></span></a>
<!-- 'title' class spans must always be followed by 'submenu' class div, even if it is emtpy. If empty, make sure it is empty of all elements... not even comments -->
<div class="submenu">
</div>

<span class="title"><span class="tt"><a href="http://slashdot.com">Menu 3</a></span></span>
<div class="submenu">
<div style="width:100%; background-color:#d8d6a6; color:#000; text-align:center">Additional text or graphic - not a menu - not a link</div>
<span class="title"><span class="tt">Menu 3.1</span></span>
<div class="submenu">
<a href="#"><span class="s">Menu 3.1 - Item 1</span></a>
<a href="#"><span class="s">Menu 3.1 - Item 2</span></a>
</div>
<a href="#"><span class="s">Menu 3 - Item 1</span></a>
<a href="#"><span class="s">Menu 3 - Item 2</span></a>
</div>
<span class="title"><span class="tt"><a href="">XXXX</a></span></span>
<div class="submenu">
</div>
<dl class="bot_lft"><dd>&nbsp;</dd></dl>
</div>

</div>



http://i36.photobucket.com/albums/e47/trishagj/Image1.gif

As for the sub-sub menu I'll wait till I get this working first then tackle that one.

Any help would be greatly appreciated Ictinus. Thank you

Ictinus
10-28-2007, 02:35 AM
SilverWolf,
Ok, assuming at the moment, that the <table> end tags do exist below what we can see here... there is a little trouble the fact that you have <Body onLoad="doInits();"> in the middle of your html.

Ok, so everything below the <Body onLoad="doInits();"> as shown looks ok. ie. your menu looks well formed and it is within another div which is closed.

If the <table> tags etc above <Body onLoad="doInits();"> are meant to be there, then your <Body> tag is in the wrong place. Check to see if you already have one and move the onLoad reference to it (removing this one in the process).
Cheers

ps. You might want to grab the corner gifs from the example in my sig again... the ones there now are transparent and will fix the white corner look.

SilverWolf
10-28-2007, 03:59 AM
</head>

<Body onLoad="doInits();">>

<body background="sh_bk3.gif">



I was wondering about that. So I moved it to here but I.m still not able to move the menu

Ictinus
10-28-2007, 04:34 AM
Ok, it is in the right place now, but you only want one <body> tag.

Try this:
<body onLoad="doInits();" style="background-image: url(sh_bk3.gif)">
Cheers

SilverWolf
10-28-2007, 04:20 PM
Ok I did that and there is still no change.

Is it my coding, or could it be in the sdmenu.js or the prototype.js as I have not changes them in any way. The menu worked fine on my test sight but when I copied and pasted it to my sight index it wouldn't work any more. I'm missing something but I don't know what it is.:(

http://pixel2.alittlebitofmagick.com/index.zip

Ictinus
10-29-2007, 01:05 PM
SilverWolf,
I thought I posted this yesterday, but it isn't here, so...

The problem is that the file SDNMenu.js doesn't exist on your site.
The file sdnestedmenu1.css also doesn't exist, but you have embedded the css in the html so that part is working.

Once I looked at your website with Firefox and the Firebug plugin, it was obvious. I'm liking Firebug more and more.

Also, you've referenced prototype.js in the html. This isn't required for SDNMenu, so you can remove it if you aren't using it yourself.

Cheers

SilverWolf
10-29-2007, 05:12 PM
The problem is that the file SDNMenu.js doesn't exist on your site.
The file sdnestedmenu1.css also doesn't exist, but you have embedded the css in the html so that part is working.

I have re-added the SDNMenu.js


you've referenced prototype.js in the

has been removed and there is no change.

Ictinus
10-30-2007, 12:36 PM
SilverWolf,
I'm not sure what to say... there are a number of problems with your page. The biggest one I think is that it is way too complex.

Just the last word on the page 'SilverWolf' is a link that is 40 tags deep!

At the moment I'd guess that the iframes with onLoad events are causing an issue, but I could be wrong... I don't use iframes much at all.
There are two errors I can see:
the first is regarding news.html and

parent.document.getElementById("datamain") has no properties

the second is with the Menu

this.titles[i] has no properties

I'd bet that the first error is preventing the Menu from initialising properly causing the second, but that is a guess.

I'd recommend starting with a blank page and carefully adding each element you require one at a time, make sure to get each working as you go. At least then you'll not be chasing multiple causes.

Cheers

SilverWolf
10-30-2007, 06:04 PM
Ok I'll give it a try, thank you!!:)

SilverWolf
11-11-2007, 11:30 PM
Hi Ictinus. So I took your advise and redid my page and it is running great with the sdmenu now.
I do have one question.

How do I stop this:

http://i36.photobucket.com/albums/e47/trishagj/Image1-1.gif

from popping up each time the page loads?

ideocentro
11-20-2007, 04:37 PM
I have a menu that opens the expandable categories that have links and some that has links in the span top tlevel category title.
The problem I have is that when i click on this link (only on the text) it opens the page but it also tries to expand the buttons that are inexistent.
You can take a look at http://190.2.14.49/globallab/ If you see here Acidos is a category that doesnt have subcategories and makes that "false" expansion.

If you can help me i will be very gratefull!! as i need to deliver this project soon.

ideocentro
11-20-2007, 04:40 PM
Does anyone know how to avoid the top level category with link not to expand?

--------------------------------------------------------------------------------
I have a menu that opens the expandable categories that have links and some that has links in the span top tlevel category title.
The problem I have is that when i click on this link (only on the text) it opens the page but it also tries to expand the buttons that are inexistent.
You can take a look at http://190.2.14.49/globallab/ If you see here Acidos is a category that doesnt have subcategories and makes that "false" expansion.

If you can help me i will be very gratefull!! as i need to deliver this project soon.

Ictinus
11-20-2007, 09:11 PM
ideocentro,
'sdmenu' wasn't really designed to do what you are attempting. Please take at the modified 'sdnmenu' below in my signature. The simple example for sdnmenu should get you going.
Cheers.