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 Navigation Menu Tutorial


Share this Dreamweaver Article:

Discover how easy it is to create a smart and simple, yet stylish tabbed navigation menu bar in this Dreamweaver and CSS tutorial. The html tabbed navigation menu creates the illusion that each tab is in a deck of tabbed menus so that when each tab is clicked upon it appears to come to the front of the navigation menu. Check out the tabbed navigation menu example below:



If you prefer you can watch a Dreamweaver video tutorial explaining how to make a CSS Tabbed Navigation Menu.



The great thing about the tabbed navigation menu above is that it’s made using just CSS. These types of CSS menus are very versatile and easy to install and will fit most web design projects. Styling is added to an unordered list to create the CSS Horizontal navigation and further styling creates the tabbed effect. You can choose to have your CSS navigation bar as a rounded corner tabbed menu or with right angles with just one small snippet of code. Let’s get started with the CSS menu Tutorial:

1. Add the HTML for the Tabbed Menu Bar

An encompassing div with an ID of ‘navbar’ is wrapped around all of the navigation menu html code and will have no CSS styling so that you can style it yourself when you put it into your Dreamweaver web design project.

A div called 'holder' is created inside of the navbar div and holds an unordered list to which contains all of the tabbed menus links.

You will notice that the first link contains an ID of ‘onlink’ and that is to be styled later with CSS and will act as the current link for each page you create for your tabbed menu. The styling for each link with an ID of ‘onlink’ will signify to your web visitors which page they are on and will be styled in white to distinguish them as the main tab for that web page.

 <div id="navbar">
  
  <div id="holder"> 

  <ul> 

   <li><a href="#" id="onlink">Home</a></li>
   <li><a href="#">Products</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Gallery</a></li>
   <li><a href="#">Contact</a></li>

  </ul> 

  </div> <!-- end holder div --> 

 </div> <!-- end navbar div -->

2. Add the Styling for the CSS Navigation Bar

The ‘navbar div’ is given only a width property to enclose the tabbed navigation menu and you will use this div to position the css menu in your website.

The ‘holder’ div is given a height of 64 pixels which and a bottom border and will help to provide the illusion of a separate tabbed navigation system. The holder div is also give a width and some padding; the padding can be removed if you so wish.

The ul CSS or unordered list tag has the list style set to none and will remove the default bullets inherent. Margins and padding are set to the ul CSS to make the soon to be horizontal menu flush with the side of the holder div.

 #navbar {
  width:660px;
 } 

 #navbar #holder {
  height:64px;
  border-bottom:1px solid #000;
  width:630px;  
  padding-left:25px; 
 } 

 #navbar #holder ul {
  list-style:none;
  margin:0;
  padding:0; 
 } 

 #navbar #holder ul li a { 
  text-decoration:none;
  float:left;
  margin-right:5px;
  line-height:23px;
  font-family:"Arial Black", Gadget, sans-serif;
  color:#000;
  border:1px solid #000;
  border-bottom:none;
  padding:20px;
  width:75px;
  text-align:center;
  display:block;
  background:#69F;
  -moz-border-radius-topleft:15px;
  -moz-border-radius-topright:15px;
  -webkit-border-top-left-radius:15px;
  -webkit-border-top-right-radius:15px; 
 } 

 #navbar #holder ul li a:hover {
  background:#F90;
  color:#FFF;
  text-shadow:1px 1px 1px #000;
 } 

The majority of the html tabbed menu styling goes into the links which are then styled within the li CSS. The text decoration is set to none and the list items are floated to the left which will turn the once vertical list into a CSS horizontal menu.

The links are then set to display ‘block’ which allows the rollover link to extend out across the span of the link tab and not just on the text itself.

The font type is changed to a chunky Arial black style and the color set to black. A border is set in a concatenated selector although it is overridden in the cascade by setting a bottom border of none while leaving the rest of the border which makes up the html tabbed effect in place.

Padding of 20 pixels is set which inflates the tabs all around the links. The links are then set to display ‘block’ which allows the rollover link to extend out across the span of the link tab and not just on the text itself.

The text of the CSS navigation bar is set to align in the center and a standard width of each link is set to 75 pixels although is it noted that the padding and border need to be taken into account so the total width of one html tabbed link is equal to 122 pixels including the 5 pixel right margin.

The background color of the menu is set and rounded corners specified with the –Moz and –Webkit prefixes.



By Previewing the CSS menu in your browser, you will see that the majority of this CSS menu tutorial is now complete. The navigation menu is in working order and the tabbed navigation has all of the hover effects attached.

If you need to you can add more html tabbed buttons by adding extra list item tags with their internal links.



3. Style the 'Current' Navigation Menu Tab

To give your web visitors an extra visual clue to know which tab is selected you will need to add these link selectors into your CSS document which style the li CSS for the hover effect and give a white background like in the example tabbed menu at the start of this CSS menu tutorial.

The ID for the style is called ‘onlink’ and it is styled to have a white background and a text color of white. The ‘onlink’ style has also been given a bottom border of white which is the key to create the illusion of individual html tabbed buttons for the css navigation bar.


 #holder ul li a#onlink {
  background:#FFF;
  color:#000;
  border-bottom:1px solid #FFF; 
 } 

 #holder ul li a#onlink:hover {
  background:#FFF;
  color:#69F;
  text-shadow:1px 1px 1px #000; 
 }

The hover effect for the onlink style has been created using a hover pseudo selector and is styled to have the same white background. A simple inverted text rollover is created and helps to maintain the illusion of the tabbed menus effect.




4. Applying the 'onlink' style to the Tabbed menu

Applying the onlink to a Navigation Tab

Once you have created the ‘onlink’ style, apply it to one of the html tabs of your CSS horizontal menu could not be any easier.

Place your cursor inside the text link and look into the properties inspector for the ID drop down menu and select the id that you have created.

You will know that the ID has been attached as an anchor icon will appear on the link. Other visual clues are that the styling of the link has changed on the CSS menus bar. As you will see in the example below the link ID has been attached to the home.html page.

example of a Tabbed Navigation Menu

To remove the ‘onlink’ id from the current web page menu tab, place your cursor inside of the text link and then go to the properties inspector and select ‘none.’ Or you can simply delete the id from inside of code view. Simple.



Summary

At the end of this CSS menu tutorial you should now have a fully functioning tabbed navigation menu complete with individually styled html tabbed active links on each web page. The tabbed menu will suit most websites as the main CSS navigation bar for its simplistic and readable style. It’s also very easy to update the tabs for the tabbed menu which require only a list item to be added to increase the number of html tabs.



Related Tutorials:

CSS Tabbed Navigation Menu - Dreamweaver video tutorial

CSS Horizontal Drop down Menu - Dreamweaver article tutorial

CSS Drop Down Menu Tutorial - Dreamweaver video 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