Results 1 to 3 of 3

Thread: Bullet List Accordion Menu Highlight link

  1. #1
    Join Date
    Feb 2008
    Posts
    62
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Bullet List Accordion Menu Highlight link

    1) Script Title:
    Bullet List Accordion Menu
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...m?expandable=2
    3) Describe problem:
    How to highlight Link after click . Example:

    CSS DRIVE (MENU)
    - CSS Gallery
    - Menu Gallery
    - Web Design News
    - CSS Examples
    - CSS Compressor
    - CSS Forums
    if user click in css gallery now after load page css gallery user can see css gallery is highlighted ( with color ,background and more ).

    Thanks

    Best ReGardS

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

    Default

    If you mean have the menu item corresponding to the current page be selected, this really is an issue on its own. The script does let you have a certain menu header selected by default when the page loads, either via the defaultexpanded option:

    Code:
    //Initialize first demo:
    ddaccordion.init({
    	headerclass: "mypets", //Shared CSS class name of headers group
    	contentclass: "thepet", //Shared CSS class name of contents group
    	revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    	defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
    "
    or using the remote URL parameter option: http://www.dynamicdrive.com/dynamici...suppliment.htm (end of page). Then, styling the selected header is just a matter of styling the CSS class you've specified be assigned to that header in your initialization code:

    Code:
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    As far as how to match up the current page's URL with the appropriate header to select, it really depends on how your site is created and what's at your disposal for doing so. For example, if your site is dynamically generated, you'd use some server side coding to do the match up, then dynamically output the menu's initialization code above accordingly. But there isn't a reliable way to do the match up using JavaScript, if that's what you're asking.
    Last edited by ddadmin; 08-10-2011 at 05:44 AM.
    DD Admin

  3. #3
    Join Date
    Feb 2008
    Posts
    62
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    ddadmin, thanks but This Not Worked in FF browser any version. ( i checked in FF 4.1, 5.1 ) so in IE worked
    New question : how to add any time for clear cookie ?
    New problems : i add expandable / collapsable all link , this worked but after click in exapnd all, menu opened and auto close ( refresh menu ), how to fix this ?

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
  •