Collapsible menus have become a staple in Web development, and you can generally avoid the hassle of creating your own from scratch by simply searching the Internet for something that is close to what you want; then make any adaptations necessary to reflect your own site’s needs. Collapsible menus generally come in two styles:
How they work
Generally, most collapsible menus rely on either the CSS display property or the CSS visibility property. The JavaScript used to manage these menus turns the visibility on or off depending on where a user’s mouse is, or turns the display on or off to collapse or expand a menu. The difference between the visibility property and the display property is that when you hide an element’s visibility, the element still takes up visible space in the browser document. When you turn the display property off by giving it a none value (display=“none”), the space where the affected element lives collapses.
The other component to a DHTML menu is usually a JavaScript array containing all the menu items. For example, the JavaScript might contain a function for defining the menu’s parameters:
When using a prewritten menu you acquire from the Internet, you’ll generally want to look for a JavaScript array containing all the menu item parameters. In this case, the array would contain arguments for the previously defined function:
To edit the menu for your own purposes, you simply change the links in the array (shown in bold in the preceding code). Most menus are built using an array that’s at least somewhat similar to the preceding one. Note the correlation between the first argument in the item function (parent) and the actual values used in the array. When an item’s parent argument is true, instead of a link, the category of links is named and no actual link is generated. When the parent argument is false, a link is generated. Each menu you find on the Web might have a somewhat different implementation, but the general construction will be the same.
Finding collapsible menus on the Internet
As mentioned, you generally don’t need to write your own menu from scratch, because so many developers have made them freely available. Instead, you can download someone else’s menu and change the CSS and some of the other specifics, such as where the links go.
One common style used with vertical menus is a Windows Explorer-like menu tree. The scripts on this site contain detailed instructions on how to use the menus on your own site. You can enter “DHTML menus” into Google to find additional menus.
|
|
HTML Related Tutorials |
|
---|---|
XML Tutorial | HTML 4 Tutorial |
HTML 5 Tutorial | Java Tutorial |
CSS Tutorial | XHTML Tutorial |
HTML Related Interview Questions |
|
---|---|
XML Interview Questions | HTML 4 Interview Questions |
HTML Interview Questions | HTML 5 Interview Questions |
HTML+XHTML Interview Questions | HTML+Javascript Interview Questions |
HTML DOM Interview Questions | Java Interview Questions |
CSS Interview Questions | Java Abstraction Interview Questions |
Dynamic HTML Interview Questions | XHTML Interview Questions |
Html Tutorial
Introducing The Web And Html
What Goes Into A Web Page?
Starting Your Web Page
Lines, Line Breaks, And Paragraphs
Lists
Images
Links
Text
Special Characters
Tables
Page Layout With Tables
Frames
Forms
Multimedia
Scripts
Introducing Cascading Style Sheets
Creating Style Rules
Fonts
Text Formatting
Padding, Margins, And Borders
Colors And Backgrounds
Tables Table Styles
Element Positioning
Defining Pages For Printing
Javascript
Dynamic Html
Dynamic Html With Css
Introduction To Server-side Scripting
Introduction To Database-driven Web Publishing
Creating A Weblog
Introduction To Xml
Xml Processing And Implementations
Testing And Validating Your Documents
Webdevelopment Software
Choosing A Service Provider
Uploading Your Site With Ftp
Publicizing Your Site And Building Your Audience
Maintaining Your Site
The Web Development Process
Developing And Structuring Content
Designing For Usability And Accessibility
Designing For An International Audience
Security
Privacy
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.