Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.
Computer Hope forum e-mail issues and down time
0 Members and 1 Guest are viewing this topic.
@charset "UTF-8";/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 *//* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. *//******************************************************************************* 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: 12.5em; }/* 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: pointer; width: 12.5em; }/* 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: 0% 0 0 100%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 8.2em; left: -1100em; top: 0;}/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ul.MenuBarVertical ul.MenuBarSubmenuVisible{ left: 0;}/* Menu item containers are same fixed width as parent */ul.MenuBarVertical ul li{ width: 8.2em;}/******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************//* Outermost menu container has borders on all sides */ul.MenuBarVertical{ border: 1px solid #CCC;}/* Submenu containers have borders on all sides */ul.MenuBarVertical ul{ border: 1px solid #CCC;}/* Menu items are a light gray block with padding and no text decoration */ul.MenuBarVertical a{ display: block; cursor: pointer; background-color: #EEE; padding: 0.5em 0.75em; color: #333; 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: #33C; color: #FFF;}/* 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: #33C; color: #FFF;}/******************************************************************************* 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; filter:alpha(opacity:0.1);}/* 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: #FFF; }}
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><!–[if IE]><style type=”text/css”>body {word-wrap: break-word;}</style><![endif]–><script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script><link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css"><link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"></head><p style="font-family:Garamond, Georgia, serif;"><body><table width="100%" height="25%" border="0" align="center"> <tr> <td><p><img src="circle.jpg" alt="" width="200" height="200"></p> <p> </p></td> <td> <p align="center"><font size="+4">Title</font> </p> <ul id="MenuBar2" class="MenuBarHorizontal"> <li><a class="MenuBarItemSubmenu" href="">Test</a> <ul> <li><a href="#">Test A</a></li> <li><a href="#">Test B</a></li> <li><a href="#">Test C</a></li> <li><a href="#">Test D</a></li> </ul> </li> <li><a class="MenuBarItemSubmenu"href="#">test</a> <ul> <li><a href="#">Test A</a></li> <li><a href="#">Test B</a></li> <li><a href="#">Test C</a></li> <li><a href="#">Test D</a></li></a></li> </ul> <li><a class="MenuBarItemSubmenu"href="#">Test</a> <ul> <li><a href="#">Test A</a></li> <li><a href="#">Test B</a></li> <li><a href="#">Test C</a></li> <li><a href="#">Test D</a></li> </ul> </li> </ul></td> </tr></table><table width="100%" height="25%" border="0"> <tr> <td width="34%"><ul id="MenuBar1" class="MenuBarVertical"><font size=""> <li><a class="MenuBarItemSubmenu" href="#">Test 1<br><br></a> <ul> <li><a href="#">Test A</a></li> <li><a href="#">Test B</a></li> <li><a href="#">Test C</a></li> <li><a href="#">Test D</a></li> </ul> </li> <li><a href="#" class="MenuBarItemSubmenu">Test 2<br><br> </a> <ul> <li><a href="#">Test A</a></li> <li><a href="#">Test B</a></li> <li><a href="#">Test C</a></li> <li><a href="#">Test D</a></li> </ul> </li> <li><a class="MenuBarItemSubmenu" href="#">Test 3<br><br></a> <ul> <li><a href="#">Test A</a></li> <li><a href="#">Test B</a></li> <li><a href="#">Test C</a></li> <li><a href="#">Test D</a></li> </ul> </li> <li><a href="#" class="MenuBarItemSubmenu">Test 4<br><br></a> <ul> <li><a href="#">Test A</a></li> <li><a href="#">Test B</a></li> <li><a href="#">Test C</a></li> <li><a href="#">Test D</a></li> </ul> </li></ul></td> <td width="66%"> </td> </tr></table></center><script type="text/javascript">var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});</script></body></html>
ul.MenuBarVertical,ul.MenuBarVertical li { width: 12.5em;}ul.MenuBarVertical ul,ul.MenuBarVertical ul li { width: auto; white-space: nowrap;}