Results 1 to 8 of 8

Thread: Accordion Menu Script active selection

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

    Default Accordion Menu Script active selection

    1) Script Title: Accordion Menu Script : Active selection of sub menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ordionmenu.htm

    3) Describe problem: 1. First item of main menu - if its not having a submenu - when i click the that menu it should take to some page.. how to do that.. in submenu we are using href.. but when we have no sub menu how to give for main menu.

    2. when the main menu is clicked it goes to activated mode.. same when the submenu is clicked i need activated mode(current selection mode)..

    how to do this.. please let me know.. as already i implemented this our project as today i have to deliver the project please let me know how to do that..

    Thanks in advance..

    ravimmrk@hotmail.com

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    If you're header has no submenu, ensure you don't have the higlighted:
    Code:
    <h3 class="menuheader expandable">JavaScript Kit</h3>
    If you want your header to fire as a link, have you tried adding an <a> tag on it:
    Code:
    <a href="http://www.google.com"><h3 class="menuheader">JavaScript Kit</h3></a>
    See if it helps
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    May 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default thanks.. but

    thanks for ur help..

    But let me know how to make the submenu to active state..

    suppose if i clicked submenuitem it should show in active state... as what now header do..

    thanks for ur needfulness..

    regards,
    ravi.m

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    See if adding the highlighted to the script helps:
    Code:
    <script type="text/javascript">
    window.onload=function() 
    {
       var accept=document.getElementsByTagName('a');
    for(var start=0;start<accept.length;start++)
    {accept[start].onclick=function() 
       {for(var start=0;start<accept.length;start++) 
    	{accept[start].style.background='url(arrowbullet.png) no-repeat left';
    	accept[start].style.paddingLeft='19px';
    		{this.style.background='#eee url(arrowbullet.png) no-repeat left';// Whatever you want here
    		}}}}}
    
    ddaccordion.init({
    	headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    	contentclass: "categoryitems", //Shared CSS class name of contents group
    	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
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
    	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    		//do nothing
    	},
    	onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    
    
    </script>
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. #5
    Join Date
    May 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Dear Mr. Rangana,

    Thanks for your help....

    Its doesn't work.. its spoling the menu structure.. the sub menu of select item gets active state but all other menu items disappears,

    below given is the menu struture i am using... i hope still something has to be changes.

    thanks for your needfulness... i hope i will get the solution..

    regards,
    ravi.m

    -------------------------------------------------------------------------

    <script type="text/javascript">


    ddaccordion.init({
    headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    contentclass: "categoryitems", //Shared CSS class name of contents group
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: false, //persist state of opened contents within browser session?
    toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
    animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    //do nothing
    },
    onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
    if (state=="block" && isclicked==true){ //if header is expanded and as the result of the user clicking on it
    //window.open(header.getAttribute('href'))
    //alert(header.getAttribute('href'))
    loadpage(header.getAttribute('href'), 'contentarea')
    }
    }
    })


    </script>

    <style type="text/css">
    /*css for the side TOC*/
    .arrowlistmenu{
    width: 185px; /*width of accordion menu*/
    }

    .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
    font: bold 12px Arial;
    color: white;
    background: black url(../images/titlebar.gif) repeat-x center left;
    margin-bottom: 1px; /*bottom spacing between header and rest of content*/
    border-bottom:1px;
    border-bottom-color:#000000;
    padding: 4px 0 4px 10px; /*header text is indented 10px*/
    cursor: hand;
    cursor: pointer;
    }

    .arrowlistmenu .menuheader a { /*CSS class for menu headers in general (expanding or not!)*/
    font: bold 12px Arial;
    display: block;
    color: white;
    margin-bottom: 5px; /*bottom spacing between header and rest of content*/
    padding: 4px 0 4px 0px; /*header text is indented 10px*/
    cursor: hand;
    cursor: pointer;
    text-decoration:none;

    }

    a.menuheader{
    background: black url(../images/titlebar.gif) repeat-x bottom left;
    color: white;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    padding: 4px 0;
    padding-left: 10px;
    text-decoration: none;
    }
    .arrowlistmenu .menuheader h3{
    font-size:12px;
    color: white;
    display: block;
    }
    .arrowlistmenu .menuheader a:hover{ /*CSS class for menu headers in general (expanding or not!)*/
    font: bold 12px Arial;
    display: block;
    color: #A70303;
    margin-bottom: 5px; /*bottom spacing between header and rest of content*/
    padding: 4px 0 4px 0px; /*header text is indented 10px*/
    cursor: hand;
    cursor: pointer;
    text-decoration:none;
    }

    .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
    background-image: url(../images/titlebar-active.gif);
    }

    .arrowlistmenu ul{ /*CSS for UL of each sub menu*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom:3px; /*bottom spacing between each UL and rest of content*/
    }
    .arrowlistmenu ul .back {
    border-bottom: 1px solid #999999;
    background-color:#E5E5E5;
    color:#FFCC00
    }


    .backalter {
    border-bottom: 1px solid #FFE7CE;


    }
    .arrowlistmenu ul li{
    padding-bottom: 2px;
    padding-left:10px /*bottom spacing between menu items*/
    }

    .arrowlistmenu ul li a{
    color: #A70303;
    background: url(../images/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
    display: block;
    padding: 2px 0;
    padding-left: 22px; /*link text is indented 19px*/
    text-decoration: none;
    font-size: 100%;
    vertical-align:text-top;
    text-decoration:none;
    }

    .arrowlistmenu ul li a:hover{ /*hover state CSS*/
    color: #FF6600;
    background-color: #F3F3F3;
    }

    </style>


    --------------------------

    <div class="arrowlistmenu">

    <a class="menuheader expandable" href="home.html"><h3>Course Objective</h3></a>
    <ul class="categoryitems"></ul>
    <a class="menuheader expandable" href="3.html"><h3>About this Course</h3></a>
    <ul class="categoryitems">
    <li class="backalter"><a href="javascript:loadpage('3.html', 'contentarea');">Using this Course</a></li>
    <li class="backalter"><a href="javascript:loadpage('0.html', 'contentarea');">Overview </a></li>
    </ul>

    <a class="menuheader expandable" href="4.html"><h3>Breakbulk Trading</h3></a>
    <ul class="categoryitems">
    <li class="backalter"><a href="javascript:loadpage('4.html', 'contentarea');">Global Trade </a></li>
    <li class="backalter"><a href="javascript:loadpage('5.html', 'contentarea');">Specialty of Breakbulk </a></li>
    <li class="back"><a href="javascript:loadpage('2.html', 'contentarea');"><p style="color:#0066FF" >Trade System</p></a></li>
    </ul>

    <a class="menuheader expandable" href="6.html"><h3>Breakbulk Cargoes and Trade Patterns</h3></a>
    <ul class="categoryitems">
    <li class="backalter"><a href="javascript:loadpage('6.html', 'contentarea');">Types of Cargoes</a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Cargo Characteristics</p></a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Breakbulk Trade Patterns</p></a></li>
    </ul>

    <a class="menuheader expandable" href="dummy.html">
    <h3> Transportation Modes</h3>
    </a>
    <ul class="categoryitems">
    <li class="backalter"><a href="#">Modes</a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Characteristics of Ships</p></a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Vessel Operations</p></a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Ports and Terminals </p></a></li>
    </ul>

    <a class="menuheader expandable" href="dummy.html"><h3>Breakbulk Process</h3></a>
    <ul class="categoryitems">
    <li class="backalter"><a href="#">Process</a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Planning</p></a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Execution</p></a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Monitoring</p></a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Control</p></a></li>
    </ul>

    <a class="menuheader expandable" href="dummy.html"><h3>Roles and Responsibilities of Stakeholders</h3></a>
    <ul class="categoryitems">
    <li class="backalter"><a href="#">Major Stakeholders</a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Roles of Stakeholders</p></a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Customer Interaction</p></a></li>
    </ul>

    <a class="menuheader expandable" href="dummy.html"><h3>Documentation</h3></a>
    <ul class="categoryitems">
    <li class="backalter"><a href="#">Common Documents </a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Documentation Process</p></a></li>
    </ul>

    <a class="menuheader expandable" href="dummy.html"><h3>Liabilities</h3></a>
    <ul class="categoryitems">
    <li class="backalter"><a href="#">Cargo Damage and Losses</a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Cargo Care</p></a></li>
    <li class="back"><a href="#"><p style="color:#0066FF" >Hazards</p></a></li>
    </ul>

    <a class="menuheader expandable" href="8.html"><h3>Resources</h3></a>
    <ul class="categoryitems">
    <li class="backalter"><a href="javascript:loadpage('8.html', 'contentarea');">References</a></li>
    <li class="backalter"><a href="javascript:loadpage('7.html', 'contentarea');">Downloads</a></li>
    <li class="backalter"><a href="javascript:loadpage('9.html', 'contentarea');">External Links </a></li>
    </ul>
    </div>

  6. #6
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    The (simplier) way for this one is to have an active pseudo-class in our a element.
    Try adding this in your CSS:
    Code:
    .arrowlistmenu ul li a:active
    {
    color:#fff;
    background:#f00 url(arrowbullet.png) no-repeat center left;
    }
    Apparently, this only works (well) in IE, but not with FF. I can't find any turnaround for this FF.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  7. #7
    Join Date
    May 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks a lot.....

    It worked out.. thanks a lot.. thanks for all ur timely needfulness..

    regards,
    ravi.m

  8. #8
    Join Date
    May 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    but i have another problem sorry to disturb u.. it works fine in IE but its not working in firefox.. on press its works.. once i release the mouse it goes to same state...... what will be problem..

    regards,
    ravi.m

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
  •