Results 1 to 3 of 3

Thread: All Levels Nav Menu - using multiple styles for top level

  1. #1
    Join Date
    Aug 2006
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default All Levels Nav Menu - using multiple styles for top level

    1) Script Title: All Levels Navigation Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm

    3) Describe problem:

    I currently have the 'All Levels Navigation Menu' installed on a site I am working on. For the most part, it is working beautifully. There is just one thing I could not figure out how to do:

    For the top level of the menu, I want to be able to have multiple classes of LI's used in the same menu on the same level. The reason I want to be able to do this is that I want the right-most and left-most menu items to use a different background image from all of the ones in the middle.

    IE - if it were the menu displayed near the top of the main script page, I would want a different background on just the "Home" and "Web Tools" buttons. Any suggestions on how to set up and call my LI classes to make this happen?

    Thanks,
    Lil

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Sure. Take a look at the below, which gives one of the main tab menu items a different background image/ hover background image:

    Code:
    <style type="text/css">
    
    .mattblackmenu li.homestyle a{
    background: url(../home.gif) !important;
    }
    
    .mattblackmenu li.homestyle a:hover, .mattblackmenu li.homestyle a.selected{
    background: url(../homeover.gif) !important;
    }
    
    </style>
    
    </head>
    <body>
    
    <h3>All Levels Navigtional Menu: Top Menu Bar Example</h3>
    
    <div id="ddtopmenubar" class="mattblackmenu">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Home</a></li>
    <li class="homestyle"><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1">DHTML</a></li>
    <li><a href="http://www.dynamicdrive.com/style/" rel="ddsubmenu2">CSS</a></li>
    <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
    <li><a href="http://tools.dynamicdrive.com/" rel="ddsubmenu3">Web Tools</a></li>
    </ul>
    </div>
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    lilyinblue (10-03-2008)

  4. #3
    Join Date
    Aug 2006
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    That worked perfectly. Thank you!

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
  •