Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

CSS Tabbed Menu - 1 of 2

GoDaddy.com Hosting Plans Sale!Godaddy Hosting

Find out how to make a great looking CSS tabbed horizontal menu with an easy to follow Dreamweaver Tutorial. Further information and an example of the horizontal navigation bar can be found below. Here is the link to part 2

CSS Tabbed Menu - Discussion

Find out how to create a smart CSS Tabbed menu in this Dreamweaver video tutorial. The tabbed css menu is an easy to update, easy to style horizontal navigation menu which uses the combination of an html list and css to produce a horizontal tabbed menu.

Check out this horizontal navigation menu mock-up in the example below:

A height needs to be specified to the enclosing ‘holder’ div because it collapses once the unordered list is floated

The horizontal navigation is created by floating an unordered list of links and adding a right margin to spread the links apart. The tabbed navigation CSS is then further applied to style a border which is pushed away from the links by a padding property. The border is taken away from the bottom of each link to create the tabbed menu look.

The CSS navigation menus tabs are inside of a div with an ID of ‘holder’ and a bottom border has been applied to it. A height needs to be specified to the enclosing ‘holder’ div because it collapses once the unordered list is floated.

The CSS tutorial in the Dreamweaver video also shows you how to style the tabbed CSS menu with hover links using the hover pseudo selector and you can choose to style the tabbed navigation CSS in which ever colors you like.

The styling of the active or ‘current’ link is what helps this horizontal tabbed menu create the illusion of individual tabs. An anchor link is attached to the current link with an ID of ‘onlink’ and styling is added to the tab to make it look like an individual horizontal navigation tab. The tabs can be square or you can choose to add some CSS3 rounded corners to the top of the tabs.

If you follow the instructions in the video tutorial above you will have a great looking CSS tabbed menu for one of your Dreamweaver website projects. CSS navigation menus that are easy to style and easy to make are difficult to come by and this horizontal navigation menu definitely fits the bill.

Related Tutorials:

CSS tabbed Menu part 2 - Dreamweaver video tutorial

CSS tabbed Navigation Menu - Dreamweaver article tutorial

CSS Drop Down Menu - Dreamweaver video tutorial

CSS Drop Down Menu - Dreamweaver Article Tutorial

blog comments powered by Disqus

Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial

Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials