how to create similar menu navigation with CSS

Posted on 2012-09-04
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
    LVL 25

    Accepted Solution

    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

    thanks for the link.

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

    Expert Comment

    by:Kyle Hamilton
    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

    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 if needed.
    LVL 25

    Expert Comment

    by:Kyle Hamilton
    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,,
       background-color:red; /* any 'active' class rules */

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    760 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

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now