example1.html (IE9 Save target as... saves it only as .htm, so add L for accuracy!)
jquery.min.js (90.9 KB = 93,100 bytes)
menu_query.js (862 bytes)
styles.css (4.31 KB = 4,416 bytes)
(In styles.css set first background: to YOUR page's bgcolor or corner colors will be wrong!)
Code for the HTML file:
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="menu_jquery.js"></script>
</head>
<body>
<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a><ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul></li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div></body>
example2.html (IE9 Save target as... saves it only as .htm, so add L for accuracy!)
jquery-latest.min.js (93.5 KB = 95,786 bytes)
menu_query.js (862 bytes)
External styles.css not necessary, because it's already inside the HTML file.
In styles.css section inside/below set first background: to YOUR page's bgcolor, otherwise corner colors will be wrong!
Code for the HTML file:
<!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>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@charset 'UTF-8';/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}#cssmenu a {
line-height: 1.5;
}#cssmenu {
width: 100%;
background: #fff;
}#cssmenu > ul {
border: 1px solid #000000;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}#cssmenu > ul:after {
clear: both;
content: '';
display: table;
}@media all and (max-width: 480px) {
#cssmenu > ul {
max-height: 32px;
overflow: hidden;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
#cssmenu.expand ul {
max-height: 900px;
}
}#cssmenu > ul > li {
border-right: 1px solid #000000;
-moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
float: left;
}#cssmenu > ul > li.mobile {
display: none;
}#cssmenu > ul > li.active {
background: #444444;
background: -moz-linear-gradient(#444444 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #323232));
background: -webkit-linear-gradient(#444444 0%, #323232 100%);
background: linear-gradient(#444444 0%, #323232 100%);
}@media all and (max-width: 480px) {
#cssmenu > ul > li {
border-right: 0 none;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
display: block;
float: none;
}
#cssmenu > ul > li.mobile {
display: block;
}
#cssmenu > ul > li.mobile i {
float: right;
font-style: normal;
}
}#cssmenu > ul > li:last-child {
border-right: 0 none;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}#cssmenu > ul > li:last-child ul {
left: auto;
right: 0;
}#cssmenu > ul > li.mobile {
border-right: 0 none;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
}#cssmenu > ul > li > a {
margin: 0 0 2px 0;
font-size: 12px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
}#cssmenu > ul > li > a > span {
display: block;
padding: 6px 10px;
font-weight: bold;
}#cssmenu > ul > li > a:hover {
text-decoration: none;
}#cssmenu > ul > li.active {
border-bottom: none;
}#cssmenu > ul > li.active > a {
color: #fff;
text-shadow: 0 1px 1px #000;
}/* Sub menu */
#cssmenu ul ul {
background: #f9f9f9;
border: 1px solid #cccccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
padding: 5px 12px;
display: none;
position: absolute;
top: 33px;
left: 0;
width: 200px;
z-index: 1;
}@media all and (max-width: 480px) {
#cssmenu ul ul {
position: relative;
top: 0;
width: 100%;
}
}#cssmenu ul ul li {
padding: 3px 0;
}#cssmenu ul ul a {
color: #999999;
display: block;
font-size: 12px;
font-weight: bold;
}#cssmenu ul ul a:hover {
color: #444444;
}
</style><script src="jquery-latest.min.js"></script>
<script src="menu_jquery.js"></script>
</head>
<body>
<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a><ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul></li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div></body>