SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Highlight current level on Expanding List / Menu

    Hi All,

    I have a script on a site controlling expansion/collapse of the site navigation. The navigation is just a html list in an include file. A number of pages within one section of the site may have the same 'included' navigation.

    What we want to do now, is bold the link that corresponds to the current page. We can't add this manually (see above) and we're hoping we can tweak our current script/pages fairly easily.

    I've seen this done in a few ways but I'm not familiar with javascript and have been unsucessful with my own attempts at changing the current code.

    Current Javascript:
    Code JavaScript:
    /*
     * date:	2002-12-13
     * info:	[url]http://inspire.server101.com/js/xc/[/url]
     */
     
    var xcNode = [];
     
    function xcSet(m, c) {
    	if ((document.getElementById && document.getElementById(m) != null) && document.createElement && (navigator.userAgent.indexOf('MSIE 5.2') == -1 || navigator.userAgent.indexOf('Mac') == -1)) {
    	m = document.getElementById(m).getElementsByTagName('ul');
    	var d, p, x, h, i, j;
    	for (i = 0; i < m.length; i++) {
    		d = m[i].getAttribute('id');
    		if (d) {
    			x = xcCtrl(d, c, 'x', '[+]', 'Show', m[i].getAttribute('title')+' (expand menu)');
    			x = xcCtrl(d, c, 'c', '[-]', 'Hide', m[i].getAttribute('title')+' (collapse menu)');
     
    			p = m[i].parentNode;
    			if (h = !p.className) {
    				j = 2;
    				while ((h = !(d == arguments[j])) && (j++ < arguments.length));
    				if (h) {
    					m[i].style.display = 'none';
    					x = xcNode[d+'x'];
    				}
    			}
     
    			p.className = c;
    			p.insertBefore(x, p.firstChild);
    		}
    	}
    }
    }
     
     
     
    function xcShow(m) {
    	xcXC(m, 'block', m+'c', m+'x');
    }
     
     
    function xcHide(m) {
    	xcXC(m, 'none', m+'x', m+'c');
    }
     
     
    function xcXC(e, d, s, h) {
    	e = document.getElementById(e);
    	e.style.display = d;
    	e.parentNode.replaceChild(xcNode[s], xcNode[h]);
    	xcNode[s].firstChild.focus();
    }
     
     
    function xcCtrl(m, c, s, v, f, t) {
    	var a = document.createElement('a');
    	a.setAttribute('href', 'javascript:xc'+f+'(\''+m+'\');');
    	a.setAttribute('title', t);
    	a.appendChild(document.createTextNode(v));
     
    	var d = document.createElement('div');
    	d.className = c+s;
    	d.appendChild(a);
     
    	return xcNode[m+s] = d;
    }

    Current HTML for nav. include
    Code HTML4Strict:
      <ul id="nav2xc" class="nav2links">
        <li><a href="/corporate/hr/yourpackage/index.htm">employee  benefits</a></li>
    		<li><a href="/corporate/hr/policies/index.htm">human resource policies</a> 
    		  <ul id="xc1">
    		    <li><a href="/corporate/hr/policies/antidiscrimination/index.htm">anti-discrimination</a></li>
    			<li><a href="/corporate/hr/policies/codeofconduct/index.htm">code of conduct</a></li>
    			<li><a href="pdf/corporate/disabilityplan.pdf">disability service plan 2007-10</a><span class="nonlinktextheading"> (PDF, 197KB)</span></li>
    			<li><a href="/corporate/hr/policies/extraleave/index.htm">extra leave for proportionate salary</a></li>
    			<li><a href="/corporate/hr/policies/family/index.htm">family and parental leave</a></li>
    			<li><a href="/corporate/hr/policies/flexible/index.htm">flexible work practices</a></li>
    	        <li><a href="/corporate/hr/policies/health/index.htm">health and safety procedures manual</a></li>
    			<li><a href="/corporate/hr/policies/hours/index.htm">hours of work arrangements</a></li>
    			<li><a href="/corporate/hr/policies/tenured/index.htm">management of tenured employees</a></li>
    			<li><a href="/corporate/hr/policies/absenteeism/index.htm">managing absenteeism</a></li>
    			<li><a href="/corporate/hr/leaving/resignation/retire/index.htm">phased retirement</a></li>
    			<li><a href="/corporate/hr/policies/special/index.htm">special leave</a></li>
    			<li><a href="/corporate/hr/policies/saras/index.htm">study and research assistance scheme (SARAS)</a></li>
    			<li><a href="/corporate/hr/policies/telecommuting/index.htm">telecommuting</a></li>
    			<li><a href="/corporate/hr/policies/uniform/index.htm">uniforms</a></li>
    			<li><a href="/corporate/hr/policies/whistleblowers/index.htm">whistleblowers</a></li>	
    			<li><a href="/assets/pdf/">workforce management delegations</a><span class="nonlinktextheading"> (PDF, 237 KB)</span></li>	
    		  </ul>
    		</li>
      		<li><a href="/corporate/hr/recruiting/index.htm">recruiting staff</a>
      		  <ul id="xc2">
      		    <li><a href="/corporate/hr/recruiting/advertising/index.htm">advertising vacancies</a></li>
    	        <li><a href="/corporate/hr/recruiting/candidates/index.htm">attracting candidates</a></li>
      		    <li><a href="/corporate/hr/recruiting/promotional/index.htm">departmental promotional materials</a></li>
      		    <li><a href="/corporate/hr/recruiting/graduates/index.htm">graduate pathways and career expos</a></li>
      		    <li><a href="/corporate/hr/recruiting/recruitment/index.htm">recruitment and selection processes</a></li>
      		    <li><a href="/corporate/hr/recruiting/diversity/index.htm">recruitment and selection process for diversity</a></li>
      		    <li><a href="/corporate/hr/recruiting/success/index.htm">recruitment success stories</a></li>
      		    <li><a href="/corporate/hr/recruiting/roles/index.htm">role descriptions</a></li>
      		    <li><a href="/corporate/hr/recruiting/agencies/index.htm">using recruitment agencies and online advertising</a></li>
     
      		  </ul>


    onload
    Code HTML4Strict:
    <body onLoad="xcSet('nav2xc', 'xc', 'xc1')">

    styles
    Code CSS:
    /* +/- control */	
    div.xcx, div.xcc {
    	position: relative;
    	display: inline;
    }
    li.xc>div.xcx, li.xc>div.xcc {
    	position: static;
    	margin-left: -1.5em;
    	float: left;
    	width: 1.5em;
    }
    div.xcx a, div.xcc a {
    	position: absolute;
    	left: -2em;
    }
    div.xcx>a, div.xcc>a {
    	position: static;
    }
    div.xcx a:link, div.xcx a:visited, 
    div.xcc a:link, div.xcc a:visited {
    	color: #000099;
    	text-decoration: none;
    	font-weight: normal;
    	font-size: 80&#37;;
    	top: .75em;
    }
     
    div.xcx a:hover, div.xcc a:hover  {
    	text-decoration: none;
    }


    We would really, really appreciate help updating our current script. Also happy to look at new scripts that will achieve the same result.

    Thanks.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Perhaps the following screencast will be of interest to you.
    http://css-tricks.com/new-screencast-three-state-menu/

    Aside from the multiple states, it uses a technique where the type of page is placed as a class in the body, so that you can then use that to uniquely target certain pages of your menu at a later stage.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, I'll take a look.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    There is also a good article about this locally.
    Head along to http://www.sitepoint.com/article/navigation-using-css/3
    and scroll down to where it mentions <body id="recipes">
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks I've had a look at those solutions but I was hoping for something that didn't involve quite as much manual input.

    The site has over 3000 pages and there are approx. 400 navigtaion include files each containing links relevant to a particular topic. Each nav inc could be used by any number of pages.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Woah, to create a script to handle all those situations will require even more work as well.

    It may be past time to look at best-practive techniques, and to implement them now may mean doing some extra work now, that's for sure, but the payoff comes when future changes are much easier to perform because you've implemented them.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •