Thursday, May 27, 2010

CSS Tutorial: Developing a css Navigational Menu


You can develop your own navigational menu both vertical and horizontal using css. All you have to do is to follow these simple steps.
Step 1: Constructing Markup
Unordered list is used to construct menus, because in it you define each link in a separate list item. In this way you can define same style for all list items, as well as you can give them proper spacing and position:










Step 2: Constructing CSS
First of all define background and size of the menu:







Here I have define an image for the background, the width of menu, font and font size for text, the margins of menu from its top, right, left and bottom and padding for items with in; padding is actually space of items with in an element or section from its edges. The div tag defines a section of a document, which has given class nav. The class nav is being used to give width, background, margins and other styles to div. The background-repeat property is set to repeat-x if the menu is horizontal menu, it is repeat-y for vertical menu.






















4 comments:

  1. Official bankruptcy papers
    www.getbankruptcyrecords.com/
    Order copy of Official bankruptcy records, bankruptcy records $10.99, bankruptcy creditors listing $27.99 and complete file for $36.99 at lowest cost on web.

    ReplyDelete
  2. great sharing on CSS for creative web development. without of CSS skill, no one can do web design development, CSS is best way to arrange content, style etc on website.

    ReplyDelete
  3. I feel that the article is not placed in appropriate category. I need an article on web development services australia, can anyone please share with me

    ReplyDelete