2 Replies - 2534 Views - Last Post: 14 November 2011 - 02:57 AM

#1 mrben2006  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 26
  • Joined: 02-December 06

Help Adding | Dividers to ul li Nav-menu

Posted 13 November 2011 - 11:41 AM

Hi guys,

I had a really basic, but clean looking navigation for a site, see attached image. My client asked me to make it dynamic and add some multi level drop down boxes, which I have done no problem. However, the client has also asked to keep the | dividers that I had in the original menu.

Now when I try to add the |'s back in, it just messes it all up and looks rubbish. Doesn't line up properly etc...

Any help would be much appreciated.

</ben>

The css...

ul.MenuBarHorizontal
{
	margin:0 auto;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 50em;
}
/* 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 a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 8em;
	float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	position: absolute;
	left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: 5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
	border: 1px solid #CCCCCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #ffffff;
	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.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #ffffff;
	color: #666666;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #ffffff;
	color: #000000;
	text-decoration:underline;
}


/* 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.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* 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.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	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.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	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.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal 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.MenuBarHorizontal li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
}



The nav HTML..

<div>
			<ul id="MenuBar7" class="MenuBarHorizontal">
		  		<li><a href="index.htm">Home</a></li>
				<li><a class="MenuBarItemSubmenu" href="products.htm">Products</a>
					<ul>
						<li><a class="MenuBarItemSubmenu" href="#">Index Books</a>
							<ul>
								<li><a href="products/box_files_redo.htm">Soft Cover Telephone Address Books</a></li>
								<li><a href="#">Hard Cover Telephone Books</a></li>
								<li><a href="#">Soft Cover Business Card Books</a></li>
								<li><a href="#">Soft Cover Visitors and Guest Record Books</a></li>
							</ul>
						</li>
						<li><a class="MenuBarItemSubmenu" href="#">Books and Pads</a>
							<ul>
								<li><a href="#">Counsel Notebooks and Memo pads</a></li>
								<li><a href="#">Wiro Books</a></li>
								<li><a href="#">Vestry Cash and Audit Pads</a></li>
								<li><a href="#">Vestry Survey Books and Pads</a></li>
							</ul>
						</li>
						<li><a class="MenuBarItemSubmenu" href="#">Square Cut Folders</a>
							<ul>
								<li><a href="#">Bright Folders</a></li>
								<li><a href="#">Manilla Folders</a></li>
								<li><a href="#">Kraft Folders</a></li>
							</ul>
						</li>
						<li><a class="MenuBarItemSubmenu" href="#">Transfer Files</a>
							<ul>
								<li><a href="#">Bright Files</a></li>
								<li><a href="#">Manilla Files</a></li>
								<li><a href="#">Bright Transfer Pockets</a></li>
								<li><a href="#">Manilla Transfer Pockets</a></li>
							</ul>
						</li>
						<li><a class="MenuBarItemSubmenu" href="#">Document Wallets</a>
							<ul>
								<li><a href="#">Full Flap Wallets</a></li>
								<li><a href="#">Pastel Half Flap Wallets</a></li>
								<li><a href="#">Bright Half Flap Wallets</a></li>
								<li><a href="#">Double Pocket Wallets</a></li>
								<li><a href="#">Legal Wallets</a></li>
							</ul>
						</li>
						<li><a class="MenuBarItemSubmenu" href="#">Guide Cards</a>
							<ul>
								<li><a href="#">Buff Cards</a></li>
								<li><a href="#">White Cards with Mylar Tabs</a></li>
							</ul>
						</li>
						<li><a class="MenuBarItemSubmenu" href="#">Record Cards</a>
							<ul>
								<li><a href="#">Plain Cards</a></li>
								<li><a href="#">Ruled Cards</a></li>
							</ul>
						</li>
						<li><a class="MenuBarItemSubmenu" href="#">Indexes</a>
							<ul>
								<li><a href="#">Clear Mylar Tabbed</a></li>
								<li><a href="#">Coloured Mylar Tabbed</a></li>
								<li><a href="#">Neon Mylar Tabbed</a></li>
								<li><a href="#">Recycled Indexes</a></li>
								<li><a href="#">Manilla Indexes</a></li>
								<li><a href="#">PP/PVC Indexes</a></li>
								<li><a href="#">Extra Wide Indexes</a></li>
							</ul>
						</li>
						<li><a class="MenuBarItemSubmenu" href="#">Dividers</a>
							<ul>
								<li><a href="#">Pastel Dividers</a></li>
								<li><a href="#">Bright Dividers</a></li>
								<li><a href="#">PP/PVC Dividers</a></li>
								<li><a href="#">Extra Wide Dividers</a></li>
							</ul>
						</li>
						<li><a class="MenuBarItemSubmenu" href="#">Box Files</a>
							<ul>
								<li><a href="#">Bright Folders</a></li>
								<li><a href="#">Manilla Folders</a></li>
								<li><a href="#">Kraft Folders</a></li>
							</ul>
						</li>
						<li><a class="MenuBarItemSubmenu" href="#">Lever Arch Files</a>
							<ul>
								<li><a href="#">Concord Classic</a></li>
								<li><a href="#">Concord Contrast</a></li>
								<li><a href="products/box_files_redo.htm">IXL Selecta Coloured</a></li>
								<li><a href="#">IXL Selecta Metallic</a></li>
								<li><a href="#">Centurion Coloured</a></li>
								<li><a href="#">Centurion Cloud</a></li>
							</ul>
						</li>
						<li><a class="MenuBarItemSubmenu" href="#">Ring Binders</a>
							<ul>
								<li><a href="#">Concord Classic</a></li>
								<li><a href="#">Concord Contrast</a></li>
								<li><a href="products/box_files_redo.htm">IXL Selecta Coloured</a></li>
								<li><a href="#">IXL Selecta Metallic</a></li>
								<li><a href="#">Centurion Coloured</a></li>
								<li><a href="#">Centurion Cloud</a></li>
							</ul>
						</li>
						<li><a class="MenuBarItemSubmenu" href="#">Expanding Files</a>
							<ul>
								<li><a href="#">A-Z</a></li>
								<li><a href="#">1-31</a></li>
								<li><a href="#">Multipurpose</a></li>
							</ul>
						</li>
						<li><a class="MenuBarItemSubmenu" href="#">Archive Boxes</a></li>
						<li><a class="MenuBarItemSubmenu" href="#">Home Files</a></li>
					</ul><!-- end products subs -->
			  </li> <!-- end products -->
				<li><a href="news.htm">News</a></li>
				<li><a class="MenuBarItemSubmenu" href="#">Corporate Responsibility</a>
					<ul><li><a class="MenuBarItemSubmenu" href="ethics.htm">Ethics</a></li>
						<li><a class="MenuBarItemSubmenu" href="environmental.htm">Enviornmental</a></li>
						<li><a class="MenuBarItemSubmenu" href="health.htm">Health and Safety</a></li>
						<li><a class="MenuBarItemSubmenu" href="quality.htm">Quality</a></li>
					</ul>
				</li>
				<li><a href="contact.htm">Contact Us</a></li>
		 	</ul>
		</div>

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Help Adding | Dividers to ul li Nav-menu

#2 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Help Adding | Dividers to ul li Nav-menu

Posted 13 November 2011 - 05:21 PM

You may better benefit from making each menu item a different class or id if your using an image for the divider. If you decide to do this you will be better able to control the width of the menu items.

An alternative would be to use a border on one side of each menu item.
You could set the right border on the menu items. If you still want no divider on the far right you can set the last menu item as it's own class or id while keeping the others all the same.

Also, do you know javascript?
And will that be allowed for this webpage your making?
Was This Post Helpful? 0
  • +
  • -

#3 mrben2006  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 26
  • Joined: 02-December 06

Re: Help Adding | Dividers to ul li Nav-menu

Posted 14 November 2011 - 02:57 AM

View Posthiddenghost, on 14 November 2011 - 12:21 AM, said:

You may better benefit from making each menu item a different class or id if your using an image for the divider. If you decide to do this you will be better able to control the width of the menu items.

An alternative would be to use a border on one side of each menu item.
You could set the right border on the menu items. If you still want no divider on the far right you can set the last menu item as it's own class or id while keeping the others all the same.

Also, do you know javascript?
And will that be allowed for this webpage your making?


I don't know massive ammounts of Javascript, but any ideas are useful.

Javascript is fine in this site, it already uses some for the current Navigation and the image slider.

</ben>
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1