Thursday, April 7, 2011

Horizontal Menu with Subnav w/ CSS & jQuery

Great Menu with sub-menu using jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu 3</title>
<style type="text/css">
body {
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
h1 {
    font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
    color: #333;
    margin: 0;
    padding: 5px 0;
}
h1 small {
    font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing: 1.5em;
    display: block;
    color: #fff;
}
.container {
    width: 970px;
    margin: 0 auto;
}
ul#topnav {
    margin: 0;
    padding: 0;
    float: left;
    width: 970px;
    list-style: none;
    position: relative;
    font-size: 1.2em;
    background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
    float: left;
    margin: 0;
    padding: 0;
    border-right: 1px solid #555;
}
ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
}
ul#topnav li:hover {
    background: #1376c9 url(topnav_active.gif) repeat-x;
    text-decoration:blink;

}
ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0;
    top:35px;
    display: none;
    width: 970px;
    background: #DDCCCC;
    color: #000000;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span {
    display: block;
    font-weight:bold;
    color: #000000;
}
ul#topnav li span a {
    display: inline;
}
ul#topnav li span a:hover {
    color: #000000;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   
$("ul#topnav li").hover(function() { //Hover over event on list item
    $(this).css({ 'background' : '#DDCCCC url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
    $(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    $(this).find("span").hide(); //Hide the subnav
});

$("ul#topnav li a").hover(function() { //Hover over event on list item
    $(this).css({ 'color' : '#000000' });
} , function() { //on hover out...
    $(this).css({ 'color' : '#f0f0f0' });
});
   
});
</script>
</head>

<body>
<div class="container">
  <h1>Horizontal Menu with Subnav w/ CSS &amp; jQuery</h1>
  <ul id="topnav">
    <li> <a href="#">Home</a></li>
    <li> <a href="#">About</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li>
    <li> <a href="#">Services</a> <span> <a href="#">What We Do</a> | <a href="#">Our Process</a> | <a href="#">Testimonials</a> </span> </li>
    <li> <a href="#">Portfolio</a> <span> <a href="#">Web Design</a> | <a href="#">Development</a> | <a href="#">Identity</a> | <a href="#">SEO &amp; Internet Marketing</a> | <a href="#">Print Design</a> </span> </li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
</body>
</html>

No comments:

Post a Comment