Web development, coding & SEO

Expandable menu javascript 3 levels

Expandable JavaScript menu, has 3 expandable levels, several items can be opened simultaneusly. When JavaScript is disabled, all is expanded.

Sample of the expandable menu

Basic build of the expandable menu

<div class="primary"></div>

<div class="secondary toggleable">

	<div class="secondary-item"></div>
		<div class="terciary toggleable"></div>
		<div class="terciary toggleable"></div>
		<div class="terciary toggleable"></div>

	<div class="secondary-item"></div>
		<div class="terciary toggleable"></div>
		<div class="terciary toggleable"></div>
		<div class="terciary toggleable"></div>

	<div class="secondary-item"></div>
		<div class="terciary toggleable"></div>
		<div class="terciary toggleable"></div>
		<div class="terciary toggleable"></div>

</div>

Simplified structure of the expandable menu

<div class="primary">
	<div onclick="toggler(this)">
		<div>▲</div>
		<div>PRIMARY</div>
	</div>
</div>

<div class="secondary toggleable">
	<div class="secondary-item">
		<div onclick="toggler(this)">
			<div>▲</div>
			<div>SECONDARY</div>
		</div>
	</div>
	<div class="terciary toggleable">
		<div>TERCIARY</div>
	</div>
</div>

Full markup of the expandable menu

<div class="primary">
	<div onclick="toggler(this)">
		<div class="expandable-menu-sign">
			▲
		</div>
		<div class="primary-title">
			PRIMARY
		</div>
	</div>
</div>
<div class="secondary toggleable">
	<div class="secondary-item">
		<div onclick="toggler(this)">
			<div class="expandable-menu-sign">
				▲
			</div>
			<div class="secondary-title">
				SECONDARY
			</div>
		</div>
	</div>
	<div class="terciary toggleable">
		<div class="terciary-item">
			<div class="terciary-title">
				TERCIARY
			</div>
		</div>
	</div>
</div>

Comments to this expandable menu

• if javascript is disabled, the menu is expanded,
• in head section, CSS has to be loaded before the javascript,
• onclick="" has to be located in it's own element,
• the changing sign element is needed,
• the changing sign has to be the next element following the inline javascript,
• <label> doesn't work in here,
• no comments inside the menu,
• the only needed styles are: behavior:url(#default#savehistory); and those that javascript writes in. Other styles here are just for beauty.

CSS of the sample and including the external javascript file.

<style type="text/css">
/*<![CDATA[*/
*{
	margin:0;
	padding:0;
}
img{
	border:none;
}
a{
	outline:none;
}
body{
	behavior:url(/scripts/csshover3.htc);
	color:#666;
	font-family:sans-serif;
	font-size:12px;
}
.expandable-menu{
	background:#f2f2f2;
	behavior:url(#default#savehistory);/*for javascript menu*/
	float:left;
	padding:9px 25px 24px 28px;
	width:650px;
}
.expandable-menu-sign{
	color:#969495;
	float:right;
	text-align:right;
	width:20px;
}
.expandable-menu-sign:hover{
	cursor:pointer;
}
.primary{
	border-bottom:1px solid #969495;
	float:left;
	padding:11px 0;
	width:100%;
}
.primary-title{
	float:left;
	width:auto;
}
.primary-title:hover{
	cursor:pointer;
}
.primary-checkbox-block{
	float:right;
	margin-right:9px;
	width:auto;
}
.primary-checkbox-block:hover{
	cursor:pointer;
}
.primary-checkbox{
	float:right;
	width:auto;
}
.secondary{
	background:#f9f9f9;
	float:right;
	padding-bottom:22px;
	width:100%;
}
.secondary-item{
	float:left;
	padding-top:11px;
	width:570px;
}
.secondary-checkbox-block{
	float:left;
	padding:0 16px 0 13px;
	width:auto;
}
.secondary-checkbox{
}
.secondary-title{
	border-bottom:1px solid #dadada;
	float:left;
	padding-bottom:11px;
	width:508px;
}
.secondary-title:hover{
	cursor:pointer;
}
.secondary .expandable-menu-sign{
	border-bottom:1px solid #dadada;
	padding-bottom:11px;
}
.terciary{
	background:#f9f9f9;
	float:left;
	padding-left:55px;
	padding-bottom:22px;
	width:595px;
	width:auto;
}
.terciary-item{
	float:left;
	padding:7px 0;
	width:100%;
}
.terciary-checkbox-block{
	float:left;
	padding-right:16px;
	width:auto;
}
.terciary-checkbox{
}
.terciary-title{
	float:left;
	width:auto;
}
.terciary-title:hover{
	cursor:pointer;
}
/*]]>*/
</style>
<script type="text/javascript" src="menu-expandable.js">
//<![CDATA[//]]>
</script>

JavaScript

document.write('<style type="text/css"><!--\n'+'.toggleable{display:none;}\n'+'//--></style>');
function toggler(loc){
   if(document.getElementById){
	  var foc=loc.firstChild;
	  foc=loc.firstChild.innerHTML?
		 loc.firstChild:
		 loc.firstChild.nextSibling;
	  foc.innerHTML=foc.innerHTML=='\u25bc'?'\u25b2':'\u25bc';
	  foc=loc.parentNode.nextSibling.style?
		 loc.parentNode.nextSibling:
		 loc.parentNode.nextSibling.nextSibling;
	  foc.style.display=foc.style.display=='block'?'none':'block';}}
if(!document.getElementById)
   document.write('<style type="text/css"><!--\n'+'.toggleable{display:block;}\n'+'//--></style>');

Original of the code of expandable menu

<html><head>
<title></title>

<meta name="save" content="history" />

<style type="text/css"><!--
.save{
   behavior:url(#default#savehistory);}
a.dsphead{
   text-decoration:none;
   margin-left:1.5em;}
a.dsphead:hover{
   text-decoration:underline;}
a.dsphead span.dspchar{
   font-family:monospace;
   font-weight:normal;}
.dspcont{
   display:none;
   margin-left:1.5em;}
//--></style>


<script type="text/javascript"><!--
function dsp(loc){
   if(document.getElementById){
	  var foc=loc.firstChild;
	  foc=loc.firstChild.innerHTML?
		 loc.firstChild:
		 loc.firstChild.nextSibling;
	  foc.innerHTML=foc.innerHTML=='\u25bc'?'\u25b2':'\u25bc';
	  foc=loc.parentNode.nextSibling.style?
		 loc.parentNode.nextSibling:
		 loc.parentNode.nextSibling.nextSibling;
	  foc.style.display=foc.style.display=='block'?'none':'block';}}

if(!document.getElementById)
   document.write('<style type="text/css"><!--\n'+
	  '.dspcont{display:block;}\n'+
	  '//--></style>');
//--></script>

<noscript>
<style type="text/css"><!--
.dspcont{display:block;}
//--></style>
</noscript>

</head><body>
<p>The javascript:void(0) in here isn't needed essentially</p>

<div class="save">

<h1><a href="javascript:void(0)" class="dsphead"
   onclick="dsp(this)">
   <span class="dspchar">&#9660;</span> heading </a></h1>
   <div class="dspcont">section</div>

<h1><a href="javascript:void(0)" class="dsphead"
   onclick="dsp(this)">
   <span class="dspchar">&#9660;</span> heading</a></h1>
   <div class="dspcont">

	  <h2><a href="javascript:void(0)" class="dsphead"
		 onclick="dsp(this)">
		 <span class="dsphead">&#9660;</span> heading</a></h2>
		 <div class="dspcont">section</div>

	  <h2><a href="javascript:void(0)" class="dsphead"
		 onclick="dsp(this)">
		 <span class="dspchar">&#9660;</span> heading</a></h2>
		 <div class="dspcont">section</div>
   </div><!--end div class="dspcont"-->

</div><!--end div class="save"-->

</body>
</html>

2009

---