First of all, let me explain, what is this good for and what does it do.
- This Menu OPENs into a New Resizable Window that, once opened, always remains visible, but DOES NOT obstruct the Main Window view.
- This, however, is applicable to browsers that support JavaScript 1.2, which means, the window can be resized only if the visitor has a 4th Generation (or higher) browser. Visitors with older versions, unfortunately, will have to CLOSE this window & reopen it on the next page.
- I suppose, this is a LOT BETTER than having to:
- Use the BACK button to go back to the Main Menu Page everytime (Like my No Frames Menubars Collection Page.
- Sites with Loads of Links, DO NOT have to allocate a good chunk of the Window to a MENUBAR Frame.
- If one designs a Site Without Frames OR a Frames (Like this page example), the WebMaster does not have to modify the Menu on ALL pages.
- So, basiclly, this is VERY usefull for sites with loads of Links.
The Script, makes use of Three basic JavaScript Functions or Events:
- OPEN - which opens a new window & supported by all JavaScript Enabled Browsers. This is the only one that has to go into your main pages. I have used the "Open Menu" Graphic to link to this Function
- CLOSE - a function that goes into the Menu Page only & supported by all JavaScript Enabled Browsers, like OPEN function.
- RESIZETO - I have used this twice in the Menu Page. Once to REDUCE the window size through "function changeit" call (so that this window does not Cover the Main window) & then to RESTORE it back to original size through "function goback" call (so that you can again view the complete Menubar)
The Script also, sniffs out old browsers from new - that is those that supprt JavaScript 1.2 & those that don't. Accordingly, the RESIZETO event, is ignored by older browsers. Download the Zipped package and take a look at the Source Code to understand, how this is achieved.
If you decide to use this Script, I suggest make your "index.html" (or whatever you wish to call it!) page a Frames Page (with one frame of 100% & the other 0) which should load your introduction page by default, into the named frame. That way, age targetting becomes easier.
For example, when you Clicked on the Link for this Menu, it loaded a page called "framzid22.html" which goes like this:
<html>
<head>
<title>Framz ID22</title>
</head>
<frameset rows="100%,0" border=0>
<frame src="menu_id22.html" name="main">
</frameset>
</html>
As you see, the named frame ("main"), loads "main_id22" into it, by default.
Then, all the links from the Menu Window are also targetted to this particular frame.
In this example, the Menu window size is set to 600 x 400 pixels and the reduced size is 150 x 150. While you can change these sizes according to your requirement, remember, not to make the reduced size LESS than 100 x 100 pixels. Some browsers will not reduce to any size smaller than that.
Note: In the Menu Window Example, ALL LINKS are dummy links, EXCEPT the following:
- Back to Introduction
- Download This
- Tips & Terms
- FAQ
- Sign GuestBook
For you information, following properties have been used for the Menu Window:
* width=600
* height=450
* left=10
* top=20
* status=no
* toolbar=no
* menubar=no
* resizable=yes
* alwaysraised=yes This keeps the Window always on top - A JavaScript 1.2 property
PS:
It's all yours if you want. As usual, you can break it, twist it, use it or dump it! In the meantime, I'll be absolutely delighted if you give me two minutes & sign my Guestbook. and Check out the Terms of Use. Thanks.
