...678 Posted March 15, 2007 Share Posted March 15, 2007 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 comment Share on other sites More sharing options...
aspnetguy Posted March 15, 2007 Share Posted March 15, 2007 http://www.treeview.net/ Link to comment Share on other sites More sharing options...
...678 Posted March 15, 2007 Author Share Posted March 15, 2007 http://www.treeview.net/thats not what i want reallyI just want it with text and not images Link to comment Share on other sites More sharing options...
aspnetguy Posted March 15, 2007 Share Posted March 15, 2007 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 comment Share on other sites More sharing options...
...678 Posted March 15, 2007 Author Share Posted March 15, 2007 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 comment Share on other sites More sharing options...
pulpfiction Posted March 15, 2007 Share Posted March 15, 2007 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 comment Share on other sites More sharing options...
...678 Posted March 15, 2007 Author Share Posted March 15, 2007 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 comment Share on other sites More sharing options...
cpugeek Posted March 15, 2007 Share Posted March 15, 2007 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 comment Share on other sites More sharing options...
aspnetguy Posted March 16, 2007 Share Posted March 16, 2007 so much unnecessary code. I find it funny that MS still uses HTML 4.01 Transitional. Link to comment Share on other sites More sharing options...
Skemcin Posted March 16, 2007 Share Posted March 16, 2007 http://w3schools.invisionzone.com/index.php?showtopic=9500use the show/hide script here Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now