Slashdot Menu Customization

[Thirty Six]

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)

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)

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)


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]

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]

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]

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.


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.


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:


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

[Thirty Six]

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:

[Ictinus]

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]

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.


And yeah, in internet explorer 7, the bottom red gif image isn't showing at all:

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! http://moofx.mad4milk.net/old/

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

[Ictinus]

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]

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]

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.

Attachment 1308