Explanation
(All are dummy links EXCEPT - 'Download')
So far, the other two Cross Browser DHTML Menubars that I have written are really suitable for Frames Pages but can be adopted into pages without frames. This one, on the other hand, may not quite be ideal for In-Frames use. I think, it's a handy little Menubar, ideal for No Frames Pages. I say this because,
- It doesn't parmanently occupy a good portion of the screen. Bring it in only when required.
- I have used usual Image Buttons. Therefore, will work just fine (without making your page look awful) even on older browsers - I've explained that in details, below.
- Script is short enough, therefore can be copied into all your pages.
- It's normally hidden (on 4th Generation or newer browsers only, ofcourse), more of useful information/text/images can be packed into the screen. In consequence, those visitors who set their monitors to high resolution will have no reasons to complain (unless your page contents are in a "table" with a fixed width - as in this case, rather than a flexible width specified in percentage terms).
So let's see what have I done here.
- First of all, I have created a small table, in which all the Menu Button Images are placed. For the purpose of this exercise, I've used 5 buttons in a single column. You are welcome to use as many as you wish. Go on adding if you need (but just make sure they aren't heavy duty stuff!! - otherwise it may take ages to load!!) or just have TEXT links on colored backgrounds. Choice is yours.
What you need to remember here is that once you have created this table, note down the Width of it. That's something you are going to require later.
- Then create two other buttons - one with something like "View Menu" written on it and the other with "Hide Menu" on it. Alternatively, if you wish you can just have TEXTs with similar messages!
- Now comes the positioning part. As usual, a name is needed for the Division ID - I've called the menu division "ownmenu" and the width of the table is 130. The initial position of the table is at LEFT:-140, which just about hides the whole table beyond the left margin with 10 pixels to spare. I've specified the top position as 120 - it can be anything & depends on where you wish the menu to appear.
- Finally, I have specified 50 as the final posion from left margin when visible. This bit, however, goes into the Script part - at "function slide()". You'll understand what am I talking about when you have the script downloaded & open in front of you.
- Next, in the body part itself I've put in a script like this:
<script language = "javascript">
<!--
if(ns4||ie4)
document.writeln('<DIV ID="buttons"><a href="javascript:slide()"><img src="butview.gif" border=0 width=101 height=25></a> <a href="javascript:back()"<>img src="buthide.gif" border=0 width=101 height=25></a></DIV>')
//-->
</script>
What it does is, it automatically inserts my two little buttons - one with VIEW MENU on it & the other with HIDE MENU, if the browser is 4th Generation or higher. In other words, these two buttons WILL NOT appear on older browsers. Neat that, won't you agree?
In the Style spec, the ID "button" position is given as left:20 top:90. Again, it's absolutely upto you where you want to position them. Ideally, it should be somewhere around the left-top corner so that the rest of the page remains free otherwise.
- In the script part, there are in all three functions. As with the other two Menubars, this one too has a function called "init" which checks the browser type on body load. Next is the function that I've named "slide" which is called upon when VIEW MENU button is clicked. That's when the Menu actually slides into it's final position (ie, left:50 top:120) in a step of 5 pixels. I should mention, I need not have made it to "slide in" - but I thought this would look better than a sudden appearance. Finally there is this function called "back" which resets the Menu to original position (ie;left:-140)
- I suppose, you do also want to know How would it be on older browsers. A reasonably normal looking page I should say. The Menu table on the top left corner and then the main body! Click on "Other menu" link button to take a look.
That's about all, folks! - mainly.
Among the other "not so important to you" points -
- In the download package I've included an identical Blank Button, if you wish to use these ones.
- Then once again, I'd request you to sign my Guest Book - what have you got to loose? I'm sure, you'd want your visitors to do the same when you have your page up & running! Think about it.
- It's all yours if you want. As usual, you can break it, twist it, use it or dump it! Plus, if you think these buttons don't go with your page theme/layout/background, you may wish to check out the other buttons at Free Stuff - Buttons OR use your own.
Copyright DBS © 1998-2003. All Rights Reserved |
|
|