Jump to content

Expanding Menu


Recommended Posts

I want an expanding menu so when you click the main link more links are under it if you know what i mean...Like thisLink--- Hidden Link--- Hidden LinkAnd the hidden links appear when you click the linkId like it to be in JavaScript if possible as i am not familiar with CSS.I have googled it but they dont seem to work

Link to post
Share on other sites

try this

<html><head>	<title></title>	<script>			//clickable item ids		var items = ["item0","item1"];				//function to open and close items		function toggle()		{			//get item			var item = this.parentNode;	//note: this = anchor from attachEvents			//get subitem			var subitem = document.getElementById(item.id + "sub");			//toggle subitem			if(subitem.style.display == "none") //closed				//open it				subitem.style.display = "block";			else //open				//close it				subitem.style.display = "none";						//prevent anchor from following href			return false;		}				//function to attach events		function attachEvents()		{			for(i=0;i<items.length;i++)			{				//get next item				var item = document.getElementById(items[i]);				//get item anchor				var anchor = item.childNodes[0];				//attach onclick event				anchor.onclick = toggle;			}		}				//initial setup		function init()		{			//hide all sub items			for(i=0;i<items.length;i++)			{				//get next item				var item = document.getElementById(items[i]);				//get subitem				var subitem = document.getElementById(item.id + "sub");				//hide subitem				subitem.style.display = "none";				//indent subitem				subitem.style.paddingLeft = "10px"; 			}		}		</script></head><body>	<div id="menu">		<div id="item0"><a href="#">Item 0</a></div>		<div id="item0sub">			<div id="item00"><a href="#">Item 0.0</a></div>			<div id="item01"><a href="#">Item 0.1</a></div>			<div id="item02"><a href="#">Item 0.2</a></div>		</div>		<div id="item1"><a href="#">Item 1</a></div>		<div id="item1sub">			<div id="item10"><a href="#">Item 1.0</a></div>			<div id="item11"><a href="#">Item 1.1</a></div>			<div id="item12"><a href="#">Item 1.2</a></div>		</div>	</div>		<script>		init();		attachEvents();	</script></body></html>

Link to post
Share on other sites
try this
<html><head>	<title></title>	<script>			//clickable item ids		var items = ["item0","item1"];				//function to open and close items		function toggle()		{			//get item			var item = this.parentNode;	//note: this = anchor from attachEvents			//get subitem			var subitem = document.getElementById(item.id + "sub");			//toggle subitem			if(subitem.style.display == "none") //closed				//open it				subitem.style.display = "block";			else //open				//close it				subitem.style.display = "none";						//prevent anchor from following href			return false;		}				//function to attach events		function attachEvents()		{			for(i=0;i<items.length;i++)			{				//get next item				var item = document.getElementById(items[i]);				//get item anchor				var anchor = item.childNodes[0];				//attach onclick event				anchor.onclick = toggle;			}		}				//initial setup		function init()		{			//hide all sub items			for(i=0;i<items.length;i++)			{				//get next item				var item = document.getElementById(items[i]);				//get subitem				var subitem = document.getElementById(item.id + "sub");				//hide subitem				subitem.style.display = "none";				//indent subitem				subitem.style.paddingLeft = "10px"; 			}		}		</script></head><body>	<div id="menu">		<div id="item0"><a href="#">Item 0</a></div>		<div id="item0sub">			<div id="item00"><a href="#">Item 0.0</a></div>			<div id="item01"><a href="#">Item 0.1</a></div>			<div id="item02"><a href="#">Item 0.2</a></div>		</div>		<div id="item1"><a href="#">Item 1</a></div>		<div id="item1sub">			<div id="item10"><a href="#">Item 1.0</a></div>			<div id="item11"><a href="#">Item 1.1</a></div>			<div id="item12"><a href="#">Item 1.2</a></div>		</div>	</div>		<script>		init();		attachEvents();	</script></body></html>

thanks for that that worked well just 1 thingi only need oneso how do i remove Item1 and just leave Item 0
Link to post
Share on other sites

There is a small change in the Javascript part and commented the <div> in HTML.....

<html><head>	<title></title>	<script>			//clickable item ids		var items = ["item0"];		// EDIT: Modify this to add/remove menu		//function to open and close items		function toggle()		{			//get item			var item = this.parentNode;	//note: this = anchor from attachEvents			//get subitem			var subitem = document.getElementById(item.id + "sub");			//toggle subitem			if(subitem.style.display == "none") //closed				//open it				subitem.style.display = "block";			else //open				//close it				subitem.style.display = "none";						//prevent anchor from following href			return false;		}		//function to attach events		function attachEvents()		{			for(i=0;i<items.length;i++)			{				//get next item				var item = document.getElementById(items[i]);				//get item anchor				var anchor = item.childNodes[0];				//attach onclick event				anchor.onclick = toggle;			}		}				//initial setup		function init()		{			//hide all sub items			for(i=0;i<items.length;i++)			{				//get next item				var item = document.getElementById(items[i]);				//get subitem				var subitem = document.getElementById(item.id + "sub");				//hide subitem				subitem.style.display = "none";				//indent subitem				subitem.style.paddingLeft = "10px"; 			}		}		</script></head><body>	<div id="menu">	   <div id="item0"><a href="#">Item 0</a></div>		<div id="item0sub">			<div id="item00"><a href="#">Item 0.0</a></div>			<div id="item01"><a href="#">Item 0.1</a></div>			<div id="item02"><a href="#">Item 0.2</a></div>		</div>		<!-- <div id="item1"><a href="#">Item 1</a></div>		<div id="item1sub">			<div id="item10"><a href="#">Item 1.0</a></div>			<div id="item11"><a href="#">Item 1.1</a></div>			<div id="item12"><a href="#">Item 1.2</a></div>		</div>-->	</div>		<script>		init();		attachEvents();	</script></body></html>

Link to post
Share on other sites
There is a small change in the Javascript part and commented the <div> in HTML.....
<html><head>	<title></title>	<script>			//clickable item ids		var items = ["item0"];		// EDIT: Modify this to add/remove menu		//function to open and close items		function toggle()		{			//get item			var item = this.parentNode;	//note: this = anchor from attachEvents			//get subitem			var subitem = document.getElementById(item.id + "sub");			//toggle subitem			if(subitem.style.display == "none") //closed				//open it				subitem.style.display = "block";			else //open				//close it				subitem.style.display = "none";						//prevent anchor from following href			return false;		}		//function to attach events		function attachEvents()		{			for(i=0;i<items.length;i++)			{				//get next item				var item = document.getElementById(items[i]);				//get item anchor				var anchor = item.childNodes[0];				//attach onclick event				anchor.onclick = toggle;			}		}				//initial setup		function init()		{			//hide all sub items			for(i=0;i<items.length;i++)			{				//get next item				var item = document.getElementById(items[i]);				//get subitem				var subitem = document.getElementById(item.id + "sub");				//hide subitem				subitem.style.display = "none";				//indent subitem				subitem.style.paddingLeft = "10px"; 			}		}		</script></head><body>	<div id="menu">	   <div id="item0"><a href="#">Item 0</a></div>		<div id="item0sub">			<div id="item00"><a href="#">Item 0.0</a></div>			<div id="item01"><a href="#">Item 0.1</a></div>			<div id="item02"><a href="#">Item 0.2</a></div>		</div>		<!-- <div id="item1"><a href="#">Item 1</a></div>		<div id="item1sub">			<div id="item10"><a href="#">Item 1.0</a></div>			<div id="item11"><a href="#">Item 1.1</a></div>			<div id="item12"><a href="#">Item 1.2</a></div>		</div>-->	</div>		<script>		init();		attachEvents();	</script></body></html>

ok thanks
Link to post
Share on other sites

Also you can find one on th about:Tabs in the new IE v.7 But if you don't want to have to leave here is the source (unedited) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>	<head>		<link rel="stylesheet" type="text/css" href="ErrorPageTemplate.css" />		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>		<title>Welcome to Tabbed Browsing</title>		<script src="errorPageStrings.js" language="javascript" type="text/javascript">		</script>		<script src="httpErrorPagesScripts.js" language="javascript" type="text/javascript">		</script>	</head>	<body onLoad="java script:setTabInfo('tabInfoBlockID');" class="tabInfo">		<table width="730" cellpadding="0" cellspacing="0" border="0">			<tr>				<td id="tabIconAlign" width="60" align="left" valign="top" rowspan="2">					<img src="tab_icon.png" id="tabIcon" alt="Tab icon">				</td>				<td id="mainTitleAlign" valign="middle" align="left" width="*">					<h1 id="mainTitle">You've opened a new tab</h1>				</td>			</tr>			<tr>				<td id="ErrorCodeAlign" class="errorCodeAndDivider" align="right"> 					<div class="divider"></div>				</td>			</tr>		  <tr>			<td>			   			</td>			<td>			  <p><h2 id="withTabs1">With tabs you can:</h2>			  <ul>				<li id="withTabs2">Use one Internet Explorer window to view all your webpages.</li>				<li id="withTabs3">Open links in a background tab while viewing the page you're on.</li>				<li id="withTabs4">Save and open multiple webpages at once by using favorites and home page tabs.</li>			  </ul>			  </p>			  <p><h2 id="getStarted1">To get started:</h2>			  <ul>				<li id="getStarted2">Press the CTRL key while clicking links (or use the middle mouse button).</li>				<li id="getStarted3">Click any tab with the middle mouse button to close it.</li>				<li id="getStarted4">Press ALT+ENTER from the address bar or search box to open the result in a new tab.</li>			  </ul>			  </p>			</td>		  </tr>		  <tr>			  <td>				   			  </td>			  <td>				  <p>					  <table>						<tr>							<td valign="top">								<img src="help.gif" id="helpIcon" border="0" alt="Help Icon" class="actionIcon">							</td>							<td valign="top">								<a href="http://go.microsoft.com/fwlink/?LinkId=62982"><ID id="learnMoreAboutTabs">Learn more about tabs</ID></a>							</td>						</tr>					  </table>				  </p>			  </td>		  </tr>		  <!-- tab info -->		  <tr>			<td id="tabInfoBlockAlign" align="right" valign="top">				 			</td>			<td id="tabInfoAlign" align="left" valign="middle">				<h4>					<table>					  <tr>						  <td valign="top">								  <a href="#" onclick="java script:expandCollapse('tabInfoBlockID', false); setTabInfo('tabInfoBlockID'); return false;">								  <span id="tabImageContainer"></span>								  <noscript>									  <img src="down.png" id="tabInfoBlockIDImage" border="0" class="actionIcon" alt="Show more tab shortcuts">								  </noscript>							  </a>						  </td>						  <td valign="top">							  <span id="tabInfoContainer"></span>							  <noscript><ID id="hideTabHotkeys">Show more tab shortcuts</ID></noscript>						  </td>					  </tr>					</table>				</h4>					<div id="tabInfoBlockID" class="infoBlock" style="display: none">					<p>					  <b><ID id="tabHotKey1">Keyboard shortcuts</b>					  <table width="100%">						  <tr>							  <td width="45%" valign="top">								  <ID id="hotkeyInfo1">Open links in a new tab in the background</ID>							  </td>							  <td width="55%" valign="top">								  <ID id="hotkeyInfo1a">CTRL+click</ID>							  </td>						  </tr>						  <tr>							  <td valign="top">								  <ID id="hotkeyInfo2">Open links in a new tab in the foreground</ID>							  </td>							  <td valign="top">								  <ID id="hotkeyInfo2a">CTRL+SHIFT+click</ID>							  </td>						  </tr>						  <tr>							  <td valign="top">								  <ID id="hotkeyInfo3">Open a new tab in the foreground</ID>							  </td>							  <td valign="top">								  <ID id="hotkeyInfo3a">CTRL+T</ID>							  </td>						  </tr>						  <tr>							  <td valign="top">								  <ID id="hotkeyInfo4">Open a new tab from the Address bar</ID>							  </td>							  <td valign="top">								  <ID id="hotkeyInfo4a">ALT+ENTER</ID>							  </td>						  </tr>						  <tr>							  <td valign="top">								  <ID id="hotkeyInfo5">Open a new tab from the search box</ID>							  </td>							  <td valign="top">								  <ID id="hotkeyInfo5a">ALT+ENTER</ID>							  </td>						  </tr>						  <tr>							  <td valign="top">								  <ID id="hotkeyInfo6">Open Quick Tabs (thumbnail view)</ID>							  </td>							  <td valign="top">								  <ID id="hotkeyInfo6a">CTRL+Q</ID>							  </td>						  </tr>						  <tr>							  <td valign="top">								  <ID id="hotkeyInfo7">Switch between tabs</ID>							  </td>							  <td valign="top">								  <ID id="hotkeyInfo7a">CTRL+TAB/CTRL+SHIFT+TAB</ID>							  </td>						  </tr>						  <tr>							  <td valign="top">								  <ID id="hotkeyInfo8">Switch to a specific tab number</ID>							  </td>							  <td valign="top">								  <ID id="hotkeyInfo8a">CTRL+<i>n</i> (<i>n</i> can be 1-8)</ID>							  </td>						  </tr>						  <tr>							  <td valign="top">								  <ID id="hotkeyInfo9">Switch to the last tab</ID>							  </td>							  <td valign="top">								  <ID id="hotkeyInfo9a">CTRL+9</ID>							  </td>						  </tr>						  <tr>							  <td valign="top">								  <ID id="hotkeyInfo10">Close current tab</ID>							  </td>							  <td valign="top">								  <ID id="hotkeyInfo10a">CTRL+W</ID>							  </td>						  </tr>						  <tr>							  <td valign="top">								  <ID id="hotkeyInfo11">Close all tabs</ID>							  </td>							  <td valign="top">								  <ID id="hotkeyInfo11a">ALT+F4</ID>							  </td>						  </tr>						  <tr>							  <td valign="top">								  <ID id="hotkeyInfo12">Close other tabs</ID>							  </td>							  <td valign="top">								  <ID id="hotkeyInfo12a">CTRL+ALT+F4</ID>							  </td>						  </tr>					   </table>					</p>					<p>					  <b><ID id="tabHotKey2">Mouse shortcuts</b>					  <table width="100%">						  <tr>							  <td width="45%" valign="top">								  <ID id="hotkeyInfo13">Open a link in a background tab</ID>							  </td>							  <td width="55%" valign="top">								  <ID id="hotkeyInfo13a">Click the middle mouse button on a link</ID>							  </td>						  </tr>						  <tr>							  <td valign="top">								  <ID id="hotkeyInfo14">Open a new tab</ID>							  </td>							  <td valign="top">								  <ID id="hotkeyInfo14a">Double-click the empty space to the right of the last tab</ID>							  </td>						  </tr>						  <tr>							  <td valign="top">								  <ID id="hotkeyInfo15">Close a tab</ID>							  </td>							  <td valign="top">								  <ID id="hotkeyInfo15a">Click the middle mouse button on the tab</ID>							  </td>						  </tr>					  </table>					</p>				</div>			</td>		  </tr>		  <tr>			  <td>				  			  </td>			  <td>				 <div class="divider"></div>			  </tr>		  </tr>		  <tr>			  <td>				   			  </td>			  <td>				  <p>					<table width="100%">						<tr>							<form name="skipTabFrom" onSubmit="java script:skipTabCheck(document.skipTabFrom);" action="java script:window.location.replace('about:blank')">							  <td>								<input type="checkbox" name="skipTabCheckbox" id="dontShowPage">								<label for="dontShowPage" id="dontShowPageText">Don't show this page again</label>							  </td>							  <td align="right">								  <button id="closeButtonStyle" type="submit" style="width: 6.5em;"><ID id="closeButtonText">Close</ID></button>							  </td>							</form>						</tr>					</table>				  </p>			  </td>		  </tr>		</table>	</body></html>

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...