Stationary Second Level Menu Bar

**danielc1234** · Jul 10, 2008 12:23

Hi all. I was wondering..I have a left side nav bar, but would like for the second level to show as well as the first level. So the menubar would look like the following....

Top Level 1
Level 2a
Level 2b
Level 2c
Top Level 2
Level 2a
Level 2b

....you get the idea. I have included my css menu file to see what command I should be using to accomplish this.

Thanks in advance,

Code:

/**********************************************Vertical Nav ****************************************/
#nav_vert {
	padding:0 0px;
	font-size:12px;
	z-index:999;
	width:195px;
}

/************** ALL LEVELS *************/ /* Style consistent throughout all nav levels */
#nav_vert li {
	width:173px;
	list-style:none;
	position:relative;
	text-align:left;
}
#nav_vert li.over { z-index:999; }
#nav_vert li.active { z-index:998; } /* to prevent the li separator from showing through on mouseover on li */
#nav_vert a {
	line-height:1.3em;
}
#nav_vert a, #nav_vert a:hover {

}
#nav_vert span { display:block; cursor:pointer; }

/************ 1ST LEVEL ***************/
#nav_vert li {
	float:left;
	margin-right:1px;
}
#nav_vert li.active a {
	font-weight: bold;
/**	display:block; **/
	background-color:#CCFFCC;
	width: 173px;
 }
#nav_vert a {
	float:left;
	padding:1px 12px 2px 8px;
	color:#0000CC;
	font-weight:normal;
	font-family:Tahoma, Arial, Verdana;
	font-size:12px;
	display:block;
	width: 100%;
	text-decoration: none;
}
#nav_vert li.over a, #nav_vert a:hover {
	color:#0000CC;
	font-weight:bold;
	text-decoration: underline;
 }

/************ 1ST LEVEL RESET ************/
#nav_vert ul li, #nav_vert ul li.active {

float:none;
height:auto;
background:none;
margin:0;
}
#nav_vert ul a, #nav_vert ul a:hover {
float:none;
padding:0;
background:none;
}
#nav_vert ul li a { font-weight:normal !important; }

/************ 2ND LEVEL ***********/
#nav_vert ul {
	position: absolute;
	width:100%;
	margin-left:125px;
	top:0px;
	left:-10000px;
	border:1px solid #666666;
	background-color:#FFFFFF;
	line-height: 1.75em;
	text-decoration:none;
}

/* Show menu */
#nav_vert li.over ul { left:0; }
#nav_vert li.over ul ul { left:-10000px; }
#nav_vert li.over ul li.over ul { left:100px; }

#nav_vert ul li a { 
	background:#FFFFFF/*#ecf3f6*/;
	
}
#nav_vert ul li a:hover { background: #F2F1D2; /*#d5e4eb;*/ }
#nav_vert ul li a span { background:url(/skin/frontend/BlueTheme/default/images/nav_divider.gif) repeat-x 0 100%; }
#nav_vert ul li a, #nav_vert ul li a:hover { color:#2f2f2f !important; }
#nav_vert ul span, #nav_vert ul li.last li span { padding:0px 15px 0px 15px;}
#nav_vert ul li.last span { background:#FFFFFF; }

/************ 3RD+ LEVEL ************/

#nav_vert ul ul { top:5px;}
#nav_vert ul ul ul { left:-10000px;}
#nav_vert li.over ul li.over ul ul { left:-10000px;}
#nav_vert li.over ul li.over ul li.over ul { left:100px; }

/* Fix for the IE bug */

#nav_vert iframe {
	position: absolute;
	left: -1px;
	top: 0;
	z-index: -1;
/*	filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);  */
} 

#nav_horz {
	padding:4px 10px;
	font-size:12px;
	z-index:999;
}

**fredda** · Jul 10, 2008 13:03

Code:

<ul>
<li><a href="#">Top Level 1</a>
<ul>
    <li><a href="#">Level 2a</a></li>
    <li><a href="#">Level 2b</a></li>
    <li><a href="#">Level 2c</a></li>
</ul>
</li>
<li><a href="#">Top Level 2</a>
<ul>
<li><a href="#">Level 2a</a></li>
<li><a href="#">Level 2b</a></li>
</ul>
</li>
</ul>

What do you want your menu to look like?
Here is an article on some css navigation tricks: http://www.sitepoint.com/article/navigation-using-css

**danielc1234** · Jul 10, 2008 13:10

Well, here is the main problem. The menu bar is being generated by a php program that is part of our shopping cart, so the php is generating the code for the menu bar.
But I would love it to look like the picture I just attached. I can mess with it more to get the coloring right, etc. but need it to look like this somewhat.

Thanks

**danielc1234** · Jul 10, 2008 13:13

I dont know if this helps, but this seems to be the code generating the menu bar...

<div class="head"><h3><?php echo $this->__('Shop by') ?></h3></div>
<h4>Category / Collection</h4>
<ul id="nav_vert">
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?>
</ul>
</div>

**fredda** · Jul 10, 2008 13:38

What does your html source code look like?

**danielc1234** · Jul 10, 2008 13:45

This is what is being generated by the cart.

Code:

          <div class="col-left side-col">
                <div class="vertical-nav-container">
<div class="vertical-nav">
    <div class="box layered-nav">

        <div class="head"><h3>Shop by</h3></div>                  
        <h4>Category / Collection</h4>
        <ul id="nav_vert">
                 <li onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)" class="level0 nav-dog-beds-by-brands parent">
<a href="/dog-beds-by-brands"><span>Dog Beds By Brands</span></a>
<ul class="level0">
<li class="level1 nav-dog-beds-by-brands-ay-rover">
<a href="/dog-beds-by-brands/ay-rover"><span>AY Rover</span></a></li>
<li class="level1 nav-dog-beds-by-brands-big-shimpy last">

<a href="/dog-beds-by-brands/big-shimpy"><span>Big Shimpy</span></a></li>
</ul></li>
                 <li onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)" class="level0 nav-dog-beds parent">
<a href="/dog-beds"><span>Dog Beds</span></a>
<ul class="level0">
<li class="level1 nav-dog-beds-all-dog-beds">
<a href="/dog-beds/all-dog-beds"><span>All Dog Beds</span></a></li>
<li class="level1 nav-dog-beds-round-dog-beds last">
<a href="/dog-beds/round-dog-beds"><span>Round Dog Beds</span></a></li>
</ul></li>
              </ul>   
    </div>
</div>

**fredda** · Jul 10, 2008 14:10

Here is a little css to play with:

Code:

.vertical-nav h3 { background: #3C90D8; color: #FFFFFF; margin-top: 0;}
.vertical-nav { border: 1px solid #B0CBE6; background: #E7EFF2; width: 250px; }
.vertical-nav h4 { font-size: 12px; }
.vertical-nav ul { list-style: none; }
.vertical-nav li a { background: url(url-to-arrow.png) no-repeat 0 50&#37;; padding: 5px 0 0 20px; display: block;}

**danielc1234** · Jul 10, 2008 14:41

Fredda...is there a way to take the css I have now and modify it to work? I like the fact that it will show you what menu section you are on and I need to be able to control the levels. For example on the Dog Beds By Brands, I would like the background of this to be different so that it appears to be like a header, then the subs of that be indented with bullets, etc.
The css you gave works, but it doesnt seem to be able to allow me to modify it on the sub levels independanty.

Thanks

**fredda** · Jul 11, 2008 00:21

The css I gave you was just a starting point for you to play with

. Look at your exisiting code and the code I gave you.. try out the different bits and see how it looks.
A little tip:
To target the first level list item you can use

Code:

.vertical-nav ul li

To target the second use:

Code:

.vertical-nav ul li ul li
or
.vertical-nav ul ul li

Hope that helps.

**danielc1234** · Jul 11, 2008 05:15

I see the code you gave me, but on mine it refers to #nav_vert and yours refers to .vertical-nav.
Since I am very new to CSS, It's kind of hard for me to follow the logic at times. Do you think it would be better to start with your code and expand or use what I have and edit?
My goal for the menu bar is to be able to have a different background for level 1, be able to have a bullet and indented for level 2, and to have the currently selected level with a different background (or whatever) to let the customer know where they are at on the menu bar.

Oh..and to only allow these changes on the menu bar and not effect all the other li or <a> ,etc.

Thanks for sticking with me on this!!!!

**fredda** · Jul 13, 2008 04:01

Here is a little more css for you to play with:

Code:

.vertical-nav-container
{
    border: 1px solid #b0cbe6;
    background: #e8f0f3;
    width: 195px;
}
.vertical-nav-container h3
{
    background: #3C90D8;
    color: #FFFFFF;
    margin-top: 0;
    padding: 5px 0px 5px 11px;
    text-transform: uppercase;
    font-size: 12px;
}
.vertical-nav-container h4
{
    font-size: 11px;
}
.vertical-nav-container ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}
.vertical-nav-container li 
{ 
    margin-left: 12px; 
}
.vertical-nav-container li li 
{
    margin-left: 27px;
}
.vertical-nav-container li a
{
    background: url(arrow.gif) no-repeat 0 50&#37;;
    padding: 5px 0 0 15px;
    display: block;
    font-size: 12px;
    color: #5c8ac6;
    height: 20px;
}
.vertical-nav-container li li a 
{
    text-decoration: none;
    color: #000000;
}

User Tag List

Thread: Stationary Second Level Menu Bar

Thread Tools

Display

Stationary Second Level Menu Bar

Bookmarks

Bookmarks

Posting Permissions