HTML, JavaScript And CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
 
User Name:
Password:
Remember me
Go Back   ASP Free Forums > Programming > HTML, JavaScript And CSS Help
Reload this Page

collapsable expandable menus

Discuss collapsable expandable menus in the HTML, JavaScript And CSS Help forum on ASP Free.
collapsable expandable menus HTML Help forum discussing HTML, DHTML, XHTML, and JavaScript languages for web development, including CSS style sheet coding. All aspects of website development are covered here.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread ASP Free Forums Sponsor:
  #1  
Old August 3rd, 2004, 09:36 AM
thugangel1983 thugangel1983 is offline
Registered User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Aug 2004
Posts: 18 thugangel1983 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
collapsable expandable menus
one feature ive intended to add to my website from the start was making the menu collapsable and expandable

ive figured how to do this with an .xml page - but i dont know how to make a style sheet for it

also do not know how to put it into a .html webpage

can anyone help?

heres the code i made:


CODE

<MENU000>
<SECTION001>Promoting Your Business - Why?
<SECTION003>Through Advertising</SECTION003>
<SECTION003>Other Techniques</SECTION003>
</SECTION001>

<SECTION001>Modelling
<SECTION002>Through Advertising</SECTION002>
<SECTION003>No Experience? Apply / Contact Us</SECTION003>
</SECTION001>

<SECTION001>Products / Services
<SECTION003>Prices - small qty's.</SECTION003>
<SECTION003>Prices - higher qty's.</SECTION003>
<SECTION002>Brochures
<SECTION003>Full Colour - Examples</SECTION003>
</SECTION002>
<SECTION002>Business Stationery
<SECTION003>Examples</SECTION003>
<SECTION004>ONLINE ORDER FORM</SECTION004>

</SECTION002>
<SECTION002>Catalogues</SECTION002>
<SECTION002>Flyers / Leaflets</SECTION002>
<SECTION002>Posters</SECTION002>
<SECTION002>Web Design / Hosting</SECTION002>
</SECTION001>

<SECTION001>Advertising Spaces
<SECTION003>Airports</SECTION003>

<SECTION003>Billboards</SECTION003>
<SECTION003>Bus Shelters</SECTION003>
<SECTION003>Directories</SECTION003>
<SECTION003>Internet</SECTION003>
<SECTION003>Local Magazine / Directory</SECTION003>
<SECTION003>Magazines / Newspapers</SECTION003>

<SECTION003>Radio / TV</SECTION003>
<SECTION003>Stores / Shopping Centres</SECTION003>
<SECTION003>Street Ads</SECTION003>
<SECTION003>Taxis</SECTION003>
</SECTION001>

<SECTION001>Delivery Service / Distribution
<SECTION002>Public Businesses
<SECTION003>In-Store</SECTION003>

<SECTION003>Selected / Specialised Recipients</SECTION003>
<SECTION003>Local / Selected Communities</SECTION003>
<SECTION003>Large Scale Distribution</SECTION003>
</SECTION002>
<SECTION002>Trade Businesses
<SECTION003>In-Store</SECTION003>
<SECTION003>Selected / Specialised Recipients</SECTION003>

<SECTION003>Local / Selected Communities</SECTION003>
<SECTION003>Large Scale Distribution</SECTION003>
</SECTION002>
</SECTION001>

</MENU000>


i want SECTION001 styles to be bold and large. SECTION002 to be bold but smaller. SECTION003 to be small and not bold. SECTION004 to be same as SECTION003 but italic. i also am hoping i can figure how to make the expandable sections each have a words/phrase with them (for now, i have just placed them as the first thing after expanding) and make every single line also into a hyperlink with tooltip (i can do this easily, but not implemented in a expandable/collapsable menu)

i can create a diagram of how i want it to look and post that, if it helps...
Reply With Quote
  #2  
Old August 4th, 2004, 03:23 AM
thugangel1983 thugangel1983 is offline
Registered User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Aug 2004
Posts: 18 thugangel1983 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
is there anyone who can help me with making these menus
Reply With Quote
  #3  
Old August 4th, 2004, 05:08 AM
bamboo bamboo is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jul 2004
Posts: 168 bamboo User rank is Private First Class (20 - 50 Reputation Level)bamboo User rank is Private First Class (20 - 50 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
Reply With Quote
  #4  
Old August 4th, 2004, 07:53 AM
thugangel1983 thugangel1983 is offline
Registered User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Aug 2004
Posts: 18 thugangel1983 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
thank you ill have a proper look later
Reply With Quote
  #5  
Old August 4th, 2004, 04:21 PM
thugangel1983 thugangel1983 is offline
Registered User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Aug 2004
Posts: 18 thugangel1983 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
damn - i thought i was getting somewhere with this - now ive hit another brickwall herees there code for my menu:

Code:
 <html> 
<head>
<span style="font-family: Impact">
<SCRIPT LANGUAGE="JavaScript">
<!--
// Copyright (c) 1996-1997 Tomer Shiran. All rights reserved.
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
var caution = false
function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "")
if (!caution || (name + "=" + escape(value)).length <= 4000)
document.cookie = curCookie
else
if (confirm("Cookie exceeds 4KB and will be cut!"))
document.cookie = curCookie
}
function getCookie(name) {
var prefix = name + "="
var cookieStartIndex = document.cookie.indexOf(prefix)
if (cookieStartIndex == -1)
return null
var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length)
if (cookieEndIndex == -1)
cookieEndIndex = document.cookie.length
return unescape(document.cookie.substring(cookieStartInde  x + prefix.length, cookieEndIndex))
}
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT"
}
}
function fixDate(date) {
var base = new Date(0)
var skew = base.getTime()
if (skew > 0)
date.setTime(date.getTime() - skew)
}
function item(parent, text, depth) {
this.parent = parent 
this.text = text 
this.depth = depth 
}
function makeArray(length) {
this.length = length 
}
function makeDatabase() {
outline = new makeArray(5) 
outline[0] = new item(true, '<span style="font-family: Impact"><a title="click to learn more..." href="http://www.startermotordrives.co.uk.../promotion.html" style="text-decoration: none"><font color="#00FF00">Promoting Your Business - Why?</font></a></span>', 0)
outline[1] = new item(false, '<span style="font-family: Impact"><a title="advertising is an essential investment for any business with growth and success in their sight" href="http://www.startermotordrives.co.uk...dvertising.html" style="text-decoration: none"><font color="#00FF00">Through Advertising</font></a></span>', 1)
outline[2] = new item(false, '<span style="font-family: Impact"><a title="offer your customers special deals & discounts" href="http://www.startermotordrives.co.uk...techniques.html" style="text-decoration: none"><font color="#00FF00">Other Techniques</font></a></span>', 1)
 
outline[3] = new item(true, '<span style="font-family: Impact"><a title="unavailable link" href="http//www.startermotordrives.co.uk/fishnetproductions/" style="text-decoration: none"><font color="#00FF00">Modelling</font></a></span>', 0)
outline[4] = new item(false, '<span style="font-family: Impact"><a title="unavailable link" href="http//www.startermotordrives.co.uk/fishnetproductions/" style="text-decoration: none"><font color="#00FF00">Modelling</font></a></span>', 1)
 
setStates()
setImages()
}
function setStates() {
var storedValue = getCookie("outline")
 
if (!storedValue) {
for (var i = 0; i < outline.length; ++i) {
if (outline[i].depth == 0)
	outline[i].state = true
else
	outline[i].state = false
}
} else {
for (var i = 0; i < outline.length; ++i) {
if (storedValue.charAt(i) == '1')
	outline[i].state = true
else
	outline[i].state = false
}
}
}
function setImages() {
for (var i = 0; i < outline.length; ++i) {
if (outline[i].state)
if (outline[i].parent) 
	if (outline[i + 1].state) 
	 outline[i].pic = '<A HREF="javascript:toggle(' + i + ')"><IMG SRC="images/exploded.gif" BORDER=0></A>'
	else 
	 outline[i].pic = '<A HREF="javascript:toggle(' + i + ')"><IMG SRC="images/collapsd.gif" BORDER=0></A>'
else 
	outline[i].pic = '<IMG SRC="images/child.gif" BORDER=0>'
}
}
function toggle(num) {
for (var i = num + 1; i < outline.length && outline[i].depth >= outline[num].depth + 1; ++i) {
if (outline[i].depth == outline[num].depth + 1)
outline[i].state = !outline[i].state 
}
setStorage()
history.go(0)
}
function setStorage() {
var text = ""
for (var i = 0; i < outline.length; ++i) {
text += (outline[i].state) ? "1" : "0"
}
setCookie("outline", text)
}
makeDatabase()
// -->
</SCRIPT>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('<PRE><font face=arial size=2>')
for (var i = 0; i < outline.length; ++i) {
if (outline[i].state) {
for (var j = 0; j < outline[i].depth * 5; ++j) {
document.write(' ')
}
document.write(outline[i].pic, ' ', outline[i].text, '<BR>')
} else {
var previous = i
for (var k = i + 1; k < outline.length && outline[k].depth >= outline[previous].depth; ++k) {
++i
}
}
}
document.write('</font></PRE>')
// -->
</SCRIPT>
</body>
</html>


everything was fine until i got past the third link / menu item.. none are appearing after that no matter what i do???? im stumped, i need help (again) the menu headers informatino appears just after
"outline = new makeArray(5)"
Reply With Quote
  #6  
Old August 4th, 2004, 04:25 PM
thugangel1983 thugangel1983 is offline
Registered User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Aug 2004
Posts: 18 thugangel1983 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Exclamation
O FFS!! i just saved it and tried it in a browser and it worked! previewing it in FrontPage only showed the first three links
Reply With Quote
  #7  
Old August 5th, 2004, 03:33 AM
thugangel1983 thugangel1983 is offline
Registered User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Aug 2004
Posts: 18 thugangel1983 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
http://www.startermotordrives.co.uk/fishnetproductions/

the site is far from completion

i have got the expandable/collapsable menu working. thanks for the help

but i would like to know HOW to make THAT frame of my website stay like that..... basically i mean when a link is clicked anywhere on my site, that page loads in the main frame, the menu frame doesnt change?

i dont know how to make frames load individual webpages like that, can anyone offer me any help or direct me somewhere that may help please? thank you

=====================

id also like to know (this will probably be more involved than the first request).. how can i make it so when a link is clicked which is (or IS NOT) on the menu frame, (it still expands the relevant menu) and highlights the link for the loaded page???
Reply With Quote
  #8  
Old August 5th, 2004, 04:13 AM
bamboo bamboo is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jul 2004
Posts: 168 bamboo User rank is Private First Class (20 - 50 Reputation Level)bamboo User rank is Private First Class (20 - 50 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
Reply With Quote
  #9  
Old August 5th, 2004, 04:51 AM
thugangel1983 thugangel1983 is offline
Registered User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Aug 2004
Posts: 18 thugangel1983 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
i should read more thoroughly

ive been using that site loads - this time last week i didnt know any HTML or other codes used on the web. only VBasic and the older forms of Basic, and Dos and all them ive known for years... but i didnt notice

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_navigation

HTML navigation frame

thanx

Quote:
id also like to know (this will probably be more involved than the first request).. how can i make it so when a link is clicked which is (or IS NOT) on the menu frame, (it still expands the relevant menu) and highlights the link for the loaded page???

im not sure about this though, i used JavaScript code to make what will be the menu frame - i dont really know any JS, and i dont know what section of JS at w3schools it would come under
Reply With Quote
  #10  
Old August 15th, 2004, 02:48 PM
HippyWarlock HippyWarlock is offline
Registered User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Aug 2004
Posts: 3 HippyWarlock User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Use the target= in your menu like this:
outline[119]=new item(true,'Online Forms - Loadsa Forms',1)
outline[120]=new item(false,'<A target="mainframe" HREF="http://www.direct.gov.uk/QuickFind/Forms/fs/en">From Cradle to Grave - Online Forms</A>',2)
outline[121]=new item(false,'<A target="mainframe" HREF="http://www.direct.gov.uk/QuickFind/DoItOnline/fs/en">More Forms (contact the PM?)</A>',2)
Reply With Quote
  #11  
Old August 15th, 2004, 03:02 PM
HippyWarlock HippyWarlock is offline
Registered User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Aug 2004
Posts: 3 HippyWarlock User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Take a look at my site where I've used more or less the same menu. Pinch the code if it helps.

http://www.kakak.karoo.net/

Where's my signature settings?
Reply With Quote
Reply

Viewing: ASP Free Forums > Programming > HTML, JavaScript And CSS Help > collapsable expandable menus

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support |