SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Stationary Second Level Menu Bar

    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;
    }

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by danielc1234; Feb 4, 2010 at 19:45.

  4. #4
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  5. #5
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What does your html source code look like?

  6. #6
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  7. #7
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;}

  8. #8
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!!!

  11. #11
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •