how to create similar menu navigation with CSS

Posted on 2012-09-04
Medium Priority
Last Modified: 2012-09-05
on my webpage I need to create a similar menu navigation as on this template


can any body help me with CSS
Question by:mmalik15
  • 3
  • 2
LVL 25

Accepted Solution

Kyle Hamilton earned 2000 total points
ID: 38363045
here you go:


This is based on something I did recently, so it maynot be exactly like you want it yet, but it's a start.
(view source for the css and html code)

The javascript at the top is commented out. It creates arrows on items that have submenus.

The transition effects can be deleted if you don't like them.

Author Comment

ID: 38363110
thanks for the link.

How can I handle the selected item and set its background?
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38363140
Do you mean the current/active tab?

There are many ways of doing that. It depends how your site is built.

The easiest, but most static way is to give it an 'active' class.

Are you including the menu on all pages or is each page static? What are building your site on?(PHP, asp, etc...)

Author Comment

ID: 38363146
yeah I meant the active tab. Sure I will give it active class but how will I handle when user clicks on a different tab. I can use java-script with html preferably but can also use asp.net if needed.
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38363395
one technique is to use javascript in combination with query strings.

So that when a user clicks a tab, they get brought to, for example:


then you can parse the url, and assign the active class to the "about" tab.


Another technique is to use a class on the body element in the page:
<body class="about">
then you can use javascript, or plain CSS.

- the javascript way would be to detect the body class and assign the active class to the corresponding tab.

- the CSS way would be to have classes assigned in the nav like so:

<li class="about">About</li>
<li class="contact">Contact</li>

then in the css the red background gets applied only when the body class matches the corresponding section:

body.about li.about,
body.contact li.contact,
   background-color:red; /* any 'active' class rules */

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question