Horizontal HTML & CSS navigation

I got a lot of emails last days with questions how to code my PSD website navigation menus, so I decided to make a simple HTML and CSS codes.
Custom made cool looking cross browser compatible website menus. Download HTML & CSS website ready files, or PSD source for customization.

horizontal html css menu




Resolution: 950×50 px
Size: 135 KB
Format: PSD
Color theme: purple, pink, gray, white, blue, yellow, green
Keywords: simple css menu, horizontal css menu, html menu styles, professional menus for your site
Author: PSD Graphics

How to add it to your page:
1. Copy “navigation” DIV and paste in the body of your HTML page.
2. Copy CSS lines from style.css and paste in the CSS file of your page.
3. Move images to your /images folder.

Download HTML & CSS files:

css navigation

Green stars CSS navigation
Purple CSS navigation
Orange halftone CSS navigation
Blue waves CSS navigation
Rainbow colors CSS navigation
Gray grunge CSS navigation
Yellow abstract CSS navigation
Blue abstract CSS navigation

Join the Conversation

1 Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Please i need help i put the css and html code, all is ok but the menu is without picture,
    in spite of making the picture in the same file i work with dreamweaver.

  2. Still don’t know how to do it :-/
    what programs do i need to do it?
    is adobe photoshop elements okay?

  3. Learn a little CSS. 🙂 text-align: center; should do.

    FIND

    #navigation {
    width: 950px;
    height: 50px;
    margin: 0;
    padding: 0;
    background: url(images/navigation-bg.jpg) no-repeat left top;
    }

    REPLACE WITH


    #navigation {
    width: 950px;
    height: 50px;
    margin: 0;
    padding: 0;
    text-align:center;
    background: url(images/navigation-bg.jpg) no-repeat left top;
    }