Results 1 to 2 of 2

Thread: DD site menu - local change to css of selected menu item

  1. #1
    Join Date
    May 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question DD site menu - local change to css of selected menu item

    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.

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

    Default

    I'm using JavaScript to see if the current page's URL matches a particular sub directory structure. For example, if the URL is:

    Code:
    http://www.dynamicdrive.com/dynamicindex12/
    I'm looking for:

    Code:
    dynamicindexD
    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:

    Code:
    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}")
    
    document.write('<\/style>')
    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 also contains a similar feature to highlight the current tab if the page's URL matches one of the tab's.

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
  •