Help with Nav Menu

Otterblue · 04-11-2012, 09:06 PM

Hello, I'm fairly new to web coding so please bear with me and my blunders.

I'm trying to create a new nab menu for my web site. What I'm trying to make is very similar to this except horizontal.

I know it's not coded correctly but here is what I've made so far:
HTML:

Code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" rev="stylesheet" href="nav.css" type="text/css" media="screen" charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menus with Transitions</title>
</head>

<body>
    <a id="first-menu" title="Home" href="#">Home</a>
    <a id="second-menu" title="Program Listing" href="#">Programs</a>
    <a id="third-menu" title="News" href="#">News</a>
    <a id="fourth-menu" title="Contact Us" href="#">Contact</a>
    <a id="fifth-menu" title="Frequently Asked Questions" href="#">FAQ</a>
    <a id="sixth-menu" title="Sitemap" href="#">Sitemap</a>
</body>

CSS:

Code:

#first-menu, #second-menu, #third-menu, #fourth-menu, #fifth-menu, #sixth-menu {
    font-family:Trebuchet MS;
    font-size: 23px;
    font-weight: bold;
    text-decoration: none;
    width: 5px;
    padding: 5px;
    padding-left: 1px;
    text-indent: 20px;
    margin-left: 100px;
    margin-top: 10px;
    position: fixed;
    -moz-transition-property: width, color;
    -moz-transition-duration: .3s;
    -webkit-transition-property: width, color;
    -webkit-transition-duration: .3s;
    -o-transition-property: width, color;
    -o-transition-duration: .3s;
}

#first-menu {
    color: #636393;
    left: 0px;
    background-color: #636393;
}


#second-menu {
    color: #0078FF;
    left: 150px;
    background-color: #0078FF;
}


#third-menu {
    color: #D4953C;
    left: 300px;
    background-color: #D4953C;
}


#fourth-menu {
    color: #609491;
    left: 450px;
    background-color: #609491;
}


#fifth-menu {
    color: #87A248;
    left: 600px;
    background-color: #87A248;
}


#sixth-menu { 
    color: #808080;
    left: 750px;
    background-color: #808080;
}


#first-menu:hover, #second-menu:hover, #third-menu:hover, #fourth-menu:hover, #fifth-menu:hover, #sixth-menu:hover {
    width: 140px;
    color: #FFFFFF;
}

#first-menu:active, #second-menu:active, #third-menu:active, #fourth-menu:active, #fifth-menu:active, #sixth-menu:active {
    box-shadow: inset 0px 0px 7px #666666;
}

This is what it looks like.

Okay, so you get the idea.

Now my question is what would be the proper way to code this? I know most menus are made with lists and such. Also would it be possible to make it so that it resizes according to screen size?

Any help would be appreciated. Thanks.

SB65 · 04-12-2012, 07:42 PM

I'd do something like:

Code:

<ul id="menu">
    <li><a id="first-menu" title="Home" href="#">Home</a></li>
    <li><a id="second-menu" title="Program Listing" href="#">Programs</a></li>
    <li><a id="third-menu" title="News" href="#">News</a></li>
    <li><a id="fourth-menu" title="Contact Us" href="#">Contact</a></li>
    <li><a id="fifth-menu" title="Frequently Asked Questions" href="#">FAQ</a></li>
    <li><a id="sixth-menu" title="Sitemap" href="#">Sitemap</a></li>
</ul>

with

Code:

#menu{
	padding:0;
	margin:0;
	list-style-type:none
}
#menu li{
	float:left
}
#menu li a {
    font-family:Trebuchet MS;
    font-size: 23px;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 20px;
    -moz-transition-property: width, color;
    -moz-transition-duration: .3s;
    -webkit-transition-property: width, color;
    -webkit-transition-duration: .3s;
    -o-transition-property: width, color;
    -o-transition-duration: .3s;
}
#first-menu {
    color: #636393;
}
#second-menu {
    color: #0078FF;
}
#third-menu {
    color: #D4953C;
}
#fourth-menu {
    color: #609491;
}
#fifth-menu {
    color: #87A248;
}
#sixth-menu { 
    color: #808080;
}

Otterblue · 04-12-2012, 08:38 PM

Thanks for your reply.

I get the list part but I can't get the boxes to work. See the above link again (I fixed the hotlink protection).

SB65 · 04-12-2012, 08:43 PM

Don't know what you mean by boxes...

Otterblue · 04-12-2012, 08:47 PM

Did you see the link? The bars become boxes on mouse over.

SB65 · 04-12-2012, 08:51 PM

Yes, and they work OK in FF11...

Otterblue · 04-12-2012, 09:00 PM

Sorry that's not what I meant. The nav menu from the link was made with the "bad" code, the code I first posted up, not yours.

I can make boxes, but how do I get them to resize on mouseover without messing up the text and space between the menu items?

SB65 · 04-12-2012, 09:27 PM

Code:

#menu{
	padding:0;
	margin:0;
	list-style-type:none
}
#menu li{
	float:left
}
#menu li a {
    font-family:Trebuchet MS;
    font-size: 23px;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 10px;
	width:0;
    -moz-transition-property: width, color;
    -moz-transition-duration: .3s;
    -webkit-transition-property: width, color;
    -webkit-transition-duration: .3s;
    -o-transition-property: width, color;
    -o-transition-duration: .3s;
}
#menu li a:hover{
	color:white;
	width:140px;
}
#first-menu {
    color: #636393;
	border-left: 10px solid #636393
}
#first-menu:hover{
	background-color: #636393;
	
}
#second-menu {
    color: #0078FF;
	border-left: 10px solid #0078FF;
}
#second-menu:hover{
	background-color: #0078FF
}
#third-menu {
    color: #D4953C;
	border-left:10px solid #D4953C;
}
#third-menu:hover{
	background-color: #D4953C
}
#fourth-menu {
    color: #609491;
	border-left:10px solid #609491;
}
#fourth-menu:hover{
	background-color: #609491
}
#fifth-menu {
    color: #87A248;
	border-left: 10px solid #87A248;
}
#fifth-menu:hover{
	background-color: #87A248
}
#sixth-menu { 
    color: #808080;
	border-left:10px solid #808080
}
#sixth-menu:hover{
	background-color: #808080
}

Is that what you want?

Otterblue · 04-12-2012, 09:31 PM

Yes, except I want it to "slide over", if you know what I mean.

SB65 · 04-12-2012, 10:00 PM

OK, try:

Code:

#menu{
	padding:0;
	margin:0;
	list-style-type:none
}
#menu li{
	float:left;
	width:10px;
	position:relative;
	margin-right:130px;
	padding:5px 0;
    -moz-transition-property: all;
    -moz-transition-duration: .3s;
    -webkit-transition-property: all;
    -webkit-transition-duration: .3s;
    -o-transition-property: all;
    -o-transition-duration: .3s;
}
#menu li a {
    font-family:Trebuchet MS;
    font-size: 23px;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 20px;
    -moz-transition-property: all;
    -moz-transition-duration: .3s;
    -webkit-transition-property: width, color;
    -webkit-transition-duration: .3s;
    -o-transition-property: width, color;
    -o-transition-duration: .3s;
}
#menu li:hover{
	width:140px;
	margin-right:0
}
#menu li:hover a{
	color:white;
}

#first-menu {
	background-color: #636393;
}
#first-menu a{
    color: #636393;
}
#second-menu {
	background-color: #0078FF
}
#second-menu a{
    color: #0078FF;
}
#third-menu {
	background-color: #D4953C
}
#third-menu a{
    color: #D4953C;
}
#fourth-menu {
	background-color: #609491
}
#fourth-menu a{
    color: #609491;
}
#fifth-menu {
	background-color: #87A248
}
#fifth-menu a{
    color: #87A248;
}
#sixth-menu { 
	background-color: #808080
}
#sixth-menu a{ 
    color: #808080;
}

with

Code:

<ul id="menu">
    <li id="first-menu"><a title="Home" href="#">Home</a></li>
    <li id="second-menu"><a title="Program Listing" href="#">Programs</a></li>
    <li id="third-menu"><a title="News" href="#">News</a></li>
    <li id="fourth-menu"><a title="Contact Us" href="#">Contact</a></li>
    <li id="fifth-menu"><a title="Frequently Asked Questions" href="#">FAQ</a></li>
    <li id="sixth-menu"><a title="Sitemap" href="#">Sitemap</a></li>
</ul>

Otterblue · 04-12-2012, 10:37 PM

No, sorry, it needs to be identical to the first link if possible and as much as possible.

A bar on the left that transits into a rectangle that covers the text on mouseover.
http://screencast.com/t/vBTkC4hcQ9

SB65 · 04-13-2012, 09:25 AM

Isn't that what the code does:see here?
Hm, that works fine in FF but not in Chrome.

Otterblue · 04-13-2012, 02:12 PM

Yes! Perfect!

The only problem is that it only works on Firefox. It flickers and does't display properly with Safari 5 and Chrome 19 (WebKit). I haven't tried IE yet.

Safari 5.1.5:
http://screencast.com/t/SJStrqVT

Chrome 19.0.1084.15 beta:
http://screencast.com/t/CtbX5W3TCWm9

Do you have any idea of what might be causing that?
Thanks for all your answers so far

SB65 · 04-13-2012, 02:34 PM

If you set the position of the li tags as absolute, in fact as you originally had them, then I suspect this would work in Chrome and Opera as well.
EDIT: Yes, it does, see updated code on link as before.

Otterblue · 04-13-2012, 02:52 PM

Great. I'll try updating my website with it and see how it goes.