PDA

View Full Version : Making the second vert drop down menu


thedon
04-08-2010, 04:54 AM
Hi,
I have made a new spry vert menu and it look exactly the same as the first one, how can I start a new one which I can edit and not change the first menu when editing the 2nd?

gentleone
04-08-2010, 12:17 PM
Hi,
I have made a new spry vert menu and it look exactly the same as the first one, how can I start a new one which I can edit and not change the first menu when editing the 2nd?

Give each menu its own stylesheet and add an id to the first ul in your html code. For menu 1 <ul id="MenuBar-1"> and for menu 2 <ul id="MenuBar-2">. You can of course give only menu 2 an ID and leave the first menu for what it is, but to make you understand better I gave them both an unique ID.

Stylesheet menu 1:
MenuBarVertical-1.cssStylesheet menu 2:
MenuBarVertical-2.cssAnd then add in front of all the CSS rules in MenuBarVertical-1.css #MenuBar-1 and in MenuBarVertical-2 you'll add #MenuBar-2 in front.

Example CSS rule in MenuBarVertical-1.css:

#MenuBar-1 ul.MenuBarVertical {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 11.5em;
}
And for the same rule but than in MenuBarVertical-2.css with for example some changes on the padding this would be:

#MenuBar-2 ul.MenuBarVertical {
margin: 0;
padding: 20px;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 11.5em;
}


Well, I hope it's clear for you :)

DWcourse
04-08-2010, 01:47 PM
Or to save a bit of effort, style the first menu as usual:

ul.MenuBarVertical {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 11.5em;
}

Then create styles prefaced with #MenuBar-2 only for only the elements with properties that are different in the second menu:

#MenuBar-2 ul.MenuBarVertical {
padding: 20px;
width: 20em;
}

The other properties will be picked up from the ul.MenuBarVertical based styles.

gentleone
04-08-2010, 02:22 PM
Or to save a bit of effort, style the first menu as usual:

ul.MenuBarVertical {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 11.5em;
}

Then create styles prefaced with #MenuBar-2 only for only the elements with properties that are different in the second menu:

#MenuBar-2 ul.MenuBarVertical {
padding: 20px;
width: 20em;
}

The other properties will be picked up from the ul.MenuBarVertical based styles.

Duh!?! Of course :confused:

But I made a little mistake and you copied my mistake. :)
The ul has to be deleted in front of .MenuBarVertical, thedon. #MenuBar-2 is of course the id of that ul.

#MenuBar-2 ul.MenuBarVertical

becomes

#MenuBar-2 .MenuBarVertical

DWcourse
04-08-2010, 10:21 PM
But I made a little mistake and you copied my mistake. :)
The ul has to be deleted in front of .MenuBarVertical, thedon. #MenuBar-2 is of course the id of that ul.

#MenuBar-2 ul.MenuBarVertical

becomes

#MenuBar-2 .MenuBarVertical

I guess I'm just too trusting!

colaroid
04-26-2010, 02:31 PM
I'm stuck on this, I have inserted a second spry menu exactly as I did the first. I have then found the section on the style sheet that I wanted to change and have inserted a second option for the second menu (see below):

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #9CC;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
}
#MenuBar2 ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #006;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;

Its not working, any idea what I haven't done?

My second menu is named MenuBar2

Do I need a second style sheet rather than just the one with two types of spry menu within it?

gentleone
04-26-2010, 02:38 PM
#MenuBar2 ul.MenuBarHorizontal a
delete the ul after #MenuBar2.

#menuBar2 is that ul

colaroid
04-26-2010, 02:59 PM
aha and doh

Thanks:grin: