View Full Version : DD site menu - local change to css of selected menu item

05-23-2007, 09:36 AM
1) Script Title: DD site menu (the one used on every page)

2) Script URL (on DD): All pages, e.g. http://www.dynamicdrive.com/dynamicindex12/

3) Describe problem: (more a question)
The leftbar menu in the DD site has an ID assigned to each menu item.
The menu item for the current page has a local change to its CSS, black text and grey background - e.g.
<STYLE type="text/css">#c12 a{ color: black; background: #F0F0F0}</STYLE>
though this is not visible in the source code for the page. How is the menu ID read and then how is this style change made?

4) Background: I am producing a menu, with submenus, in one frame that controls html and pdfs in another, the menu will remain but update its state to reflect the last click. This will also require clearing previous state changes. I would also appreciate any pointers to anything ready made for this.

05-23-2007, 11:33 AM
I'm using JavaScript to see if the current page's URL matches a particular sub directory structure. For example, if the URL is:


I'm looking for:


where D is any number.

If a match is found, I dynamically write out a CSS code that applies a unique style to the CSS id with the matched number. The end result is:

var ddcurpageurl=window.location.toString() //current page url
var testre=/dynamicindex(\d+)/i
if (ddcurpageurl.match && ddcurpageurl.match(testre)!=null){
var catid="#c"+ddcurpageurl.match(testre)[1]
document.write('<style type="text/css">')
document.write(catid+" a{ color: black; background: #F0F0F0}")


This works great in my case, but depending on the complexity of your URLs as far as being able to discern if a URL belongs to a specific category, it may not be feasible. FYI this script (http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm) also contains a similar feature to highlight the current tab if the page's URL matches one of the tab's.