menu css

429 Posts

c-m Reply #1, 17 years, 8 months ago

just need quick bit of css help.

I’m trying to convert a site from a purely tables based layout to a purely CSS based layout, ready for importing into a contend managed system, probably Modx.

Here is the site’s menu;

Here is what i actually want it to look like - with images that change colour on hover and selection.

Finally here is my code:

CSS

.menu {
font-family: arial, sans-serif; 
width:750px; 
height:25px; 
position:relative; 
font-size:11px; 
z-index:100;}

.menu ul li a, .menu ul li a:visited {
display:block; 
text-decoration:none; 
color:#000;
width:123px; 
height:20px; 
text-align:center; 
color:#fff; 
background:#007e3e; 
line-height:20px; 
font-size:11px; 
overflow:hidden;}

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

.menu ul li {
float:left; 
position:relative;
}

.menu ul li ul {
display: none;
}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#007e3e;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#007e3e; color:#ffffff;}
.menu ul li:hover ul li ul {display: none;}

.menu ul li:hover ul li a {
display:block; 
background:#6eac7d; 
color:#ffffff;
border: 1px solid #ffffff;
text-align:left;
}
.menu ul li:hover ul li a:hover {background:#007e3e; color:#ffffff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

HTML

<!-- Begin menu --->
<div class="menu">

<ul>
<li><a class="hide" href="#">HOME</a>

<!--[if lte IE 6]>
<a href="#">HOME
<table><tr><td>
<![endif]-->

	

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#">PRODUCTS</a>

<!--[if lte IE 6]>
<a href="#">PRODUCTS
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="#" title="Interactive Feeding Guide">Interactive Feeding Guide</a></li>
	<li><a href="#" title="Products">Products</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#">STOCKISTS</a>

<!--[if lte IE 6]>
<a href="#">STOCKISTS
<table><tr><td>
<![endif]-->



</li>

<li><a class="hide" href="#">ADVICE</a>

<!--[if lte IE 6]>
<a href="#">ADVICE
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="#" title="FAQs">FAQs</a></li>
	<li><a href="#" title="Factsheets">Fact Sheets</a></li>
	<li><a href="#" title="Adult Feeding Guide">Adult Feeding Guide</a></li>
	<li><a href="#" title="Puppy Feeding Guide">Puppy Feeding Guide</a></li>
		</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../mozilla/index.html">NEWS</a>

<!--[if lte IE 6]>
<a href="#">NEWS
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="#" title="Curent News">Current News</a></li>
	<li><a href="#" title="Archive">Archive</a></li>
	</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#">CONTACT</a>

<!--[if lte IE 6]>
<a href="#">CONTACT
<table><tr><td>
<![endif]-->

	<ul>
	<li><a href="#" title="Links">Links</a></li>
		</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>


</ul>

</div>

<!--- End menu -->

Can anyone tell me what changes I need to make to the code to achieve the same look as the first menu image?

Thanks

4,205 Posts

dev_cw Reply #2, 17 years, 8 months ago

You would want to use what people call sprites for your menu. I am no expert at it, there are quite a few tutorials available. I ran into this online tool to help create the code for an image sprite menu, I would give it a test to see if it can help get you started.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

1,161 Posts

Photowebmax Reply #3, 17 years, 8 months ago

I have done this a couple of times.

If you want just the text apperance in the nav fields to change then pure CSS will be better than using images.

But you want images in the nav items so images are a must. In the old days you would use javascript to swap individual images. Quite often this trigger a delay flicker which was annoying though.

As Shane says build a nav_sprite file with Photoshop or some other image editor. You build two rows for the resting and hover states of each nav link. It helps to keep each nav link with a nice clean dimension width and height. Its important to have the link graphics to be in the exact same position in the resting row and the hover row. The page will then load just one file ( the nav_sprite) and the CSS will only display the relevant section using background positioning. Its a very cool technique. You can also add some jQuery eye candy to this effect as well.

Max

MODX Staff
2,502 Posts

Jay Gilmore Reply #4, 17 years, 8 months ago

There are other reasons to use sprites including fewer http requests, faster load times and better degradation with images off.

I’ve gone so far as to build out entire icon collections, nav and bg fades and shadows in a single sprite image so that you have one single cached image loading vs literally dozens.

It also avoids the whole image preloader requirement of most JS methods as your CSS is loaded before the page is done rendering.

Hope this helps.

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub

429 Posts

c-m Reply #5, 17 years, 8 months ago

Right, so i need to build 3 rows each row containing all of the nav images, but in a different state?

I have done something similar to this but with individual images which then move up or down 50px depending on a:hover etc..

Is this the same thing?

I’m really useless with menus, stuck with this design and need it working more quickly than i’d like.

Of course I will eventually need to get all this working with Wayfinder.

MODX Staff
2,502 Posts

Jay Gilmore Reply #6, 17 years, 8 months ago

You’ve got it. It is just using the background-image-position to handle the display of the correct image in the background.

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub

429 Posts

c-m Reply #7, 17 years, 8 months ago

And to add dropdowns, which I hate but unfortunately need, could i use the code from here:

http://www.htmldog.com/articles/suckerfish/dropdowns/

I think it will take me some time to get my head around trying to combine the two and styling the dropdown boxes.

1,161 Posts

Photowebmax Reply #8, 17 years, 8 months ago

Having the active state makes it three rows which, while cool, does make more work to set up. Users will also be downloading a larger, heavier sprite image.

Try to plan the graphic out before hand. Make the rows and column cells a nice full number like 100 pixels wide by 50 pixels tall. Doing so makes the CSS arithmetic so much easier to keep track of. Creating a nice graphic but then finding that each cell is of varying widths or odd dimensions like 89 pixels wide by 47 pixels tall makes creating the CSS backgrounds a real pain. Using the guides and layers system in Photoshop or Illustrator is a real time saver here as well.

Max

429 Posts

c-m Reply #9, 17 years, 8 months ago

I created a sprite and set up the code for hover, I haven’t yet done active.

Here is what it ended up looking like:

For some reason it is offset right.

Here is my code:

XHTML;

<ul id="navigation">
		<li id="navigation-1"><a href="#" title="Home"><span>Home</span></a></li>
		<li id="navigation-2"><a href="#" title="Products"><span>Products</span></a></li>
		<li id="navigation-3"><a href="#" title="Stockists"><span>Stockists</span></a></li>
		<li id="navigation-4"><a href="#" title="Advice"><span>Advice</span></a></li>
		<li id="navigation-5"><a href="#" title="News"><span>News</span></a></li>
		<li id="navigation-6"><a href="#" title="Contact"><span>Contact</span></a></li>
	</ul>

CSS

/* HORIZONTAL NAVIGATION BAR
/////////////////////////////////////*/

ul#navigation {	
	width:750px;
	list-style:none;
	height:49px
}

ul#navigation li {
	display:inline
}

ul#navigation li a {
	height:49px;
	float:left;
	text-indent:-9999px;
	text-decoration:none
}

ul#navigation  li a span {
	float:left;
	display:block
}

ul#navigation li#navigation-1 a {
	width:129px;
	background:url(navigation.jpg) no-repeat 0px 0
}

ul#navigation li#navigation-1 a:active {
background-position: 0px -99px;
}


ul#navigation li#navigation-1 a:hover {
	background-position:0px -49px
}

ul#navigation li#navigation-2 a {
	width:123px;
	background:url(navigation.jpg) no-repeat -129px 0
}

ul#navigation li#navigation-2 a:active,
ul#navigation li#navigation-2 a:hover {
	background-position:-129px -49px
}

ul#navigation li#navigation-3 a {
	width:124px;
	background:url(navigation.jpg) no-repeat -252px 0
}

ul#navigation li#navigation-3 a:active,
ul#navigation li#navigation-3 a:hover {
	background-position:-252px -49px
}

ul#navigation li#navigation-4 a {
	width:123px;
	background:url(navigation.jpg) no-repeat -376px 0
}

ul#navigation li#navigation-4 a:active,
ul#navigation li#navigation-4 a:hover {
	background-position:-376px -49px
}

ul#navigation li#navigation-5 a {
	width:123px;
	background:url(navigation.jpg) no-repeat -499px 0
}

ul#navigation li#navigation-5 a:active,
ul#navigation li#navigation-5 a:hover {
	background-position:-499px -49px
}

ul#navigation li#navigation-6 a {
	width:128px;
	background:url(navigation.jpg) no-repeat -622px 0
}

ul#navigation li#navigation-6 a:active,
ul#navigation li#navigation-6 a:hover {
	background-position:-622px -49px
}


/****** ******/

Any ideas as to why it is not positioned correctly?

MODX Staff
2,502 Posts

Jay Gilmore Reply #10, 17 years, 8 months ago

Browsers have default margins and padding for almost every element. You either need to reset them all to zero or as you use them give them the margins and padding to override the browser default so I’d add the following at the beginning of your statement:

#navigation, #navigation li {
    margin:0;
    padding:0;
}

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub