• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 472
  • Last Modified:

how to create similar menu navigation with CSS

on my webpage I need to create a similar menu navigation as on this template


can any body help me with CSS
  • 3
  • 2
1 Solution
Kyle HamiltonData ScientistCommented:
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.
mmalik15Author Commented:
thanks for the link.

How can I handle the selected item and set its background?
Kyle HamiltonData ScientistCommented:
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...)
mmalik15Author Commented:
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.
Kyle HamiltonData ScientistCommented:
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 */
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now