Log in

View Full Version : All Levels Nav Menu - using multiple styles for top level


lilyinblue
10-02-2008, 09:11 PM
1) Script Title: All Levels Navigation Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/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
ddadmin
10-03-2008, 01:05 AM
Sure. Take a look at the below, which gives one of the main tab menu items a different background image/ hover background image:


<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>
lilyinblue
10-03-2008, 02:39 AM
That worked perfectly. Thank you!