Jump to content

Expanding Menu


...678

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...