PDA

View Full Version : Pop out menu help please


cmsbfent
02-16-2010, 09:54 PM
Hey folks

Fairly new to all this as you may see from my post count :) but thought i'd ask for some help

Basically, and its probably very easy to one of you gurus, I have made a vertical pop up menu and I want to change the border of it. The main parent menu I would like to have no border at all, and the pop out parts, I would like to give a border.

Is that possible?

Thanks

Ricky55
02-16-2010, 09:58 PM
Yes of course.

We'd really need to see the code to tell you exactly but its just some simple CSS.

If you look for the main <UL> and apply a style to effect, it will look something like

ul {
border: none;
}

li {
border: 1px solid #fff;
}

cmsbfent
02-16-2010, 10:18 PM
Thanks for that

I tried it and it applied the same border to every cell within the pop out menu?

The code is a bit long, but here it is:

/************************************************** *****************************
LAYOUT INFORMATION: describes box model, positioning, z-order
************************************************** *****************************/
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 8em;
background-color: #FFFFFF;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: crosshair;
width: 150px;
height: 26px;
background-color: #FFFFFF;
left: -5px;
color: #FFFFFF;
outline-color: #ACB9F8;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
margin: -27% 0 0 0%;
padding: 0;
list-style-type: none;
font-size: 13px;
position: absolute;
z-index: 333;
cursor: default;
width: 0px;
left: -1000em;
top: 21px;
height: 0px;
background-color: #FFFFFF;

}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 155px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
width: 80px;
}
/************************************************** *****************************
DESIGN INFORMATION: describes color scheme, borders, fonts
************************************************** *****************************/
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
background-color: #FFFFFF;

}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
border: 0px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: default;
background-color: #FFFFFF;
padding: 0.5em 0.75em;
border:1px outset #acb9f8;
color: #263BDC;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #FFFFFF;
color: #ACB9F8;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #263BDC;
color: #FFFFFF;
}
/************************************************** *****************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
************************************************** *****************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/************************************************** *****************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
************************************************** *****************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #acb9f8;
}
}


...at the moment there is a 1px border around all cells. Just trying to remove them from the main parent menu

Thanks

cmsbfent
02-16-2010, 10:59 PM
Well, thanks to your help and a bit of trial and error - I've sorted it :)

So thanks a lot

Whilst your here though :) when I move down the main menu and cause the pop outs to appear, there is a kind of lag in effect. Basically, its as if the previous pop out isnt disappearing in time and is still there when the next pop out loads - if that makes any sense

It just looks a bit messy

Can I change this at all?

Thanks

DWcourse
02-17-2010, 01:04 AM
can you post a link?

cmsbfent
02-17-2010, 06:38 AM
sure - didnt think it was allowed

http://www.mirrorsreflect.com/test123.htm

Its my first go so dont tear me apart :)

gentleone
02-17-2010, 06:48 AM
In the JavaScript file SpryMenuBar.js at the bottom you see the following line:
closetime = window.setTimeout(function(){self.hideSubmenu(menu );}, 600);

The delay is set to 600 milliseconds, so if you lower that to 200 or 300 then the delay will be not so long.

cmsbfent
02-17-2010, 07:08 AM
Excellent, all sorted now - 250 seems to be the sweet spot

Thanks so much for help. Be warned though, with service like this, I will be back ; )

Cheers
Ben

gentleone
02-17-2010, 08:14 AM
Excellent, all sorted now - 250 seems to be the sweet spot

Thanks so much for help. Be warned though, with service like this, I will be back ; )

Cheers
Ben

Good, you're welcome! ;)

cmsbfent
02-17-2010, 08:58 AM
I've found a little problem..

The last pop out 'World' doesnt share the same border styles as the rest. Any idea why?

Thanks

cmsbfent
02-17-2010, 09:03 AM
Sorted..

Should really start trying things for myself before posting :)

edbr
02-17-2010, 09:24 AM
some times just writing it down makes the answer appear i've noticed