Xceedas
xceedas
Tuesday 6 January 2015
Create CSS Dropdown Menu Using HTML 5
Introduction
CSS menus are created using formatting and positioning of standard HTML. The underling structure is simply a nested list. The visible portion of the menu is the outermost list, and the drop-down portions are sublists. Each item in the list is a link to content. The associated formatting of the sheet changes the display of the submenus depending on whether or not the mouse is over the outer list item. Depending on the method used, the submenu may be set to display off the screen, or not be displayed at all unless the mouse is over the "Home title". When the mouse hovers over the title, the inner list is displayed overlapping the outer, so that the Home "drops down".
In fact, however, keyboard navigation is virtually impossible with this kind of menu because, while the tab key moves the "focus" to the submenu items, the user has no way of knowing what item is currently selected, or even what items are available. The only items that can be reliably accessed are those of the outer list.
Step 1: Open Macromedia Dreamweaver.
Step 2: Then create a new document by clicking the File Menu then New Document.
Click the Create button.
newdocument.jpg
Step 3: HTML 5 Doctype:
Title
Create Text here
Step 4: Define the body part and set the content of the CSS Dropdown Menu:
Code
Step 5: Apply the stylesheet of the Dropdown Menu:
Code
Step 6: Write the complete code for the developed simple CSS Dropdown Menu that uses the HTML 5 tools. The complete application is:
Css Dropdown menu
Output
menuOutput.jpg
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment