PDA

View Full Version : Bullet List Accordion Menu Highlight link



why not
08-09-2011, 07:25 AM
1) Script Title:
Bullet List Accordion Menu
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm?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

ddadmin
08-10-2011, 05:39 AM
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:


//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/dynamicindex17/ddaccordion_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:


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.

why not
08-15-2011, 08:30 AM
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 ?