JMU | GRPH312 | Sp.13: menu bar

Centered Menu

Centered Menu Basic Example

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support#

http://matthewjamestaylor.com/centered-menus/#

ASG: Dreamweaver Horizontal Spry Menu Bar

Text Book:
http://proquestcombo.safaribooksonline.com/book/web-design-and-development/9780321718143/building-pages-with-dynamic-elements/ch14lev1sec1

http://proquestcombo.safaribooksonline.com/book/web-design-and-development/9780133006018/firstchapter#X2ludGVybmFsX0ZsYXNoUmVhZGVyP3htbGlkPTk3ODAxMzMwMDYwMTglMkZhcHAwNXNlYzFsZXYx

Change The Cell Width of Spry Menu Bar

Menu Hover Transition to change the color

CSS3 Tutorial for Hover Transition to change the color
http://www.imajine.in/tutorials/css/texthover.aspx

CSS:

a:link {
color:#666666;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
-webkit-transition-property:color, text;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-in;

-moz-transition-property:color, text;
-moz-transition-duration:0.5s;
-moz-transition-timing-function: linear, ease-in;

-o-transition-property:color, text;
-o-transition-duration:0.5s;
-o-transition-timing-function: linear, ease-in;
}
a:visited {
color: #6E6C64;
}
a:hover, a:active, a:focus {
color:#009999;
}

Change menu-image

ul.nav {
list-style: none;
border-top: 0px solid #666;
margin-bottom: 15px;
color:#CC66CC;
}

ul.nav li {
border-bottom: 0px solid #666;
background-image: url(images/menu-bg.jpg);
color:#CC66CC;
}

ul.nav a, ul.nav a:visited
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
color:#CC66CC;
}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus
background-image: url(images/menu-bg-1.jpg);
color: #FFF;
}