Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding if/else to existing function for js menu

    Hi there, I'm looking for some help with modifying an existing function which controls the highlighted states of a multi level js accordion menu. I have had to use javascript due to certain css elements not working in safari browsers.

    My problem is due to the multi level aspect as when a sub link is clicked, the parent link above it then deselects. I need the parent link to stay active when its sub links are clicked and only deselects when a link outside of that list is clicked upon.

    I understand the theory of adding a conditional statement but simply don't know how to apply it correctly within the function...any help would be very much appreciated.

    Here is the existing function which tells a link to be active or selected:

    Code:
    var Lst;
    
    function CngClass(obj){
     if (Lst) Lst.className='.topnav';
     obj.className='selected';
     Lst=obj;
    }
    and here is the menu code:

    Code:
    <ul class="topnav">
    	<li><a href="#">Home</a></li>
    	
    	<li><a onclick="CngClass(this);" href="#">Top Link 2</a>
    		<ul>
    			 <li><a onclick="CngClass(this);" href="#">Cookies</a></li>
    			 <li><a onclick="CngClass(this);" href="#">Events</a></li>
    			 <li><a onclick="CngClass(this);" href="#">Forms</a></li>
    			 <li><a onclick="CngClass(this);" href="#">Games</a></li>
    			 <li><a onclick="CngClass(this);" href="#">Images</a></li>
    			 <li><a onclick="CngClass(this);" href="#">Navigations</a>
    				<ul>
    					<li><a onclick="CngClass(this);" href="#">CSS</a></li>
    					<li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
    					<li><a onclick="CngClass(this);" href="#">JQuery</a></li>
    				</ul>
    			</li>
    			 <li><a onclick="CngClass(this);" href="#">Tabs</a></li>
    		</ul>
    	</li>
    	<li><a onclick="CngClass(this);" href="#">Tutorials</a>
    		<ul>
    			 <li><a onclick="CngClass(this);" href="#">HTML</a></li>
    			 <li><a onclick="CngClass(this);" href="#">CSS</a></li>
    			 <li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
    			 <li><a onclick="CngClass(this);" href="#">Java</a>
    				<ul>
    					<li><a onclick="CngClass(this);" href="#">JSP</a></li>
    					<li><a onclick="CngClass(this);" href="#">JSF</a></li>
    					<li><a onclick="CngClass(this);" href="#">JPA</a></li>
    					<li><a onclick="CngClass(this);" href="#">Contact</a></li>
    				</ul>
    			</li>
    			 <li><a onclick="CngClass(this);" href="#">Tabs</a></li>
    		</ul>
    	</li>
    	<li><a onclick="CngClass(this);" href="#">Contact</a></li>
    	<li><a onclick="CngClass(this);" href="#">Upload script</a></li>
    </ul>
    Thanks for any help or advice.

  • #2
    New Coder
    Join Date
    Mar 2009
    Posts
    74
    Thanks
    3
    Thanked 3 Times in 3 Posts
    I just threw something together. Is this what you're looking for?

    Code:
    <html>
    <head>
    
    <style>
    .topnav
    {
    	color:green;
    
    }
    
    .selected
    {
    	color:blue;
    	background-color:red;
    }
    </style>
    
    <script language="javascript" type="text/javascript">
    var cursel=undefined;
    
    function cngclass(obj)
    {
    	if(cursel)
    	{
    		//reset the previously selected item
    		cursel.className=''
    	}
    	
    	obj.className='selected';
    	cursel=obj
    }
    </script>
    
    </head>
    <body>
    
    <ul class="topnav">
    	<li><a href="#">Home</a></li>
    	
    	<li><a onclick="cngclass(this);" href="#">Top Link 2</a>
    		<ul>
    			 <li><a onclick="cngclass(this);" href="#">Cookies</a></li>
    			 <li><a onclick="cngclass(this);" href="#">Events</a></li>
    			 <li><a onclick="cngclass(this);" href="#">Forms</a></li>
    			 <li><a onclick="cngclass(this);" href="#">Games</a></li>
    			 <li><a onclick="cngclass(this);" href="#">Images</a></li>
    			 <li><a onclick="cngclass(this);" href="#">Navigations</a>
    				<ul>
    					<li><a onclick="cngclass(this);" href="#">CSS</a></li>
    					<li><a onclick="cngclass(this);" href="#">JavaScript</a></li>
    					<li><a onclick="cngclass(this);" href="#">JQuery</a></li>
    				</ul>
    			</li>
    			 <li><a onclick="cngclass(this);" href="#">Tabs</a></li>
    		</ul>
    	</li>
    	<li><a onclick="cngclass(this);" href="#">Tutorials</a>
    		<ul>
    			 <li><a onclick="cngclass(this);" href="#">HTML</a></li>
    			 <li><a onclick="cngclass(this);" href="#">CSS</a></li>
    			 <li><a onclick="cngclass(this);" href="#">JavaScript</a></li>
    			 <li><a onclick="cngclass(this);" href="#">Java</a>
    				<ul>
    					<li><a onclick="cngclass(this);" href="#">JSP</a></li>
    					<li><a onclick="cngclass(this);" href="#">JSF</a></li>
    					<li><a onclick="cngclass(this);" href="#">JPA</a></li>
    					<li><a onclick="cngclass(this);" href="#">Contact</a></li>
    				</ul>
    			</li>
    			 <li><a onclick="cngclass(this);" href="#">Tabs</a></li>
    		</ul>
    	</li>
    	<li><a onclick="cngclass(this);" href="#">Contact</a></li>
    	<li><a onclick="cngclass(this);" href="#">Upload script</a></li>
    </ul>
    </body>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •