Well there are two ways to create menu that I can think of. One is the Google's way, you click on it to get the menu items. Other is which we see on other sites when you hover on menu and it shows you the menu items.
But we will go the Google's way.
Required: Javascript, HTML
Using:
- <html>
- <script type="text/javascript">
- var toggle = 1;
- function showmenuitems()
- {
- if(toggle == 1)
- {
- document.getElementById('menuitems').style.visibility = 'visible';
- toggle = 0;
- }
- else
- {
- hidemenuitems();
- toggle = 1;
- }
- }
- function hidemenuitems()
- {
- document.getElementById('menuitems').style.visibility = 'hidden';
- }
- </script>
- <body>
- <p id="menu" onclick="showmenuitems()">Menu</p>
- <dl onblur="hidemenuitems()" id="menuitems" style="visibility:hidden; z-index:1">
- <dt>Item1</dt>
- <dt>Item2</dt>
- </dl>
- </body>
- </html>
Explanation:
If you will read the code you will find that all is done is using the visibility property of the dl. Here toggle variable helps us to determine the current state. A lot can be done with this code. For ex: if you click on the document except the paragraph menu items should hide, adding href to items etc etc.
Note: It is just basic way to implement the menu. Use your imagination to create something new.
Note: It is just basic way to implement the menu. Use your imagination to create something new.
No comments:
Post a Comment
Thank you for your comment!