How to make a CSS horizontal navigation menu?


Tags: html,css,css-sprites,menubar

Problem :

I need to make a css navigation according to the following style:

DESIRED LOOK

enter image description here

Below are the designs that I have done:-

1)Exhibit A - made using sprites

enter image description here

Note: Ignore the arrangement of the menu items

Pros: works well and has the desired look

Cons: if there is a need to add another menu item, another image must be manually made for that particular menu item. ie. not extensible

2)Exhibit B

enter image description here

Pros: very extensible. If another menu item must be added, new extra images need not be made. Only the menu name need to be typed in the html code.

Cons: the hover effect is not the same as the desired look.

My Requirement

Is to use Exhibit B, along with the hover effect from Exhibit A, but without having to add extra images when a menu item is created(this is what happens in Exhibit A, although it has the desired hover effect).

My approach:

  1. Start working with Exhibit B
  2. For the hover effect in the case of a single menu item use 3 images

a)left most edge left most edge

b)repeating slice of the middle area repeating slice of the middle area

c)right most edge right most edge

Is this correct ?

Is this possible ?

Is there a better way? A link to a tute would be fine.

Thanks


1] css code for Exhibit A

@charset "UTF-8";
* {
margin:0;
padding:0;
list-style: none;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

img {
    border: none;
}

.clear {
clear:both;
}

.nav-container {
width: 960px;
}
#navMenu{
display: inline;
margin: 0;
padding: 0px;
position: relative;
z-index: 5;
}
#navMenu li{
float: left;
display: inline;
}

#navMenu li.navRepeat{
float: left;
display: inline;
background-image:url("../images/navigation_repeat.gif");
width:425px;
height:40px;
}

#navMenu li.navRepeatEnd{
float: right;
display: inline;
background-image:url("../images/navigation_repeat_end.gif");
width:1px;
height:40px;
}

a.navReservations{
display:block;
float:left;
width:89px;
height:40px;
background-repeat:no-repeat;
background: url("../images/reservations.gif")
}

a.navReservations:hover{
background: url("../images/reservations.gif") 0 40px;
}

a.navRentals{
display:block;
float:left;
width:62px;
height:40px;
background-repeat:no-repeat;
background: url("../images/rentals.gif")
}

a .navReservations {
float: left;
display: inline;
height: 100px;
width: 400px;
}

a.navRentals:hover{
background: url("../images/rentals.gif") 0 40px;
}

a.navTariffs{
display:block;
float:left;
width:59px;
height:40px;
background-repeat:no-repeat;
background: url("../images/tariffs.gif")
}

a.navTariffs:hover{
background: url("../images/tariffs.gif") 0 40px;
}

a.navFleet{
display:block;
float:left;
width:64px;
height:40px;
background-repeat:no-repeat;
background: url("../images/fleet.gif")
}

a.navFleet:hover{
background: url("../images/fleet.gif") 0 40px;
}

a.navTools{
display:block;
float:left;
width:56px;
height:40px;
background-repeat:no-repeat;
background: url("../images/tools.gif")
}

a.navTools:hover{
background: url("../images/tools.gif") 0 40px;
}

a.navReports{
display:block;
float:left;
width:71px;
height:40px;
background-repeat:no-repeat;
background: url("../images/reports.gif")
}

a.navReports:hover{
background: url("../images/reports.gif") 0 40px;
}

a.navSystem-Management{
display:block;
float:left;
width:133px;
height:40px;
background-repeat:no-repeat;
background: url("../images/system_management.gif")
}

a.navSystem-Management:hover{
    background: url("../images/system_management.gif") 0 40px;
}

2] css code for Exhibit B

#navigation {
width: 959px;
height: 36px;
margin: 0;
padding: 0;
background-image: url(images/navigation-bg.gif);
background-repeat: no-repeat;
background-position: left top;
border: 1px solid #CCC;
} 
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
} 
#navigation ul li {
display: inline;
margin: 0px;
} 
#navigation ul li a {
height:27px;
display: block;
float: left;
color: #000;
text-decoration: none;
font-family: Arial;
font-size: 12px;
font-weight: bold;
background-image: url(images/navigation-separator.gif);
background-repeat: no-repeat;
background-position: right center;
padding-top: 6px;
padding-right: 15px;
padding-left: 15px;
vertical-align: 10%;
padding-bottom: 4px;
} 

#navigation ul li a:hover {
color:#FFF;
background-image: url(images/navigation-hover.gif);
background-repeat: repeat-x;
background-position: left top;
}

#navigation ul li#active a {
color:#363636;
background: url(images/navigation-hover.png) repeat-x left top;
}


Solution :

Well you technically only need two sprites, a wide left + body of the tab and a right side. By wide, I mean, 400px or some arbitrarily wide size that you don't anticipate hitting. You're trading a kb for easy of use. You can accomplish this by having markup like:

<ul class="list">
    <li><a href="#">Text</a></li>
</ul>

with css like:

ul.list
{
    list-style-type: none;
    margin: 0;
}
ul.list li 
{
    float: left;
    background: url(leftpluswide.png) top left no-repeat;
}
ul.list li a
{
    background: url(right.png) top right no-repeat;
}

The only caveat is that since the right.png will be overlapping the background on the li, you'll need to make sure that it doesn't have any transparency.

Also for completeness sake, you might need to apply a height to the li and the a (which will potentially require a display:inline-block or a line-height to take it) to make everything line up well.


    CSS Howto..

    How to prioritize custom css over the default Angular-material css

    How to position CSS
    s without breaking?

    How to keep width of the main container to maximum width in a 3 column fluid layout?

    How to get two column float left div layout to word wrap?

    How to have “onmouseover” highlight in css?

    How to get a jQuery modal overlay to not push the scrollbar around?

    How to keep a div's height 100%?

    how to make a image in div to be dragged just downwards using html5 css jquery animation?

    How to change a scrolling element behavior on resize? (HTML, CSS, JavaScript) [duplicate]

    How to draw a half circle (border, outline only) [closed]

    How to make a div fade on hover?

    Coding the slideshow

    Mobile Toggle Menu - How to Push Content outside the view of the viewport?

    How to include CSS code directly in a php file

    How do I center text in a span?

    how to encode .css file?

    How to fix responsive drop down menu using css?

    Click radio button then show submit button

    How to break text in a line in a div by css?

    How to take an element over to given padding with CSS

    How to make a layout scale with CSS?

    How to calculate padding-top in % of the given div relative to its parent div

    How to make layout like notes in Google Keep using CSS?

    How make divs next to each other?

    How to overlay image with color in CSS?

    How can I use :before property to create a square before a span

    How to change the color render setting for anchor in a css file?

    In a responsive layout how can I get divs to shrink uniformly?

    How to dim an image keeping transparency untouched with CSS or JS?

    how to set html inline css from django