Viva CSS! – Learning Navigation Bars

Web designing is indeed an inextricable, complicated and toilsome job. It requires a lots of proffessional skills and patience. This is what I feel after starting to learn about XTHML. However, the joy of finishing a website or run a function successfully is also beyond description. 

What is XHTML, CSS and JavaScript?

 XHTML stands for “EXtensible HyperText Markup Language”, it’s a stricter and cleaner version of HTML. In order to establish a website, you’ll need to know about XHTML, CSS, and JavaScript. Each of them controls different functions of a website. 

CSS means “Cascading Style Sheets”, which controls the style and layout of multiple Web pages all at once. By editing CSS, all formatting can be removed from the HTML document and stored in a separate file. 

JavaScript is the most popular scripting language on the internet. It works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari. The main function of JavaScript is to make your website becomes more dynamic. 

About the navigation Sytem

 Navigation system is such an important element of each website. There are many kinds of navigation systems used for the websites, such as sitemap, searching bar and navigation bar. Today, I’m going to share some CSS about navigation bar because a good and clear navigation bar will bring huge success for a website, and it’s also the easiest part to start. 

A navigation bar is the main menu of a website, which shows all the information you could find within it, and in order to shorten the searching time, we usually categorize everything. It’s something similar to the image below: 


How to make a navigation bar by CSS?

 First, you need one standard HTML as a base. Use the <ul> and <li> elements to make the category that you designed for the navigation bar. Let’s take the above image as an example, so there are six main topics of it-”Home”, “News”, “Article”, “Forum”, “Contact” and “About”, and of course all of them should be clickable. The HTML tags will look like the following: 

 Step 1  


 Step 2
Now we finished a list, but don’t forget to remove all the bullets, margins and padding. Weonly need to add something to the <ul> attribute: 


Step 3
After editing the HTML, open a new file for CSS. And edit the <a> elements: 


  Step 4
Inline List Items:
One way to build a horizontaaal navigation bar is to specify the <li> elements as inline, in addition to the “standard” code above: 


  Step 5-1
Floating List Items:
For all the links to have an equal width, float the <li> elements and specify a width for the <a> elements: 


  Step 5-2
Or you could also have a vertical navigation bar:    

So, that’s how we create a basic navigation bar, and the best way to learn it is not to read this article but do some practice yourself. Hope it works well for you!    

Reference website:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: