Spry menu & jquery tweak
Hi!
I have two items I need help tweaking.
1) the page has the jQuery portfolio, and for some reason, just by having this inserted on the page has "blocked" my spry menu drop down for the portfolio links within.
2) I've repeated the jQuery gallery twice on the same page so as to compartmentalize different works...the ability to choose how to view the portfolio samples is not working on the second one, but works for the top one. Don't know why when the exact script has been duplicated?
Can you please help me address these issues so that I may tweak accordingly? Thank you!
http://c2cstudios.com/c2cstudios_11/illustration/index.html
The following is an example of placing two ad-gallery widgets in the one document.
<!DOCTYPE HTML>
<html>
<head>
<link href="jquery.ad-gallery.css" rel="stylesheet">
<style type="text/css">
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
color: #333;
line-height: 140%;
select, input, textarea {
font-size: 1em;
body {
padding: 30px;
font-size: 70%;
width: 800px;
h2 {
margin-top: 1.2em;
margin-bottom: 0;
padding: 0;
border-bottom: 1px dotted #dedede;
h3 {
margin-top: 1.2em;
margin-bottom: 0;
padding: 0;
.example {
border: 1px solid #CCC;
background: #f2f2f2;
padding: 10px;
ul {
list-style-image:url(../jquery.ad-gallery.1.2.4/list-style.gif);
pre {
font-family: "Lucida Console", "Courier New", Verdana;
border: 1px solid #CCC;
background: #f2f2f2;
padding: 10px;
code {
font-family: "Lucida Console", "Courier New", Verdana;
margin: 0;
padding: 0;
#gallery, #gallery2 {
padding: 30px;
background: #e1eef5;
#descriptions, #descriptions2 {
position: relative;
height: 50px;
background: #EEE;
margin-top: 10px;
width: 640px;
padding: 10px;
overflow: hidden;
#descriptions .ad-image-description, #descriptions2 .ad-image-description {
position: absolute;
#descriptions .ad-image-description .ad-description-title, #descriptions2 .ad-image-description .ad-description-title {
display: block;
</style>
<title>A demo of AD Gallery - Coffeescripter.com</title>
</head>
<body>
<div id="container">
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper">
</div>
<div class="ad-controls">
</div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="http://c2cstudios.com/c2cstudios_11/jquery/images/1.jpg">
<img src="http://c2cstudios.com/c2cstudios_11/jquery/images/thumbs/t1.jpg" title="apolo ohno" class="image0">
</a>
</li>
<li>
<a href="http://c2cstudios.com/c2cstudios_11/jquery/images/2.jpg">
<img src="http://c2cstudios.com/c2cstudios_11/jquery/images/thumbs/t2.jpg" title="simone" class="image1">
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="descriptions"></div>
<p>Examples of how you can alter the behaviour on the fly;
Effect: <select id="switch-effect">
<option value="slide-hori">Slide horizontal</option>
<option value="slide-vert">Slide vertical</option>
<option value="resize">Shrink/grow</option>
<option value="fade">Fade</option>
<option value="">None</option>
</select><br>
</p>
<div id="gallery2" class="ad-gallery">
<div class="ad-image-wrapper">
</div>
<div class="ad-controls">
</div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="http://c2cstudios.com/c2cstudios_11/jquery/images/1.jpg">
<img src="http://c2cstudios.com/c2cstudios_11/jquery/images/thumbs/t1.jpg" title="apolo ohno" class="image0">
</a>
</li>
<li>
<a href="http://c2cstudios.com/c2cstudios_11/jquery/images/2.jpg">
<img src="http://c2cstudios.com/c2cstudios_11/jquery/images/thumbs/t2.jpg" title="simone" class="image1">
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="descriptions2"></div>
<p>Examples of how you can alter the behaviour on the fly;
Effect: <select id="switch-effect2">
<option value="slide-hori">Slide horizontal</option>
<option value="slide-vert">Slide vertical</option>
<option value="resize">Shrink/grow</option>
<option value="fade">Fade</option>
<option value="">None</option>
</select><br>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.ad-gallery.js"></script>
<script>
$(function() {
var galleries = $('#gallery.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
var galleries2 = $('#gallery2.ad-gallery').adGallery();
$('#switch-effect2').change(
function() {
galleries2[0].settings.effect = $(this).val();
return false;
</script>
</body>
</html>
Notice that the ID's for the second widget have changed as well as a second constructor and the addition of style rules for the extra ID's. Note also that the selector has changed to target the relevant gallery with the addition of #gallery and #gallery2
Gramps
Similar Messages
-
I lost the blue tab on my spry menu.
I've saved my document and re-opened it, but still can't get the blue spry menu tab to show. Also can't see my submenus in the browser. It shows in my code. Here is my code.
<table width="878" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="878" height="37" align="center" valign="middle" bgcolor="#D1D1D1">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">HOME</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
<ul>
<li><a href="#">Become A Member</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">NEWS</a>
<ul>
<li><a href="#">Events</a> </li>
<li><a href="#">Job Listings</a></li>
<li><a href="#">Hot Deals</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">EVENTS</a>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Chamber Calendar</a></li>
<li><a href="#">Community Calendar</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Hot Deals</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">COMMUNITY</a>
<ul>
<li><a href="#">Scott Air Force Base</a></li>
<li><a href="#">City of O'Fallon</a></li>
<li><a href="#">O'Fallon Welcome Guide</a></li>
<li><a href="#">O'Fallon-Shiloh Area Restaurant Guide</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Shiloh</a>
<ul>
<li><a href="#">Village of Shiloh</a></li>
<li><a href="#">Village Services Guide</a></li>
<li><a href="#">Shiloh Community Calendar</a></li>
</ul>
</li>
<li><a href="#">Events & Reception Planning Guide</a></li>
<li><a href="#">Relocation Packet Info</a></li>
<li><a href="#">The Tourism Burea Illinois South</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">CONTACT US</a>
<ul>
<li><a href="#">Member Login</a></li>
<li><a href="#">Member Directory</a></li>
<li><a href="#">Community Business Info</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">JOIN US</a>
<ul>
<li><a href="#">Member Directory</a></li>
<li><a href="#">Become A Member</a></li>
<li><a href="#">Member Login</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">COMMITTEES</a>
<ul>
<li><a href="#">Board of Directors</a></li>
<li><a href="#">Ambassadors</a></li>
<li><a href="#">Star Investors</a></li>
<li><a href="#">Member Directory</a></li>
</ul>
</li>
<li><a href="#">PHOTO GALLERY</a></li>
</ul></td>
</tr>
</table>
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
list-style-type: none;
cursor: default;
width: 878px;
white-space: nowrap;
display: inline;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0 auto;
padding: 0;
position: relative;
text-align: left;
cursor: default;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
font-weight: normal;
font-style: normal;
font-size: 87%;
white-space: nowrap;
line-height: normal;
width: auto;
clear: none;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: 1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
text-align: left;
white-space: nowrap;
display: block;
float: none;
font-size: 100%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
font-style: normal;
line-height: normal;
font-weight: bolder;
text-transform: none;
background-color: transparent;
width: auto;
position: relative;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
margin-top: -5%;
margin-right: 0px;
margin-bottom: 0;
margin-left: 95%;
position: absolute;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border-top-color: #021844;
border-right-color: #021844;
border-bottom-color: #021844;
border-left-color: #021844;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #021844;
color: #FFF;
text-decoration: none;
border: 1px solid #FFF;
text-align: left;
padding-top: 0.5em;
padding-right: 0.75em;
padding-bottom: 0.5em;
padding-left: 0.75em;
white-space: nowrap;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #036009;
background-color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: none;
background-position: 95% 50%;
background-color: #021844;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRightHover.gif);
background-position: 95% 50%;
background-repeat: no-repeat;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: none;
background-position: 95% 50%;
color: #036009;
background-color: #FFF;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
// SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
continue;
if (els[i])
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
ref = tmp;
found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
})(); // EndSpryComponentYou don't need to upgrade your software. But if you're struggling with Spry, IMO you should cut your losses and switch to something better for the longrun.
If you have a budget to work with, I highly recommend Project Seven's Pop-Menu Magic 3. It's easy to use in DW CS4, 5, 6 or CC. More importantly, it's bullet proof and works in all devices.
Pop-Menu Magic3 by PVII (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget to work with, you can roll your own menus with jQuery plugins. A bit more effort on your part, but they perform better than Spry.
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MegaMenu2
DEMO:
http://www.geektantra.com/projects/jquery-megamenu-2/
DOWNLOAD:
http://code.google.com/p/jquery-megamenu/
Nancy O. -
Spry Menu Bar Positioning Problem in IE
I have a Dreamweaver-created Spry Menu Bar drop down menu which works perfectly in every browser on my Mac and on my PC . . . EXCEPT Internet Explorer (who woulda thunk it?!!)
In all browsers except for IE, the 3 submenu items under "Door Systems" and "Gallery" appear exactly as they should in a vertical row, positioned just below the brown line below the navigation links and all the same width. But in IE they appear higher up and with different widths. IE is ignoring the rules for width and position.
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="closet_doors_gallery.html">DOOR SYSTEMS</a>
<ul>
<li><a href="sliding_doors_nyc_nj.html">DOOR PROFILES</a></li>
<li><a href="bifold_doors_nyc_nj.html">PANELS COLORS</a></li>
<li><a href="room_dividers_nyc_nj.html">DOOR SYSTEM TYPES</a></li>
</ul>
</li>
</ul>
<ul id="MenuBar3" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">GALLERY </a>
<ul>
<li><a href="#">SLIDING DOORS</a></li>
<li><a href="#">BI-FOLD DOORS</a></li>
<li><a href="#">ROOM DIVIDERS</a></li>
</ul>
</li>
</ul>
Here is the page where you can see the problem if you view it with IE, and see that it's fine in Safari, and Firefox, Chrome and Opera, Mac or PC:
http://2113web.com/indeco/index.html
I have a feeling it's a simple fix of the css, but I can't figure it out - I would really appreciate anyone's help with it - thank you!
Below is the CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
font-weight:bold;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
white-space: nowrap;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
top: 63px; /*THIS POSITIONS THE SUBMENU BELOW THE TOP MENU*/
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
float: none;
background-color:#f5f5e8;
height:25px; /*THIS POSITIONS THE SUBMENUS HEIGHT*/
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin-top: -5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border:none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: transparent;
padding: 0.5em 0.75em;
color: #59330d;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: transparent;
color: #afa06f;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: transparent;
color: #afa06f;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%)
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%)
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%)
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%)
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
PerryHi and thank you very much. It was a little confusing as to whether you meant to add the rules you suggested or to replace them, or a combination of both, but I puzzled it out. I created a new MenuBarHorizontal.css file in a blank page and then made the changes you suggested and it works! Yay! I had to do a bit of tweaking to get it to look just the way I wanted, but it now works correctly in ie 7 and 8 and still works fine in everything else.
Interestingly enough, I had to change the margin-top: 63px; rule in "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible" to 40px to get it positioned properly vertically, and I had to get rid of the "border-bottom: solid 1px #EEE;" in "ul.MenuBarHorizontal ul li", which caused the submenu items to have quite a lot of vertical space between them - I'm not sure why!
I also had to get rid of all the syling rules in the "SUBMENU INDICATION: styles if there is a submenu under a given menu item" section, as well as the one you added: "ul.MenuBarHorizontal a.MenuBarItemSubmenu {
padding: 0.5em 2em 0.5em 0.75em;"
With that done, it works great in both ie7 and ie8, so thank you for the help. Below is the new css that works, in total.
Not being as familiar with the subtleties of CSS as you and many others obviously are, I'm REALLY curious as to exactly what is different that causes this to work now, and would be happy to hear your expanation, if you feel like taking the time to explain. If not, no problem - it works and that is the most important thing! So, thank you again -
Perry
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
margin-top: 40px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
display: block;
float: none !important;
width: auto;
white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #f5f5e8;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #f5f5e8;
color: #afa06f;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #f5f5e8;
color: #afa06f;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
background: transparent;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF; -
Spry Menu Bar jumps off screen-right in CS6
Frustrating little glitch I'm experiencing. When in a NON-LIVE mode in CS6, I have a Spry Menu Bar that I've placed, customized and is functioning properly. It is precisely in the right location in BOTH live mode and in a browser preview, however, when I am editing the site the menu bar jumps off screen right to where I have to scroll right to locate it. The only thing that pops it back in to place is by tweaking a setting like "Float" from right to left then back to right. But once I begin to edit the site again it will jump off the screen. This isn't a massive deal since it remains in place in live and preview modes, it's just annoying for layout purposes while I'm editing. It sort of screws up the aesthetic of the layout. Has anyone found the same problem? Below is my layout.css and my Spry Menu css.
@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 6;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 15;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 95.8695%;
padding-left: 1.0652%;
padding-right: 1.0652%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#maincontent {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
#navigation {
clear: none;
float: left;
margin-left: auto;
width: 100%;
display: block;
margin-top: 20px;
margin-bottom: 20px;
background-color: #300;
height: 16px;
top: 5px;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
color: #FFF;
background-attachment: fixed;
background-image: url(../bkgdContent.png);
background-repeat: repeat;
margin-top: 20px;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 91.4836%;
padding-left: 0.7581%;
padding-right: 0.7581%;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
text-align: center;
#maincontent {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
#navigation {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
height: 16px;
#whf-content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#donatecontent {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
#theride-content {
clear: both;
float: left;
margin-left: 0;
width: 49.1712%;
display: block;
#donate-content {
clear: none;
float: left;
margin-left: 1.6574%;
width: 49.1712%;
display: block;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 89.0217%;
max-width: 1232px;
padding-left: 0.4891%;
padding-right: 0.4891%;
margin: auto;
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
color: #FFF;
#maincontent {
clear: both;
float: left;
margin-left: 0;
width: 32.6007%;
display: block;
#navigation {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#whf-content {
clear: both;
float: left;
margin-left: 0;
width: 32.6007%;
display: block;
#donatecontent {
clear: none;
float: left;
margin-left: 1.0989%;
width: 100%;
display: block;
#donate-content {
clear: none;
float: left;
margin-left: 1.0989%;
width: 32.6007%;
display: block;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#theride-content {
clear: none;
float: left;
margin-left: 1.0989%;
width: 32.6007%;
display: block;
#whf-content {
font-family: Georgia, "Times New Roman", Times, serif;
SPRY CSS
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
float: right;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 4.3em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 4.3em;
position: relative;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: relative;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #300;
color: #FFF;
text-decoration: none;
font-size: 12px;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
height: 16px;
padding: 0px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #003;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #003;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;Design view is not reliable. Learn to work in Code View or Split View with Live View to check your layout.
Spry menus are not responsive so they will not work well in a Fluid Grid Layout. Find a better menu system.
Project Seven Responsive Tabs
http://www.projectseven.com/products/tools/tpm2/tutorials/responsive/index.htm
10 Responsive Menus
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
In the meantime,
It's often easier to work with an unstyled HTML page.
To disable CSS, go to View > Style Rendering > untick Display Styles.
Or, use a Design-Time Style Sheet.
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.h tml
Nancy O. -
Spry Menu Bar 2.0 and positioning of arrows
Hello again,
I'm now trying to incorporate Spry Menu Bar 2.0 into a client site, using CS6. Two things are occurring: in Live View, for long lines of menu text, the text wraps to a second line (as I would prefer) and the arrows to submenus line up in a readable fashion. But when I view it in IE or Firefox, the text spills outside (off to the right) of the vertical menu container and the submenu arrows are hidden underneath the text. As far as width, I've tried auto and inherit.
So, out of frustration I finally decided I would just shorten my menu text to solve the spilling over problem, and a set pixel width that accommodated my longest line of text. But still, even if the text just fills the container, the arrow is hidden underneath the text. I'm pulling my hair out trying to figure out how to adjust the positioning of the arrow so that it's off to the far right, as it should be. I assume it is this set of rules that controls the arrow:
.MenuBarVertical .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
...but I don't know how to adjust these to bump the arrow over. Any ideas out there?
Ideally, I'd like to get back to wrapping my menu text as well, and I don't understand why it appears this way in Live View but not in a browser. But I'll settle for the arrow in the correct position as second prize. Thanks for your help,
GailOK, here's what I've done. By adjusting the right padding on #MenuBarVertical .MenuItem .MenuItemLabel, AND #MenuBarVertical .SubMenu .MenuItem .MenuItemLabel, I was able to position the right arrows to where I wanted them. I also removed all links from top-level menu items so that the fly-out submenus would appear on a touch screen. You can see the results on my client site: www.gcssepm.org. I must say that this solution was not intuitive; it took a lot of experimentation to figure out which rule to adjust, and menu rules vs. submenu rules seem to operate in the opposite manner as far as padding and arrows go.
I do have a similar issue with Scott, in that it takes two or more "taps" to get the submenus to fly out, but at least the arrow is there so the user knows there is a submenu to be had. The only real issue I still have is that for sub-submenus (i.e., third-level), no amount of tapping will get those to display long enough to select them (only an issue on the iPad). I don't know a way around this for the iPad, other than to also eliminate all links from second-level menus that have a third level, and that's more reprogramming than I want to do for today.
Final questions regarding the Spry 2.0 widget. Obviously, after I customized the widget, saved it, and imported into my site template, it took some additional tweaking before everything was working properly. Is there a way to export the settings back out to the widget, so that all the tweaking is there? Also, is there a way to save my menu text back to the widget, because it is obviously NOT Home, Entertainment, Music, etc.
Thanks for all your help, and I hope someone else benefits from my experiences as well.
Gail -
Edit Spry Menu Bar using Mouse Click
Hello…
I created a Spry Menu Bar and it's working just fine. But on phones and Tablets the submenu doesn't work because it's a mouseover, is it possible to change it to a mouse click?
Thanks!Yes, but it needs a lot of JS coding to do so.
A better solution is to use a jQuery or pure CSS menubar or visit http://www.projectseven.com/ for a commercial version -
Spry Menu 2.0 issues in IE7.. yes another one!
I have CS4, and have used the widget browser to create a Spry Menu 2.0 and have imported it to my site. It displays fine in every browser except for IE7. I have been reading a LOT of threads on issues similiar to this one, so I'm prepared to tell everyone I know to upgrade to at least IE8!! However, I would like to fix it if possible. The menu bar is located in an include file and is attached to all my pages through the php function. I have made zero changes to the css code since I imported it into the site.
I also am wondering why there are two css pages for the menu bar.??
Any help would be appreciated..
One of the pages on the site is: michaelandrewshairstudio.com/offers.php
That page is: ( I have taken out some meta tags and content, but the div's are all still in place.) I also deleted some commented tags by accident when I imported it..
<!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>Michael Andrews Hair Salon Offers</title>
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBar.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryDOMUtils.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryDOMEffects.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryWidget.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/SpryMenu.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js"></script>
<script type='text/javascript' src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js"></script>
<link href="CSS/stylesA.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerwrapper">
<div id="header">
<div id="navbar">
<?php include("Spry-UI-1.7/includes/SpryMenuBar.php"); ?>
</div>
</div>
<div id="mainbody">
<div id="logo">
</div>
<hr />
<div id="content">
</div>
</div>
<div id="footer">
<div id="footernav">
</div>
<div id="footertext">
</div>
</div>
</div>
</body>
</html>
SpryMenuBar.css
#MenuBar {
background-color:#333;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 14px;
font-style: normal;
padding:0;
border-color: #999999 #999999 #999999 #999999;
border-width:3px;
border-style: outset outset outset outset;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 0px 24px 0px 0px;
background-color:#333333;
border-width:1px;
border-color: #cccccc #ffffff #cccccc #999999;
border-style: none none none solid;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none none none solid;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#cccccc;
background-color:#333333;
padding: 6px 15px 6px 39px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
font-style: normal;
background-color:#666666;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#666666;
color:#cccccc;
padding: 6px 12px 6px 5px;
width: 7em;
width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #333333;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #333333; /* consider exposing this prop separately*/
color: #ffffff;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: #333333;
color: #ffffff;
#MenuBar .SubMenu .MenuItemHover {
background-color: #666666;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #666666;
color: #ffffff;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color:#333;
min-width:100%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #ffffff;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #333333; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #666666; /* consider exposing this prop separately*/
color: #ffffff;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
SpryMenuBasic.css
/* SpryMenuBasic.css - version 0.5 - Spry Pre-Release 1.7 */
/* Copyright (c) 2010. Adobe Systems Incorporated. All rights reserved. */
/* This is the css for a basic Spry 2 MenuBar.
* The first section is basic layout, and should in general not need to be modified.
* The final section of this file specifies images to use for arrows for the menu. These
* are either down or right-pointing as required by horizonatal or vertical layouts. You
* can either replace the referenced images with your own, or you can modify these rules to
* point to your won images.
* These rules are supplemented by those specified in the OAM file for inclusion in the html document,
* or alternatively, the file SpryMenuBarBasicSkin.css which is included with this widget. */
/* Resets for ul and li in menus */
.MenuBar .MenuBarView, .MenuBar .SubMenuView {
display:block;
list-style:none;
margin:0;
padding:0;
/*** Layout Rules for Basic Menu ***/
/* Top Level MenuBar
* Because we float the MenuItemContainers in the MenuBar, we have to make sure the menubar wrapper expands to hold them all.
* The simplest way is to float the widget wrapper
.MenuBar { /* overridden by .MenuBarVertical version of this rule */
float:left;
width:100%;
.MenuBarVertical {
float:left; /* Used to make menubar shirink to fit contents */
width:auto;
/* SubMenus */
.MenuBar .SubMenu {
display:block;
position:absolute;
top:0;
left:-10000px; /* By default, all non-visible submenus are hidden by moving way to the west */
padding:0;
/* First level of submenus - pulls down from horizontal menubar, right from vertical */
.MenuBar .SubMenuVisible{ /* overridden by .MenuBarVertical version of this rule */
top:100%;
left:0px;
.MenuBarVertical .SubMenuVisible {
top:0px;
left:100%;
/* All submenus below level 1. All pullout to the right */
.MenuBar .SubMenu .SubMenuVisible {
display:block;
position:absolute;
top:0px;
left:100%;
/* MenuItems, MenuItemLabels, and MenuItemContainers */
.MenuBar .MenuItem {
display:block;
text-decoration:none;
.MenuBar .MenuItemLabel {
display:block;
.MenuBar .MenuItemContainer {
position:relative;
white-space:nowrap;
float:left; /* overridden by .MenuBarVertical version of this rule */
display:block;
margin:0;
padding:0;
.MenuBarVertical .MenuItemContainer {
float:none;
.MenuBar .SubMenu .MenuItemContainer {
float:none;
/* Layout Rules needed by IE6 - excluded from other browsers */
.SpryIsIE6 .SubMenu .SubMenu {
width:100px;
height:1%;
.SpryIsIE6 .MenuBar .SubMenuVisible .SubMenuVisible {
width:auto;
/* End Layout section */
* Arrows - This section specifies arrow images for a submenu dropdowns in Basic SpryMenu.
.MenuBar .MenuItemLabel{
background-image:none;
/* For all arrows used here, we depend upon the image to push itself away from right edge, or the user can add right padding to the MenuItem */
.MenuBar .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuDownGrey.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuDownWhite.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBarVertical .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBarVertical .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.MenuBar .SubMenu .MenuItemHover.MenuItemWithSubMenu .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
/* IE6 rules for Arrows */
.SpryIsIE6 .MenuBar .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuDown.gif");
background-position:right center;
background-repeat:no-repeat;
.SpryIsIE6 .MenuBarVertical .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;
.SpryIsIE6 .MenuBar .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel{
background-image:url("images/ArrowMenuRight.gif");
background-position:right center;
background-repeat:no-repeat;I love your subject line
Spry Menu 2.0 issues in IE7.. yes another one!
It is us as designers/developers that need to create websites for all current browsers. No sense in blaming the browsers, although in this case we could blame Spry Menu 2.0.
Problem with that is that Spry Menu 2.0 has been successfully tested in all modern browsers.
This leaves us with just one possibility, the designer/developer has erred somewhere along the line. After having checked the support files (JS and CSS) and looked at the markup, we now go to the constructor and see the following
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
A comma after the last value.
I also am wondering why there are two css pages for the menu bar.??
One is the standard CSS for the menubar and under normal circumstances, should not be touched; the other is for the convenience of the designer/developer so that he/she can tweak the menubar to suit. If you wish, you can combine both. In all cases, keep in mind that the CSS for the standard (basic) menubar should come first, so that the other CSS can override the first.
This needs to be corrected in your document
Gramps -
My web pages use a spry menu bar for navigation. The menu bar is OK in Mac OS X but won't function properly when used by iOS on iPads and iPhones. What modifications do I need to make. Or what other navigation bar should I use?
JQuery is quite a common substitute, but you can do wonders with a simple HTML/CSS only menu.
jMenu jQuery plugin : Demonstration - Horizontal navigation with unlimited sub-menus with jQuery : MyjQueryPlugins.com
Here's an HTML/CSS only version with a persistent page indicator to show the visitor which page they are on
(view the source code) Home Page :: Kards by Karen :: Handcrafted Greeting Cards
And see the CSS here: http://www.kardsbykaren.us/kknav.css -
Dreamweaver Spry Menu not working on I pad
Hi
I have built a website and currently have issues with the spry menu bar not working with the ipad i phones etc.
When you press the link the dropdown menu does not appear.
Any help would be greatly appreciated.
The website is www.jkwindowsanddoors.co.uk and the link is the products in the spry menu bar.
Many ThanksThe Spry menu system was created prior to the advance of touch screens. The action that causes the Spry sub-menu to appear is the hover event, an event that does not exist in touch screen technology.
What I am trying to say is that the Spry menu system cannot be used for touch screens. You are better off using pure CSS menus or jQuery menus. -
Dreamweaver Help | Working with the Spry Menu Bar widget
This question was posted in response to the following article: http://helpx.adobe.com/dreamweaver/using/spry-menu-bar-widget.html
Adobe has discontinued further Spry development.
http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
You can continue using Spry but if mobile & tablets are your concern, I would use a different menu system.
Project Seven's Commercial Extensions:
http://www.projectseven.com/products/templates/pagepacks/adaptations/index.htm
http://www.projectseven.com/products/menusystems/index.htm
Or roll your own with jQuery plug-ins:
http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-m ulti-level-navigation/
https://github.com/mattkersley/Responsive-Menu
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O. -
Spry Menu Bar and Spry Accordians quit working.
I for the life of me can not figure out why these quit working both the spry menu bar and my accordians quit working, . Here is the site I am working on http://www.online-antiques-and-collectibles.com
The pages are in .php so http://www.online-antiques-and-collectibles.com/index.php
I use a dell PC with windows 7. Godaddy is the webserver. I am also using a template. The site pages are HTML5 and PHP.
so someone please help me find out the bug I did to this thing. I really have too much work into this as of now to start over with a new template page if I do not have to?
Any suggestions would be great. Thanks in advance for your help.
Here is the code from my index page
<!doctype html>
<html><!-- InstanceBegin template="/Templates/deco.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="header">
<header><img src="Assets/Images/DECO BANNER.fw.png" width="954" height="228" alt="Deco Designs and Collectibles Header"></header>
</div>
<div class="Nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.php">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Browse</a>
<ul>
<li><a href="antiques/antique-categories.php">Antique Categories</a></li>
<li><a href="collectibles/collectible-categories.php">Collectible Categories</a></li>
</ul>
</li>
<li><a href="search.php" title="Search Deco Designs and Collectibles Website">Search</a></li>
<li><a href="cost.php" title="What Deco Designs and Collectibles Cost">Costs</a></li>
<li><a href="register.php" title="Register for a Deco Designs and Collectibles Seller Account">Register</a></li>
<li><a href="login.php" title="Login to your Deco Designs and Collectibles Sellers Account">Login</a></li>
<li><a href="contact-us.php" title="Contact Us at Deco Designs and Collectibles">Contact Us</a></li>
<li><a href="about-us.php" title="About Us at Deco Designs and Collectibles">About Us</a></li>
</ul>
</div>
<div class="sidebar1">
<div><strong>ANTIQUES</strong></div>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Antiquities Middle Ages</div>
<div class="AccordionPanelContent">
<p><a href="antiques/antiquities-middle-ages-antiques/byzantine-antiques/byzantine-antiquities. php" title="Byzantine Antiques">Byzantine Antiquities</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/celtic-antiques/celtic-antiquities.php" title="Celtic Antiques">Celtic Antiquities</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/egyptian-antiques/egyptian-antiquities.ph p" title="Egyptian Antiques">Egyptian Antiquities</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/far-eastern-antiques/far-eastern-antiquit ies.php" title="Far Eastern Antiques">Far Eastern Antiquities </a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/greek-antiques/greek-antiquities.php" title="Greek Antiques">Greek Antiquities</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/holy-land-antiques/holy-land-antiquities. php" title="Holy Land Antiques">Holy Land Antiquities</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/islamic-antiques/islamic-antiquities.php" title="Islamic Antiques">Islamic Antiquities</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/near-eastern-antiques/near-eastern-antiqu ities.php" title="Near Eastern Antiques">Near Eastern Antiquities</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/neolithic-antiques/neolithic-antiquities. php" title="Neolithic and Paleolithic Antiques">Neolithic and Paleolithic Antiquities</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/reproduction-antiquities/reproduction-ant iquities.php" title="Reproduction Antiquities">Reproduction Antiquities</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/roman-antiques/roman-antiquities.php" title="Roman">Roman Antiquities</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/south-italian-antiques/south-italian-anti quities.php" title="South Italian Antiques">South Italian Antiquities</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/the-americas-antiques/the-americas-antiqu ities.php" title="The Americas Antiques">The Americas Antiquities</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/viking-antiques/viking-antiquities.php" title="Viking Antiques">Viking Antiquities</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/price-guides-and-publications-for-antiqui ties-middle-ages/price-guides-and-publications-for-antiquities-middle-ages.php" title="Price Guides and Publications for Antiquities Middle Ages">Price Guides and Publications for Antiquities Middle Ages</a></p>
<p><a href="antiques/antiquities-middle-ages-antiques/other-antiquities/other-antiquities-middl e-ages.php" title="Other Antiquities Middle Ages Antiques">Other - Antiquities Middle Ages</a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Architectural and Garden Antiques</div>
<div class="AccordionPanelContent">
<p><a href="antiques/architectural-and-garden-antiques/alabaster/alabaster-architectural-and-ga rden-antiques.php" title="Antique Alabaster">Alabaster - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/brass/brass-architectural-and-garden-ant iques.php" title="Antique Brass">Brass - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/bronze/bronze-architectural-and-garden-a ntiques.php" title="Antique Bronze">Bronze - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/cast-iron/cast-iron-architectural-and-ga rden-antiques.php" title="Antique Cast Iron">Cast Iron - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/chrome/chrome-architectural-and-garden-a ntiques.php" title="Antique Chrome">Chrome - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/copper/copper-architectural-and-garden-a ntiques.php" title="Antique Copper">Copper - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/crystal/crystal-architectural-and-garden -antiques.php" title="Antique Crystal">Crystal - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/glass/glass-architectural-and-garden-ant iques.php" title="Glass">Glass - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/gold/gold-architectural-and-garden-antiq ues.php" title="Antique Gold">Gold - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/iron/iron-architectural-and-garden-antiq ues.php" title="Antique Iron">Iron - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/marble/marble-architectural-and-garden-a ntiques.php" title="Marble">Marble - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/mixed-materials/mixed-materials-architec tural-and-garden-antiques.php" title="Mixed Material Antiques">Mixed Materials - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/pewter/pewter-architectural-and-garden-a ntiques.php" title="Antique Pewter">Pewter - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/porcelain/porcelain-architectural-and-ga rden-antiques.php" title="Antique Porcelain">Porcelain - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/silver/silver-architectural-and-garden-a ntiques.php" title="Antique Silver">Silver - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/steel/steel-architectural-and-garden-ant iques.php" title="Antique Steel">Steel - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/stone/stone-architectural-and-garden-ant iques.php" title="Antique Stone">Stone - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/synthetic/synthetic-architectural-and-ga rden-antiques.php" title="Synthetic Antiques">Synthetic - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/tole/tole-architectural-and-garden-antiq ues.php" title="Antique Tole">Tole - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/wood/wood-architectural-and-garden-antiq ues.php" title="Antique Wood">Wood - Architectural and Garden Antiques</a></p>
<p><a href="antiques/architectural-and-garden-antiques/other-architectural-and-garden-antiques/ other-architectural-and-garden-antiques.php" title="Other Architectural and Garden Antiques">Other - Architectural and Garden Antiques</a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Asian Antiques</div>
<div class="AccordionPanelContent">
<p><a href="antiques/asian-antiques/amulets/amulets-asian-antiques.php" title="Antique Asian Amulet">Amulets - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/armor/armor-asian-antiques.php" title="Antique Asian Armor">Armor - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/baskets/baskets-asian-antiques.php" title="Antique Asian Basket">Baskets - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/bells/bells-asian-antiques.php" title="Antique Asian Bell">Bells - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/bowls/bowls-asian-antiques.php" title="Antique Asian Bowl">Bowls - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/boxes/boxes-asian-antiques.php" title="Antique Asian Boxe">Boxes - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/bracelets/bracelets-asian-antiques.php" title="Antique Asian Bracelet">Bracelets - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/brush-pots/brush-pots-asian-antiques.php" title="Antique Asian Brush Pot">Brush Pots - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/brush-water/brush-washer-asian-antiques.php" title="Antique Asian Brush Washer">Brush Washers - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/dolls/dolls-asian-antiques.php" title="Asian Antique Doll">Dolls - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/fans/fans-asian-antiques.php" title="Asian Antique Fan">Fans - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/furniture/furniture-asian-antiques.php" title="Asian Antique Furniture">Furniture - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/glasses-and-cups/glasses-and-cups-asian-antiques.php" title="Asian Antique Glass and Cup">Glasses and Cups - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/incense-burners/incense-burners-asian-antiques.php" title="Asian Antique Incense Burner">Incense Burners - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/ink-stones/ink-stones-asian-antiques.php" title="Asian Antique Ink Stone">Ink Stones - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/katana/katana-asian-antiques.php" title="Asian Antique Katana">Katana - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/kimonos-robes-and-textiles/kimonos-robes-and-textiles-asian -antiques.php" title="Asian Antique Kimono, Robe, and Textile">Kimonos, Robes and Textiles - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/masks/masks-asian-antiques.php" title="Asian Antique Mask">Masks - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/necklaces-and-pendants/necklaces-and-pendants-asian-antique s.php" title="Asian Antique Necklace and Pendant">Necklaces and Pendants - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/netsuke/netsuke-asian-antiques.php" title="Asian Antique Netsuke">Netsuke - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/paintings-scrolls-and-prints/paintings-scrolls-and-prints-a sian-antiques.php" title="Asian Antique Painting, Scroll and Print">Paintings, Scrolls and Prints - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/plates/plates-asian-antiques.php" title="Asian Antique Plate">Plates - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/pots/pots-asian-antiques.php" title="Asian Antique Pot">Pots - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/rings/rings-asian-antiques.php" title="Asian Antique Ring">Rings - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/seals/seals-asian-antiques.php" title="Asian Antique Seal">Seals - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/snuff-bottles/snuff-bottles-asian-antiques.php" title="Asian Antique Snuff Bottle">Snuff Bottles - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/statues/statues-asian-antiques.php" title="Asian Antique Statue">Statues - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/swords/swords-asian-antiques.php" title="Asian Antique Sword">Swords - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/tea-caddies/tea-caddies-asian-antiques.php" title="Asian Antique Tea Caddie">Tea Caddies - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/teapots/teapots-asian-antiques.php" title="Asian Antique Teapot">Teapots - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/tubas/tubas-asian-antiques.php" title="Asian Antique Tuba">Tubas - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/vases/vases-asian-antiques.php" title="Asian Antique Vase">Vases - Asian Antiques</a></p>
<p><a href="antiques/asian-antiques/other-asian-antiques/other-asian-antiques.php" title="Other Asian Antiques">Other Asian Antiques</a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Books and Manuscripts Antiques</div>
<div class="AccordionPanelContent">
<p><a href="antiques/books-and-manuscripts-antiques/americana/americana-books-and-manuscripts-a ntiques.php" title="Americana Book">Americana - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/art-and-photography/art-and-photography-boo ks-and-manuscripts-antiques.php" title="Art Book and Photography Book">Art and Photography - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/biography-and-autobiography/biography-and-a utobiography-books-and-manuscripts-antiques.php" title="Biography and Autobiography Book">Biography and Autobiography - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/children/children-books-and-manuscripts-ant iques.php" title="Children Book">Children's - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/cooking/cooking-books-and-manuscripts-antiq ues.php" title="Cook Book">Cooking - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/exploration-and-travel/exploration-and-trav el-books-and-manuscripts-antiques.php" title="Exploration Book and Travel Book">Exploration and Travel - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/fraternal-social-organizations/fraternal-so cial-organizations-books-and-manuscripts-antiques.php" title="Fraternal and Social Organization Book">Fraternal, Social Organizations - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/history/history-books-and-manuscripts-antiq ues.php" title="History Book">History - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/home-and-garden/home-and-garden-books-and-m anuscripts-antiques.php" title="Home Book and Garden Book">Home and Garden - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/law-and-government/law-and-government-books -and-manuscripts-antiques.php" title="Law Book and Government Book">Law and Government - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/literature-and-fiction/literature-and-ficti on-books-and-manuscripts-antiques.php" title="Literature Book and Fiction Book">Literature and Fiction - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/military-and-war/military-and-war-books-and -manuscripts-antiques.php" title="Military Book and War Book">Military and War - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/outdoor-and-nature/outdoor-and-nature-books -and-manuscripts-antiques.php" title="Outdoor Book and Nature Book">Outdoor and Nature - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/performing-arts/performing-arts-books-and-m anuscripts-antiques.php" title="Performing Art Book">Performing Arts - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/pulps/pulps-books-and-manuscripts-antiques. php" title="Pulp Book">Pulps - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/reference/reference-books-and-manuscripts-a ntiques.php" title="Reference Book">Reference - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/religion-and-spirituality/religion-and-spir ituality-books-and-manuscripts-antiques.php" title="Religious Book and Spirituality Book">Religion and Spirituality - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/science-and-medicine/science-and-medicine-b ooks-and-manuscripts-antiques.php" title="Science Book and Medicine Book">Science and Medicine - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/sports/sports-books-and-manuscripts-antique s.php" title="Sport Book">Sports - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/vintage-paperbacks/vintage-paperbacks-books -and-manuscripts-antiques.php" title="Vintage Paperback">Vintage Paperbacks - Books and Manuscripts Antiques</a></p>
<p><a href="antiques/books-and-manuscripts-antiques/other-books-and-manuscripts-antiques/other- books-and-manuscripts-antiques.php" title="Other Book and Manuscrpit Antiques">Other - Books and Manuscripts Antiques</a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Carvings Antiques</div>
<div class="AccordionPanelContent">
<p><a href="antiques/carvings-antiques/african-carvings/african-carvings-antiques.php" title="African Carving">African - Antique Carvings</a></p>
<p><a href="antiques/carvings-antiques/anri-wood-carvings/anri-wood-carvings-antiques.php" title="Ari Wood Carving">Anri Wood - Antique Carvings</a></p>
<p><a href="antiques/carvings-antiques/chinese-carvings/chinese-carvings-antiques.php" title="Chinese Carving">Chinese - Antique Carvings</a></p>
<p><a href="antiques/carvings-antiques/intuit-carvings/intuit-carvings-antiques.php" title="Intuit Carving">Intuit - Antique Carvings</a></p>
<p><a href="antiques/carvings-antiques/ironwood-carvings/ironwood-carvings-antiques.php" title="Ironwood Carving">Ironwood - Antique Carvings</a></p>
<p><a href="antiques/carvings-antiques/jade-carvings/jade-carvings-antiques.php" title="Jade Carving">Jade - Antique Carvings</a></p>
<p><a href="antiques/carvings-antiques/stone-carvings/stone-carvings-antiques.php" title="Stone Carving">Stone - Antique Carvings</a></p>
<p><a href="antiques/carvings-antiques/wood-carvings/wood-carvings-antiques.php" title="Wood Carving">Wood - Antique Carvings</a></p>
<p><a href="antiques/carvings-antiques/other-antique-carvings/other-carvings-antiques.php" title="Other Antique Carving">Other - Antique Carvings</a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Ceramic and Porcelain Antiques</div>
<div class="AccordionPanelContent">
<p><a href="antiques/ceramic-and-porcelain-antiques/amphora/amphora-ceramic-and-porcelain-antiq ues.php" title="Amphora">Amphora - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/bavaria/bavaria-ceramic-and-porcelain-antiq ues.php" title="Bavaria">Bavaria - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/bellek-bellek-american-or-bellek-irish/bell ek-bellek-american-or-bellek-irish-ceramic-and-porcelain-antiques.php" title="Belleek">Belleek, Belleek American or Belleek Irish - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/capodimonte/capodimonte-ceramic-and-porcela in-antiques.php" title="Capodimonte">Capodimonte - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/celadon/celadon-ceramic-and-porcelain-antiq ues.php" title="Celadon">Celadon - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/celadon-northern-or-southern/celadon-northe rn-or-southern-ceramic-and-porcelain-antiques.php" title="Northern Celadon or Southern Celadon">Celadon, Northern or Southern - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/chintz-grimwades-royal-winton-lefton-shelll y/chintz-grimwades-royal-winton-lefton-shelly-ceramic-and-porcelain-antiques.php" title="Chintz, Grimwades (Royal Winton), Lefton, Shelly">Chintz, Grimwades (Royal Winton), Lefton, Shelly - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/cookie-jars-hall-hull-mccoy-redwing-shelly/ cookie-jars-hall-hull-mccoy-redwing-shelly.php" title="Antique Cookie Jars">Cookie Jars, Hall, Hull, McCoy, Redwing, Shelly - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/copeland-spode/copeland-spode-ceramic-and-p orcelain-antiques.php" title="Copeland Spode">Copeland Spode - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/dedham-pottery/dedham-pottery-ceramic-and-p orcelain-antiques.php" title="Dedham Pottery">Dedham Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/delftware/delftware-ceramic-and-porcelain-a ntiques.php" title="Delftware">Delftware - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/dresden-meissen/dresden-meissen-ceramic-and -porcelain-antiques.php" title="Dresden Meissen">Dresden Meissen - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/famille-rose/famille-rose-ceramic-and-porce lain-antiques.php" title="Famille Rose">Famille Rose - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/fiesta/fiesta-ceramic-and-porcelain-antique s.php" title="Fiesta">Fiesta - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/flow-blue/flow-blue-ceramic-and-porcelain-a ntiques.php" title="Flow Blue">Flow Blue - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/fulper/fulper-ceramic-and-porcelain-antique s.php" title="Fulper">Fulper - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/grueby-pottery/grueby-pottery-ceramic-and-p orcelain-antiques.php" title="Grueby Pottery">Grueby Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/hall-pottery/hall-pottery-ceramic-and-porce lain-antiques.php" title="Hall Pottery">Hall Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/haviland-china/haviland-china-ceramic-and-p orcelain-antiques.php" title="Haviland Ching">Haviland China - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/hull-pottery/hull-pottery-ceramic-and-porce lain-antiques.php" title="Hull Pottery">Hull Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/hummel-items-figurines-plates/hummel-items- figurines-plates-ceramic-and-porcelain-antiques.php" title="Hummel, Items, Figurines, Plates">Hummel, Items, Figurines, Plates - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/hummel-goebel/hummel-goebel-ceramic-and-por celain-antiques.php" title="Hummel Goebel">Hummel Goebel - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/kpm-figurines-plates-plaques/kpm-figurines- plates-plaques-ceramic-and-porcelain-antiques.php" title="KPM, figurines, plates, plaques - Ceramic and Porcelain Antiques">KPM, figurines, plates, plaques - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/lenox-china/lenox-china-ceramic-and-porcela in-antiques.php" title="Lenox China">Lenox China - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/limoge-china/limoge-china-ceramic-and-porce lain-antiques.php" title="Limoge China">Limoge China - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/lladro-porcelains/lladro-porcelains-ceramic -and-porcelain-antiques.php" title="Lladro Porcelain">Lladro Porcelains - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/majolica/majolica-ceramic-and-porcelain-ant iques.php" title="Majolica">Majolica - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/mccoy-pottery/mccoy-pottery-ceramic-and-por celain-antiques.php" title="McCoy Pottery">McCoy Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/minton-china/minton-china-ceramic-and-porce lain-antiques.php" title="Milton China">Minton China - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/newcomb-college-pottery/newcomb-college-pot tery-ceramic-and-porcelain-antiques.php" title="Newcomb College Pottery">Newcomb College Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/niloak-pottery/niloak-pottery-ceramic-and-p orcelain-antiques.php" title="Niloak Pottery">Niloak Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/nippon-china/nippon-china-ceramic-and-porce lain-antiques.php" title="Nippon China">Nippon China - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/noritake-china/noritake-china-ceramic-and-p orcelain-antiques.php" title="Noritake China">Noritake China - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/old-sleepy-eye/old-sleepy-eye-ceramic-and-p orcelain-antiques.php" title="Old Sleepy Eye">Old Sleepy Eye - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/onion-meissen/onion-meissen-ceramic-and-por celain-antiques.php" title="Onion Meissen">Onion Meissen - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/oriental/oriental-ceramic-and-porcelain-ant iques.php" title="Oriental Ceramic and Porcelain">Oriental - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/parian-ware/parian-ware-ceramic-and-porcela in-antiques.php" title="Parian Ware">Parian Ware - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/piano-babies/piano-babies-ceramic-and-porce lain-antiques.php" title="Piano Babies">Piano Babies Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/pickard-china/pickard-china-ceramic-and-por celain-antiques.php" title="Pickard China">Pickard China - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/quimper/quimper-ceramic-and-porcelain-antiq ues.php" title="Quimper Ceramics">Quimper Ceramics - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/red-wing-pottery/red-wing-pottery-ceramic-a nd-porcelain-antiques.php" title="Red Wing Pottery">Red Wing Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/rockingham-rockingham-brown-glazed-wares/ro ckingham-rockingham-brown-glazed-wares-ceramic-and-porcelain-antiques.php" title="Rockingham and Rockingham Brown Glazed Wares">Rockingham, Rockingham Brown Glazed Wares - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/rookwood-pottery/rookwood-pottery-ceramic-a nd-porcelain-antiques.php" title="Rookwood Pottery">Rookwood Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/rose-canton-rose-mandarin-rose-medallion/ro se-canton-rose-mandarin-rose-medallion-ceramic-and-porcelain-antiques.php" title="Rose Canton, Rose Mandarin and Rose Medallion">Rose Canton, Rose Mandarin, Rose Medallion - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/rosenthal-porcelain/rosenthal-porcelain-cer amic-and-porcelain-antiques.php" title="Rosenthal">Rosenthal Porcelain - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/roseville-pottery/roseville-pottery-ceramic -and-porcelain-antiques.php" title="Roseville Pottery">Roseville Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/royal-bayreuth/royal-bayreuth-ceramic-and-p orcelain-antiques.php" title="Royal Bayreuth">Royal Bayreuth - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/royal-bohn/royal-bohn-ceramic-and-porcelain -antiques.php" title="Royal Bonn">Royal Bonn - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/royal-coppenhagen/royal-coppenhagen-ceramic -and-porcelain-antiques.php" title="Royal Coppenhagen">Royal Coppenhagen - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/royal-crown-derby/royal-crown-derby-ceramic -and-porcelain-antiques.php" title="Royal Crown Derby">Royal Crown Derby - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/royal-doulton/royal-doulton-ceramic-and-por celain-antiques.php" title="Royal Doulton">Royal Doulton - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/royal-worchester/royal-worchester-ceramic-a nd-porcelain-antiques.php" title="Roayl Worchester">Royal Worcester - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/satsuma/satsuma-ceramic-and-porcelain-antiq ues.php" title="Satsuma">Satsuma - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/sevres/sevres-ceramic-and-porcelain-antique s.php" title="Sevres">Sevres - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/shawnee-pottery/shawnee-pottery-ceramic-and -porcelain-antiques.php" title="Shawnee Pottery">Shawnee Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/shelley/shelley-ceramic-and-porcelain-antiq ues.php" title="Shelley">Shelley - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/staffordshire/staffordshire-ceramic-and-por celain-antiques.php" title="Straffordshire">Staffordshire - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/stangl-pottery-birds/stangl-pottery-birds-c eramic-and-porcelain-antiques.php" title="Stangl Pottery">Stangl Pottery Birds - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/tiles/tiles-ceramic-and-porcelain-antiques. php" title="Ceramic and Porcelain Tile">Tiles - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/toby-jugs/toby-jugs-ceramic-and-porcelain-a ntiques.php" title="Toby Jug">Toby Jugs - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/van-briggle/van-briggle-pottery-ceramic-and -porcelain-antiques.php" title="Van Briggle Pottery">Van Briggle Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/wedgewood/wedgewood-ceramic-and-porcelain-a ntiques.php" title="Wedgwood Pottery">Wedgwood - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/weller-pottery/weller-pottery-ceramic-and-p orcelain-antiques.php" title="Weller Pottery">Weller Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/willow-pattern-china/willow-pattern-ceramic -and-porcelain-antiques.php" title="Willow Pattern China">Willow Pattern China - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/zanesville-pottery/zanesville-pottery-ceram ic-and-porcelain-antiques.php" title="Zanesville Pottery">Zanesville Pottery - Ceramic and Porcelain Antiques</a></p>
<p><a href="antiques/ceramic-and-porcelain-antiques/other-ceramic-and-porcelain-antiques/other- ceramic-and-porcelain-antiques.php" title="Other Antique Ceramic and Porcelan">Other - Ceramic and Porcelain Antiques</a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Clocks Antiques</div>
<div class="AccordionPanelContent">
<p> <a href="antiques/clocks-antiques/antique-clocks/pre-1930-clocks-antiques.php" title="Antique Clock"> Antique Clocks - Pre 1930</a></p>
<p><a href="antiques/clocks-antiques/parts-and-tools-for-clocks-antiques/parts-and-tools-for-cl ocks-antiques.php" title="Antique Clock Parts and Tools">Parts and Tools for Antique Clocks</a></p>
<p><a href="antiques/clocks-antiques/price-guides-and-publications-for-clocks-antiques/price-gu ides-and-publications-for-clocks-antiques.php" title="Price Guides and Publications for Antique Clocks">Price Guides and Publications for Antique Clocks</a></p>
<p><a href="antiques/clocks-antiques/other-clocks-antiques/other-clocks-antiques.php" title="Other Antique Clock">Other - Antique Clocks</a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Comics Antiques</div>
<div class="AccordionPanelContent">
<p><a href="antiques/comics-antiques/antique-comics/comics-pre-1930-antiques.php" title="Antique Comic">Antique Comics (Pre 1930)</a></p>
<p><a href="antiques/comics-antiques/other-comic-pre-1930-antiques/other-comic-pre-1930-antique s.php" title="Other Antique Comic">Other - Antique Comics (Pre 1930) </a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Decorative Arts Antiques</div>
<div class="AccordionPanelContent">
<p><a href="antiques/decorative-arts-antiques/bottles/bottles-decorative-arts-antiques.php" title="Antique Bottle">Bottles - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/bowls/bowls-decorative-arts-antiques.php" title="Antique Bowl">Bowls - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/boxes/boxes-decorative-arts-antiques.php" title="Antique Box">Boxes - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/butter-pats/butter-pats-decorative-arts-antiques. php" title="Butter Pat">Butter Pats - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/candle-holders/candle-holders-decorative-arts-ant iques.php" title="Candle Holder">Candle Holders - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/candle-sticks/candle-sticks-decorative-arts-antiq ues.php" title="Candle Stick">Candle Sticks - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/clocks/clocks-decorative-arts-antiques.php" title="Antique Clock">Clocks - Decorative Arts Antiques </a></p>
<p><a href="antiques/decorative-arts-antiques/compotes/compotes-decorative-arts-antiques.php" title="Compotes">Compotes - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/creamers-and-sugar-bowls/creamers-and-sugar-bowls -decorative-arts-antiques.php" title="Creamers and Sugar Bowls">Creamers and Sugar Bowls - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/crocks/crocks-decorative-arts-antiques.php" title="Crocks">Crocks - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/cups-and-saucers/cups-and-saucers-decorative-arts -antiques.php" title="Cup and Saucer">Cups and Saucers - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/decanters/decanters-decorative-arts-antiques.php" title="Decanter">Decanters - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/dishes/dishes-decorative-arts-antiques.php" title="Antique Dish">Dishes - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/figurines-and-statues/figurines-and-statues-decor ative-arts-antiques.php" title="Figurines and Statues">Figurines and Statues - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/jars/jars-decorative-arts-antiques.php" title="Antique Jar">Jars - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/lamps/lamps-decorative-arts-antiques.php" title="Antique Lamp">Lamps - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/mirrors/mirrors-decorative-arts-antiques.php" title="Mirror">Mirrors - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/perfume-bottles/perfume-bottles-decorative-arts-a ntiques.php" title="Perfume Bottle">Perfume Bottles - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/picture-frames/picture-frames-decorative-arts-ant iques.php" title="Picture Frame">Picture Frames - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/pitchers/pitchers-bottles-decorative-arts-antique s.php" title="Pitcher">Pitchers - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/planters/planters-decorative-arts-antiques.php" title="Planter">Planters - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/plates/plates-decorative-arts-antiques.php" title="Antique Plate">Plates - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/platters-and-trays/platters-and-trays-decorative- arts-antiques.php" title="Platter and Tray">Platters and Trays - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/salt-and-pepper-shakers/salt-and-pepper-shakers-d ecorative-arts-antiques.php" title="Salt and Pepper Shaker">Salt and Pepper Shakers - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/stained-glass-windows/stained-glass-windows-decor ative-arts-antiques.php" title="Stained Glass Window">Stained Glass Windows - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/stemware/stemware-decorative-arts-antiques.php" title="Antique Stemware">Stemware - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/tea-caddies/tea-caddies-decorative-arts-antiques. php" title="Antique Tea Caddie">Tea Caddies - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/teapots-and-tea-sets/teapots-and-tea-sets-decorat ive-arts-antiques.php" title="Teapot and Tea Set">Teapots and Tea Sets - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/tiles/tiles-decorative-arts-antiques.php" title="Antique Tile">Tiles - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/tureens/tureens-decorative-arts-antiques.php" title="Tureen">Tureens - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/urns/urns-decorative-arts-antiques.php" title="Urn">Urns - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/vases/vases-decorative-arts-antiques.php" title="Vase">Vases - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/wooden-ware/wooden-ware-decorative-arts-antiques. php" title="Antique Wooden Ware">Wooden Ware - Decorative Arts Antiques</a></p>
<p><a href="antiques/decorative-arts-antiques/other-decorative-arts-antiques/other-decorative-a rts-antiques.php" title="Other Decorative Arts Antiques">Other - Decorative Arts Antiques</a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Dolls and Doll Houses Antiques</div>
<div class="AccordionPanelContent">
<p><a href="antiques/dolls-and-doll-houses-antiques/china-head-dolls/china-head-dolls-antiques. php" title="China Head Doll">China Head Dolls - Antiques</a></p>
<p><a href="antiques/dolls-and-doll-houses-antiques/cloth-lenci-dolls/cloth-lenci-dolls-antique s.php" title="Cloth Lence Doll">Cloth Lenci Dolls - Antiques</a></p>
<p><a href="antiques/dolls-and-doll-houses-antiques/early-dolls/early-dolls-dolls-antiques.php" title="Early Doll">Early Dolls - Antiques</a></p>
<p><a href="antiques/dolls-and-doll-houses-antiques/gemran-bisque-dolls/german-bisque-dolls-ant iques.html" title="German Bisque Doll">German Bisque Dolls - Antiques</a></p>
<p><a href="antiques/dolls-and-doll-houses-antiques/german-character-dolls/german-character-dol ls-antiques.php" title="German Character Doll">German Character Dolls - Antiques</a></p>
<p><a href="antiques/dolls-and-doll-houses-antiques/kewpies-dolls/kewpies-dolls-antiques.php" title="Hard Plastic Doll">Hard Plastic Dolls - Antiques</a></p>
<p><a href="antiques/dolls-and-doll-houses-antiques/kewpies-dolls/kewpies-dolls-antiques.php" title="Kewpie Doll">Kewpies Dolls - Antiques</a></p>
<p><a href="antiques/dolls-and-doll-houses-antiques/madame-alexander-dolls/madame-alexander-dol ls-antiques.php" title="Madame Alexander Doll">Madame Alexander Dolls - Antiques</a></p>
<p><a href="antiques/dolls-and-doll-houses-antiques/papier-machie-dolls/papier-machie-dolls-ant iques.php" title="Papier Mache Doll">Papier Mache Dolls - Antiques</a></p>
<p><a href="antiques/dolls-and-doll-houses-antiques/r-john-wright-dolls/r-john-wright-dolls-ant iques.php" title="R. John Wright Doll">R. John Wright Dolls - Antiques</a></p>
<p><a href="antiques/dolls-and-doll-houses-antiques/shirley-temple-composition-dolls/shirley-te mple-composition-dolls-antiques.php" title="Shirley Temple Composition Doll">Shirley Temple Composition Dolls - Antique</a></p>
<p><a href="antiques/dolls-and-doll-houses-antiques/other-dolls-antiques/other-dolls-antiques.p hp" title="Other Antique Dolls">Other Antique Dolls</a></p>
<p><a href="antiques/dolls-and-doll-houses-antiques/doll-houses/doll-house-dolls-antiques.php" title="Doll House and Doll Houses">Doll House Antiques</a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Ethnographic Antiques</div>
<div class="AccordionPanelContent">
<p><a href="antiques/ethnographic-antiques/african-ethnographic-antiques/african-ethnographic-a ntiques.php" title="African Antique">African - Ethnographic Antiques</a></p>
<p><a href="antiques/ethnographic-antiques/latin-american-ethnographic-antiques/latin-american- ethnographic-antiques.php" title="Latin American Antique">Latin American - Ethnographic Antiques</a></p>
<p><a href="antiques/ethnographic-antiques/native-american-ethnographic-antiques/native-america n-ethnographic-antiques.php" title="Native American Antique">Native American - Ethnographic Antiques</a></p>
<p><a href="antiques/ethnographic-antiques/pacific-islands-andoceania-ethnographic-antiques/pac ific-islands-andoceania-ethnographic-antiques.php" title="Pacific Island Antique">Pacific Islands and Oceania - Ethnographic Antiques</a></p>
<p><a href="antiques/ethnographic-antiques/price-guides-and-publications-ethnographic-antiques/ price-guides-and-publications-ethnographic-antiques.php" title="Price Guides and Publications - Ethnographic Antiques">Price Guides and Publications - Ethnographic Antiques</a></p>
<p><a href="antiques/ethnographic-antiques/other-ethnographic-antiques/other-ethnographic-antiq ues.php" title="Other - Ethnographic Antiques">Other - Ethnographic Antiques</a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Furniture Antiques</div>
<div class="AccordionPanelContent">
<p><a href="antiques/furniture-antiques/danish-furniture/danish-furniture-antiques.php" title="Danish Furniture">Danish Furniture - Antiques</a></p>
<p><a href="antiques/furniture-antiques/edwardian-furniture/edwardian-furniture-antiques.php" title="Edwardian Furniture">Edwardian Furniture - Antiques </a></p>
<p><a href="antiques/furniture-antiques/french-furniture/french-furniture-antiques.php" title="French Furniture">French Furniture - Antiques</a></p>
<p><a href="antiques/furniture-antiques/mid-century-modern-furniture/mid-century-modern-furnitu re-antiques.php" title="Mid Century Modern Furniture">Mid Century Modern Furniture - Antiques</a></p>
<p><a href="antiques/furniture-antiques/mission-furniture/mission-furniture-antiques.php" title="Mission Furniture">Mission Furniture - Antiques</a></p>
<p><a href="antiques/furniture-antiques/george-nelson-furniture/george-nelson-furniture-antique s.php" title="George Nelson Furniture">George Nelson Furniture - Antiques</a></p>
<p><a href="antiques/furniture-antiques/victorian-furniture/victorian-furniture-antiques.php">V ictorian Furniture - Antiques</a></p>
<p><a href="antiques/furniture-antiques/heywood-wakefield-furniture/heywood-wakefield-furniture -antiques.php" title="Heywood Wakefield Furniture">Heywood Wakefield Furniture - Antiques</a></p>
<p><a href="antiques/furniture-antiques/other-antique-furniture/other-furniture-antiques.php" title="Other Antique Furniture">Other - Antique Furniture </a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Gasoline Pumps Antiques</div>
<div class="AccordionPanelContent">
<p><a href="antiques/gasoline-pumps-antiques/gasoline-pumps/gasoline-pumps-antiques.php" title="Antique Gas Pump">Gasoline Pumps Antiques</a></p>
<p><a href="antiques/gasoline-pumps-antiques/gasoline-pump-parts/gasoline-pump-parts-antiques.p hp" title="Antique Gas Pump Parts">Gasoline Pump Parts Antiques</a></p>
<p><a href="antiques/gasoline-pumps-antiques/reproduction-gasoline-pumps/reproduction-gasoline- pumps-antiques.php" title="Reproduction Gas Pump">Reproduction Gasoline Pumps Antiques</a></p>
<p><a href="antiques/gasoline-pumps-antiques/reproduction-gasoline-pump-parts/reproduction-gaso line-pump-parts-antiques.php" title="Reproduction Gas Pump Parts">Reproduction Gasoline Pump Parts Antiques</a></p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Glass Antiques</div>
<div class="AccordionPanelContent">
<p><a href="antiques/glass-antiques/agata-glass/antique-agata-glass.php" title="Agata Glass">Agata Glass - Antique</a></p>
<p><a href="antiques/glass-antiques/amberina-glass/antique-amberina-glass.php" title="Amberina Glass">Amberina Glass - Antique</a></p>
<p><a href="antiques/glass-antiques/baccarat-glass/antique-baccarat-glass.php" title="Baccarat Glass">Baccarat Glass - Antique</a></p>
<p><a href="antiques/glass-antiques/bohemian-glass/antique-bohemian-glass.php" title="Bohemian Glass">Bohemian Glass - Antique</a></p>
<p><a href="antiques/glass-antiques/bristol-glass/bristol-glass-antiques.php" title="Bristol Glass">Bristol Glass - Antique</a></p>
<p><a href="antiques/glass-antiques/cambridge-glass/antique-cambridge-glass.php" title="Cambridge Glass">Cambridge Glass - Antique</a></p>
<p><a href="antiques/glass-antiques/cameo-glass/antique-cameo-glass.php">Cameo Glass - Antique</a></p>
<p><a href="antiques/glass-antiques/cambridge-glass/antique-cambridge-glass.php" title="Carnival Glass">Carnival Glass - Antique</a></p>
<p><a href="antiques/glass-antiques/cranberry-glass/cranberry-glass-antiques.php" title="Cranberry Glass">Cranberry Glass Antique</a></p>
<p><a href="antiques/glass-antiques/cut-glass/cut-glass-antiques.php" title="Cut Glass">Cut Glass - Antique</a></p>
<p><a href="antiques/glass-antiques/depression-glass/depression-glass-antiques.php" title="Depression Glass">Depression Glass - Antique</a></p>
<p><a href="antiques/glass-antiques/duncan-and-miller-glass/duncan-and-miller-glass-antiques.ph p" title="Duncan and Miller Glass">Duncan and Miller Glass - Antique</a></p>
<p><a href="antiques/glass-antiques/eapg-early-ameCan you please post a example of what your are talking about? Here is another site I am using Spry on and this site works .. http://www.sub-zero-refrigeration.com
I think this is what you are refering too. Please let me know.
""""<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.9.1.min.js" type"text/javascript"></script>
<script type="text/javascript">
window.AgMode = "publish";
cellRolloverColor="#a1a1a1";
cellColor="#c0c0c0";
</script>
</script>""""""
<!DOCTYPE HTML>
<html lang=en><!-- InstanceBegin template="/Templates/cityweather.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="head" -->
<title>Best AC / HVAC / Furnace Repair - Orland Park, Oak Lawn, Tinley Park, Frankfort, Oak Forest, IL </title>
<meta name="description" content="Sub Zero Refrigeration Heating and Air Conditioning is a furnace and AC repair contractor in Orland Park, Oak Lawn, Tinley Park, Oak Forest and Frankfort Il.">
<meta name="keywords" content="Repair, Heating, Air Conditioning, Refrigeration, Furnace, AC, Ice Maker, Ice Machine, Orland Park, Oak Lawn, Tinley Park, Oak Forest, Frankfort, Insatllation,Sales, Maintenance">
<style type="text/css">
body,td,th {
font-size: 100%;
</style>
<style type="text/css">
body {
margin-left: 5px;
margin-right: 5px;
</style>
<meta name="msvalidate.01" content="49FF257D7BCD932B5FFB37AA0138ED93" />
<meta name="msvalidate.01" content="D1F605709ED62957017E2ED7F48A35AF" />
<!-- InstanceEndEditable -->
<meta name="author" content="Ted Wagner" />
<meta name="google-site-verification" content="-iGiLKN5W90OD90NqAgOAjezTufISVwxh5QS9FFlwy0" />
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico" />
<link href="twoColFixLtHdr.css" rel="stylesheet" type="text/css">
<link href="/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<meta name="DC.title" content="Sub Zero Refrigeration Heating and Air Conditioning" />
<meta name="geo.placename" content="3662 147th St, Midlothian, IL 60445, USA" />
<meta name="geo.position" content="41.625766;-87.710394" />
<meta name="geo.region" content="US-IL" />
<meta name="ICBM" content="41.625766, -87.710394" />
<meta name="rating" content="general" />
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.9.1.min.js" type"text/javascript"></script>
<script type="text/javascript">
window.AgMode = "publish";
cellRolloverColor="#a1a1a1";
cellColor="#c0c0c0";
</script>
</script>
<!--[if lt IE 7.]> <script defer type="text/javascript" src="../resources/js/pngfix.js"></script> <![endif]-->
<!--[if gt IE 6]> <link rel="stylesheet" href="../resources/css/ie7.css"></link> <![endif]-->
<!--[if lt IE 7.]> <link rel="stylesheet" href="../resources/css/ie6.css"></link> <![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23232524-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script></head>
<body>
<div class="container">
<div class="header"><img src="/Assets/Images/Subby.gif" width="125" height="190" alt="Sub Zero Refrigeration Heating and Air Conditioning Suburban Chicago Logo"><!-- end .header --><img src="/Assets/Images/HeaderOriginal.jpg" alt="Sub Zero Refrigeration Heating and Air Conditioning Repair Services Chicago Illinois." width="835" height="190" border="0" usemap="#Map2">
<map name="Map2">
<area shape="rect" coords="5,4,827,179" href="/index.html" alt="Sub Zero Refrigeration Heating and Air Conditioning Midlothian Illinois 708-385-2418">
</map>
</div>
<div class="header">
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a href="/airconditioning.html" class="MenuBarItemSubmenu">Cooling</a>
<ul>
<li><a href="/residentialairconditioning.html" class="MenuBarItemSubmenu">Residential Air Conditioning</a>
<ul>
<li><a href="/installac.html">Installation</a></li>
<li><a href="/repairairconditioning.html">Repair</a></li>
<li><a href="/salesairconditioning.html">Sales</a></li>
<li><a href="/maintainac.html">Maintenance</a></li>
<li><a href="/financing.html">Financing</a></li>
</ul>
</li>
<li><a href="/commercial-rooftop-products.html" class="MenuBarItemSubmenu">Commercial Air Conditioning</a>
<ul>
<li><a href="/commercial-rooftop-installation.html">Installation</a></li>
<li><a href="/commercial-rooftop-repair.html">Repair</a></li>
<li><a href="/commercial-rooftop-sales.html">Sales</a></li>
<li><a href="/maintaincommercialrooftop.html">Maintenance</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/heating.html" class="MenuBarItemSubmenu">Heating</a>
<ul>
<li><a href="/residentialheating.html" title="Residential Furnace Products" class="MenuBarItemSubmenu">Residential Heating</a>
<ul>
<li><a href="/furnace-installation.html">Installation</a></li>
<li><a href="/repairfurnace.html">Repair</a></li>
<li><a href="/salesfurnace.html">Sales</a></li>
<li><a href="/maintainfurnace.html">Maintenance</a></li>
<li><a href="/financing.html">Financing</a></li>
</ul>
</li>
<li><a href="/heat-pump-products.html" class="MenuBarItemSubmenu">Residential Heat Pump</a>
<ul>
<li><a href="/heat-pump-installation.html">Installation</a></li>
<li><a href="/repairheatpump.html">Repair</a></li>
<li><a href="/salesheatpump.html">Sales</a></li>
<li><a href="/maintainheatpump.html">Maintenance</a></li>
<li><a href="/financing.html">Financing</a></li>
</ul>
</li>
<li><a href="/commercial-rooftop-products.html" class="MenuBarItemSubmenu">Commercial Heating</a>
<ul>
<li><a href="/commercial-rooftop-installation.html">Installation</a></li>
<li><a href="/commercial-rooftop-repair.html">Repair</a></li>
<li><a href="/commercial-rooftop-sales.html">Sales</a></li>
<li><a href="/commercial-rooftop-maintenance.html">Maintenance</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/refrigeration.html" class="MenuBarItemSubmenu">Refrigeration</a>
<ul>
<li><a href="/walk-in-cooler-products.html" class="MenuBarItemSubmenu">Walk In Cooler</a>
<ul>
<li><a href="/walk-in-cooler-installation.html">Installation</a></li>
<li><a href="/walk-in-cooler-repair.html">Repair </a></li>
<li><a href="/walk-in-cooler-sales.html">Sales</a></li>
<li><a href="/walk-in-cooler-maintenance.html">Maintenance</a></li>
</ul>
</li>
<li><a href="/walk-in-freezer-products.html" class="MenuBarItemSubmenu">Walk In Freezer</a>
<ul>
<li><a href="/walk-in-freezer-installation.html">Installation</a></li>
<li><a href="/walk-in-freezer-repair.html">Repair</a></li>
<li><a href="/walk-in-freezer-sales.html">Sales</a></li>
<li><a href="/walk-in-freezer-maintenance.html">Maintenance</a></li>
</ul>
</li>
<li><a href="/reach-in-cooler-products.html" class="MenuBarItemSubmenu">Reach In Cooler </a>
<ul>
<li><a href="/reach-in-cooler-installation.html">Installation</a></li>
<li><a href="/reach-in-cooler-repair.html">Repair</a></li>
<li><a href="/reach-in-cooler-sales.html">Sales</a></li>
<li><a href="/reach-in-cooler-maintenance.html">Maintenance</a></li>
</ul>
</li>
<li><a href="/reach-in-freezer-products.html" class="MenuBarItemSubmenu">Reach In Freezer</a>
<ul>
<li><a href="/reach-in-freezer-installation.html">Installation</a></li>
<li><a href="/reach-in-freezer-repair.html">Repair</a></li>
<li><a href="/reach-in-freezer-sales.html">Sales</a></li>
<li><a href="/reach-in-freezer-maintenance.html">Maintenance</a></li>
</ul>
</li>
<li><a href="/floral-cooler-products.html" class="MenuBarItemSubmenu">Floral Cooler</a>
<ul>
<li><a href="/floral-cooler-installation.html">Installation</a></li>
<li><a href="/floral-cooler-repair.html">Repair</a></li>
<li><a href="/floral-cooler-sales.html">Sales</a></li>
<li><a href="/floral-cooler-maintenance.html">Maintenance</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/icemachine.html" class="MenuBarItemSubmenu">Ice Maker</a>
<ul>
<li><a href="/hoshizakiicemachines.html" class="MenuBarItemSubmenu">Hoshizaki Ice Machine</a>
<ul>
<li><a href="/hoshizaki-ice-machine-installation.html">Installation</a></li>
<li><a href="/hoshizaki-ice-machine-repair.html">Repair</a></li>
<li><a href="/hoshizaki-ice-machine-sales.html">Sales</a></li>
<li><a href="/hoshizaki-ice-machine-maintenance.html">Maintenance</a></li>
</ul>
</li>
<li><a href="/manitowocicemachine.html" class="MenuBarItemSubmenu">Manitowoc Ice Machine</a>
<ul>
<li><a href="/manitowoc-ice-machine-installation.html">Installation</a></li>
<li><a href="/manitowoc-ice-machine-repair.html">Repair</a></li>
<li><a href="/manitowoc-ice-machine-sales.html">Sales</a></li>
<li><a href="/manitowoc-ice-machine-maintenance.html">Maintenance</a></li>
</ul>
</li>
<li><a href="/scotsmanicemachines.html" class="MenuBarItemSubmenu">Scotsman Ice Machine</a>
<ul>
<li><a href="/scotsman-ice-machine-installation.html">Installation</a></li>
<li><a href="/scotsman-ice-machine-repair.html">Repair</a></li>
<li><a href="/scotsman-ice-machine-sales.html">Sales</a></li>
<li><a href="/scotsman-ice-machine-maintenance.html">Maintenance</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/iaq.html" class="MenuBarItemSubmenu"> Air Quality</a>
<ul>
<li><a href="/iaqeac.html">Electronic Air Cleaner</a></li>
<li><a href="/iaqaprilairehumidifier.html">Humidifier</a></li>
<li><a href="/iaquvlights.html">UV Germicidal Lights</a></li>
</ul>
</li>
<li><a href="/jobphotos.html" class="MenuBarItemSubmenu">Job Photos</a>
<ul>
<li><a href="/jobphotoscommercialrooftop.html">Commercial Rooftop Heating and Air Conditioning Photos</a></li>
<li><a href="/jobphotoscommercialrefrigeration.html">Commercial Refrigeration Photos</a></li>
<li><a href="/jobphotoscommercialicemachine.html">Commercial Ice Machine Photos</a></li>
<li><a href="/jobphotosairconditioning.html">Residential Air Conditioning Photos</a></li>
<li><a href="/jobphotosfurnace.html">Residential Heating Photos</a></li>
<li><a href="/jobphotosnaturalgasairconditioning.html">Natural Gas Air Conditioning Photos</a></li>
<li><a href="/jobphotosmitsubishimrslim.html">Mitsubishi Mr Slim Ductless Heating and Ductless Air Conditioner Job Photos</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Boiler Photos</a>
<ul>
<li><a href="/jobphotoscommercialboiler.html">Commercial Boiler Photos</a></li>
<li><a href="/jobphotosresidentialboiler.html">Residential Boiler Photos</a></li>
</ul>
</li>
<li><a href="/jobphotosheatpump.html">Heat Pump Photos</a></li>
<li><a href="/jobphotosindoorairquality.html">Indoor Air Quality Photos</a></li>
<li><a href="/jobphotossheetmetalonsite.html">Sheet Metal Made On-Site Job Photos</a></li>
<li><a href="/jobphotoscranelift.html">Crane Lift Job Photos</a></li>
<li><a href="/otherphotos.html">Other Miscellaneous Sub Zero Refrigeration Photos</a></li>
<li><a href="/Assets/Videos/videos.html">Sub Zero Refrigeration Heating and Air Conditioning Videos</a></li>
</ul>
</li>
<li><a href="/savings.html" class="MenuBarItemSubmenu">Savings</a>
<ul>
<li><a href="/monthlyspecials.html">Monthly Specials</a></li>
<li><a href="/rebate.html">Manufacturers Rebates</a></li>
<li><a href="/furnacerebates.html" class="MenuBarItemSubmenu">Utility Company Rebates</a>
<ul>
<li><a href="/comed.html">Com Ed</a></li>
<li><a href="/nicor.html">Nicor</a></li>
</ul>
</li>
<li><a href="/websitecoupons.html">Website Coupons</a></li>
</ul>
</li>
<li><a href="/aboutus.html" class="MenuBarItemSubmenu">About Us</a>
<ul>
<li><a href="/chicago-service-area.html">Our Service Area</a></li>
<li><a href="/ourmissionstatement.html">Our Mission Statement</a></li>
<li><a href="/ourfamily.html">Our Family</a></li>
<li><a href="/employees.html" class="MenuBarItemSubmenu">Our Staff</a>
<ul>
<li><a href="/budwagner.html">Bud Wagner</a></li>
<li><a href="/timwagner.html">Tim Wagner</a></li>
<li><a href="/daveallen.html">Dave Allen</a></li>
<li><a href="/larryskarr.html">Larry Skarr</a></li>
<li><a href="/terryburke.html">Terry Burke</a></li>
<li><a href="/nikooplt.html">Niko Oplt</a></li>
<li><a href="/ginaames.html">Gina Ames</a></li>
<li><a href="/laurakane.html">Laura Kane</a></li>
</ul>
</li>
<li><a href="/whychoosesubzero.html" class="MenuBarItemSubmenu">Why Choose Sub Zero Refrigeration?</a>
<ul>
<li><a href="/ourreviews.html">Our Reviews and Testimonials</a></li>
<li><a href="/ourcompetitionsreviews.html">Some of Our Competitions Reviews</a></li>
<li><a href="/americanstandardcustomercaredealer.html">American Standard Customer Care Dealer</a></li>
<li><a href="/customersurveys.html">American Standard Customer Satisfaction Surveys</a></li>
<li><a href="/betterbusinessbureau.html">The Better Business Bureau</a></li>
</ul>
</li>
<li><a href="/hvac-careers.html" class="MenuBarItemSubmenu">HVACR Careers</a>
<ul>
<li><a href="/hvac-technician-jobs.html">HVAC Technician</a></li>
<li><a href="/hvac-installer-jobs.html">HVAC/R Technician</a></li>
<li><a href="/hvacr-installer-jobs.html">HVAC/R Installer</a></li>
<li><a href="/hvac-sales-jobs.html">HVAC/R Sales</a></li>
<li><a href="/hvacr-jobs.html">Commercial Refrigeration Technician</a></li>
</ul>
</li>
<li><a href="/helpfullinks.html">Helpful Links</a></li>
<li><a href="/favorite-sites.html">Our Favorite Websites</a></li>
<li><a href="/easilyleaveusareview.html" class="MenuBarItemSubmenu">Easily Leave Us a Review</a>
<ul>
<li><a href="http://local.yahoo.com/info-84317831-sub-zero-refrigeration-midlothian" target="_blank">On "Yahoo Local"</a></li> <li><a href="http://www.yelp.com/biz/sub-zero-refrigeration-midlothian-2" target="_blank">On "Yelp"</a></li>
<li><a href="http://www.merchantcircle.com/business/Sub.Zero.Refrigeration.708-385-2418" target="_blank">On "Merchant Circle"</a></li>
<li><a href="https://plus.google.com/108215910665703095824/about?gl=us&hl=en" target="_new">On "Google Places"</a></li>
<li><a href="http://www.bing.com/local/details.aspx?lid=YN270x5360008" target="_blank">On "Bing"</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/contactus.html">Contact </a></li>
</ul></div>
<table width="952" border="1" cellspacing="5">
<tr>
<th colspan="2" scope="col"><table width="942" border="1" align="center" cellspacing="5">
<tr>
<td><div align="center"><a href="/repairairconditioning.html"><img src="/Assets/Images/air-conditioner-repair.jpg" width="85" height="103" alt="Air Conditioning Repair Orland Park, Oak Lawn, Tinley Park, Oak Forest, Frankfort, IL"></a></div></td>
<td><div align="center"><a href="/repairfurnace.html"><img src="/Assets/Images/furnace-repair.jpg" width="85" height="103" alt="Furnace Repair by Sub Zero Refrigeration"></a></div></td>
<td><div align="center"><a href="/repairheatpump.html"><img src="/Assets/Images/heat-pump-repair.jpg" width="85" height="103" alt="Heat Pump Repair by Sub Zero Refrigeration"></a></div></td>
<td><div align="center"><a href="/repairiaq.html"><img src="/Assets/Images/humidifier-repair.jpg" width="103" height="103" alt="Humidifier Repair by Sub Zero Refrigeration"></a></div></td>
<td><div align="center"><a href="/schedule-a-free-estimate.html"><img src="/Assets/Images/estimate_1.png" width="158" height="85" alt="Schedule a Free Estimate Online for Sub Zero Refrigeration"></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="/repairairconditioning.html">Air Conditioning Repair</a></div></td>
<td><div align="center"><a href="/repairfurnace.html">Heating Repair</a></div></td>
<td><div align="center"><a href="/repairheatpump.html">Heat Pump Repair</a></div></td>
<td><div align="center"><a href="/repairiaq.html">Humidifier Repair</a></div></td>
<td><div align="center"><a href="/schedule-a-free-estimate.html">Schedule Estimate</a></div></td>
</tr>
<tr>
<td><div align="center"><a href="/repairrooftop.html"><img src="/Assets/Images/commercial-rooftop-air-conditioning-repair.jpg" width="141" height="103" alt="Commercial Air Conditioning Repair by Sub Zero Refrigeration"></a></div></td>
<td><div align="center"><a href="/refrigeration-repair.html"><img src="/Assets/Images/refrigeration-repair.jpg" width="103" height="103" alt="Commercial Refrgeration Repair by Sub Zero Refrigeration"></a></div></td>
<td><div align="center"><a href="/commercial-ice-maker-repair.html"><img src="/Assets/Images/ice-machine-repair.jpg" width="103" height="103" alt="Commercial Ice Maker Repair by Sub Zero Refrigeration"></a></div></td>
<td><div align="center"><a href="/walk-in-cooler-repair.html"><img src="/Assets/Images/Beer_Cave_Booth.jpg" width="150" height="100" alt="Commercial Walk in Cooler Repair by Sub Zero Refrigeration"></a></div></td>
<td><div align="center"><a href="/schedule-a-free-estimate.html"><img src="/Assets/Images/service_1.png" alt="Schedule a Service Call online for Sub Zero Refrigeration" width="105" height="90"></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="/repairrooftop.html">Commercial AC Repair</a></div></td>
<td><div align="center"><a href="/refrigeration-repair.html">Refrigeration Repair</a></div></td>
<td><div align="center"><a href="/commercial-ice-maker-repair.html">Ice Maker Repair</a></div></td>
<td><div align="center"><a href="/walk-in-cooler-repair.html">Walk in Cooler Repair</a>
</div></td>
<td><div align="center"><a href="/sales.html">Schedule Service</a></div></td>
</tr>
</table></th>
</tr>
</table>
<!-- InstanceBeginEditable name="Main Content" -->
<table width="940" border="1" align="right" cellpadding="5" cellspacing="4">
<tr>
<td colspan="2" scope="col"><h1>Sub Zero Refrigeration Heating and Air Conditioning serving Orland Park, Oak Lawn, Tinley Park, Frankfort, Oak Forest, Midlothian and surrounding areas.</h1>
<h3>Sub Zero Refrigeration Heating and Air Conditioning has been family owned and operated for over 40 years. We like to think of ourselves as one of the best heating and air conditioning contractors in Chicago.</h3>
<h2><strong>Sub Zero Refrigeration <a href="repairfurnace.html">Heating Repair</a> and <a href="repairairconditioning.html">Air Conditioning Repair</a></strong></h2>
<p>Sub Zero Refrigeration is a full service Refrigeration Heating and Air Conditioning or HVAC repair company providing quality workmanship and superb customer service. Sub Zero offers you the best in heating repair, air conditioning repair, refrigeration and HVAC services to include: installation, repair, sales and maintenance of all major refrigeration, AC and heating equipment and indoor air quality products. We are a local Chicago heating and air conditioning, commercial refrigeration, service and repair company large enough to get the job done and small enough for you to know we care about our commercial and residential customers. Our central location of <a href="../midlothian.html">Midlothian</a> Illinois allows us to provide fast reliable repair service to all of the <a href="ourservicearea.html">Chicago Suburban cities</a> and towns such as <a href="../orlandpark.html">Orland Park</a>, <a href="../oaklawn.html">Oak Lawn</a>, <a href="../tinleypark.html">Tinley Park</a>, <a href="frankfort.html">Frankfort IL</a>, <a href="../oakforest.html">Oak Forest</a>, <a href="../newlenox.html">New Lenox</a> and <a href="ourservicearea.html">surrounding communities</a>.</p></td>
</tr>
<tr>
<td colspan="2" scope="col"> </td>
</tr>
<tr>
<td width="649" scope="col"><h2><strong><a href="repairairconditioning.html">Air Conditioning Repair Service</a></strong></h2>
<p>Sub Zero Refrigeration Heating and Air Conditioning is a <a href="repairairconditioning.html">full service air conditioning repair</a> company providing <a href="repairrooftop.html">commercial</a> and <a href="repairairconditioning.html">residential service</a>, <a href="installac.html">installation</a>, <a href="repairairconditioning.html">repair</a>, <a href="salesairconditioning.html">sales</a> and <a href="maintainac.html">maintenance</a> to <a href="ourservicearea.html">Suburban Chicago towns</a> including <a href="alsip.html">Alsip</a>, <a href="burbank.html">Burbank IL</a>, <a href="burrridge.html">Burr Ridge</a>, <a href="chicagoridge.html">Chicago Ridge</a>, <a href="countryside.html">Countryside</a> and <a href="ourservicearea.html">surrounding communities</a>.<br>
Read More>> <a href="repairairconditioning.html">AC Repair Service</a></p></td>
<th width="285" valign="top" scope="col"><div align="center">
<p><a href="repairairconditioning.html"><img src="/Assets/Images/air-conditioning-repair-services.png" width="270" height="200" alt="Air Conditioning Repair Services"></a></p>
<p><a href="repairairconditioning.html">Air Conditioning Repair Service</a></p>
</div></th>
</tr>
<tr>
<td scope="col"><h2><strong><a href="repairfurnace.html">Heating Repair Service</a></strong></h2>
<p>Sub Zero Refrigeration Heating and Air Conditioning is a full service <a href="repairfurnace.html">heating repair</a> or <a href="repairfurnace.html">furnace repair</a> company providing <a href="commercial-rooftop-repair.html">commercial HVAC repair</a> and <a href="repair.html">residential HVAC service</a>, <a href="furnace-installation.html">installation</a>, <a href="repairfurnace.html">repair</a>, <a href="salesfurnace.html">sales</a> and <a href="maintainfurnace.html">maintenance</a> to <a href="ourservicearea.html">Suburban Chicago towns</a> including <a href="crestwood.html">Crestwood</a>, <a href="darien.html">Darien</a>, <a href="evergreenpark.html">Evergreen Park</a>, <a href="flossmoor.html">Flossmoor</a>, <a href="frankfort.html">Frankfort IL</a> and <a href="ourservicearea.html">surrounding communities</a>.<br>
Read More>> <a href="repairfurnace.html">Heating Repair Service</a></p></td>
<th valign="top" scope="col"><div align="center">
<p><a href="repairfurnace.html"><img src="/Assets/Images/heating-repair-services.png" width="270" height="200" alt="Heating Repair Services"></a></p>
<p><a href="repairfurnace.html">Heating Repair Service</a></p>
</div></th>
</tr>
<tr>
<td scope="col"><h2><strong><a href="walk-in-cooler-repair.html">Commercial Refrigeration Repair Service</a></strong></h2>
<p>Sub Zero Refrigeration Heating and Air Conditioning is a full service <a href="refrigeration-repair.html">refrigeration repair</a> company providing <a href="refrigeration-repair.html">service</a>, <a href="refrigeration.html">installation</a>, <a href="refrigeration-repair.html">repair</a>, <a href="refrigeration-sales.html">sales</a> and <a href="maintaincommercialrefrig.html">maintenance</a> to <a href="ourservicearea.html">Suburban Chicago towns</a> including <a href="hickoryhills.html">Hickory Hills</a>, <a href="hinsdale.html">Hinsdale</a>, <a href="homerglen.html">Homer Glen</a>, <a href="homerglen.html">Goodings</a>, <a href="hometown.html">Hometown</a>, <a href="homewood.html">Homewood</a> and <a href="ourservicearea.html">surrounding communities</a>. <br>
Read More>> <a href="/refrigeration-repair.html">Commercial Refrigeration Repair Service</a></p></td>
<th valign="top" scope="col"><div align="center">
<p><img src="/commercial-refrigeration-repair.png" width="270" height="200" alt="Commercial Refrieration Repair"></p>
<p><a href="/refrigeration-repair.html"> Refrigeration Repair Service</a></p>
</div></th>
</tr>
<tr>
<td scope="col"><h2><strong><a href="iaqaprilairehumidifier.html">Humidifier Repair Service</a></strong></h2>
<p>Sub Zero Refrigeration Heating and Air Conditioning is a factory authorize Trane, Honeywell and Aprilaire sales, <a href="iaqaprilairehumidifier.html">installation</a> and <a href="iaqaprilairehumidifier.html">service company</a> in the <a href="ourservicearea.html">Suburban Chicago</a> towns including <a href="lagrange.html">La Grange</a>, <a href="lagrangepark.html">La Grange Park</a>, <a href="lemont.html">Lemont</a>, <a href="lockport.html">Lockport</a>, <a href="manhattan.html">Manhattan IL</a>, <a href="midlothian.html">Midlothian</a>, <a href="mokena.html">Mokena</a>, <a href="monee.html">Monee</a> and surrounding <a href="chicago.html">Chicago</a> <a href="ourservicearea.html">communities.</a><br>
Read More>> <a href="iaqaprilairehumidifier.html">Humidifier Repair Service</a></p></td>
<th valign="top" scope="col"><div align="center">
<p><a href="repairairconditioning.html"><img src="http://www.sub-zero-refrigeration.com/Assets/Images/humidifier-repair.jpg" alt="Humidifier Repair by Sub Zero Refrigeration" height="250" width="250"></a></p>
<p><a href="iaqaprilairehumidifier.html">Humidifier Repair Service</a></p>
</div></th>
</tr>
<tr>
<td scope="col"><h2><strong><a href="walk-in-cooler-repair.html">Walk in Cooler Repair Service</a></strong> <a href="walk-in-freezer-repair.html"><strong>Walk in Freezer Repair Service</strong></a></h2>
<p>Sub Zero Refrigeration Heating and Air Conditioning is a <a href="walk-in-cooler-repair.html">full service walk in cooler and freezer repair</a> company providing <a href="repairrooftop.html">commercial service</a>, <a href="walk-in-cooler-repair.html">installation</a>, <a href="repairairconditioning.html">repair</a>, <a href="walk-in-cooler-sales.html">sales</a> and <a href="walk-in-freezer-maintenance.html">maintenance</a> to <a href="ourservicearea.html">Suburban Chicago towns</a> including <a href="newlenox.html">New Lenox</a>, <a href="oakforest.html">Oak Forest</a>, <a href="oaklawn.html">Oak Lawn</a>, <a href="orlandhills.html">Orland Hills</a>, <a href="orlandpark.html">Orland Park</a>, <a href="palosheights.html">Palos Heights</a>, <a href="paloshills.html">Palos Hills</a> and <a href="ourservicearea.html">surrounding communities.</a><br>
Read More>> <a href="walk-in-cooler-repair.html">Walk in Cooler Repair Service</a> <a href="walk-in-freezer-repair.html">Walk in Freezer Repair Service</a></p></td>
<th valign="top" scope="col"><div align="center">
<p><a href="repairairconditioning.html"><img src="/Assets/Images/nikohome.png" width="270" height="145" alt="Air Conditioning Repair Services"></a></p>
<p><a href="walk-in-cooler-repair.html">Walk in Cooler Repair Service</a></p>
<p><a href="walk-in-freezer-repair.html">Walk in Freezer Repair Service </a></p>
</div></th>
</tr>
<tr>
<td scope="col"><p><a href="reach-in-cooler-repair.html"><strong>Commercial Refrigerator Repair</strong></a><strong> and <a href="reach-in-freezer-repair.html">Commercial Freezer Repair </a></strong><a href="reach-in-freezer-repair.html"></a><br>
Sub Zero Refrigeration Heating and Air Conditioning is a <a href="repairairconditioning.html">full service refrigeration repair</a> company providing <a href="reach-in-cooler-repair.html">reach in cooler service</a> and <a href="reach-in-freezer-repair.html">reach in freezer service</a>, <a href="reach-in-freezer-installation.html">reach in installation</a>, <a href="reach-in-freezer-repair.html">reach in repair</a>, <a href="reach-in-cooler-sales.html">reach in sales</a> and <a href="reach-in-cooler-maintenance.html">reach in maintenance</a> to Suburban <a href="chicago.html">Chicago</a> towns including <a href="palospark.html">Palos Park</a>, <a href="peotone.html">Peotone</a>, <a href="steger.html">Steger</a>, <a href="tinleypark.html">Tinley Park</a>, <a href="willowsprings.html">Willow Springs</a>, Willowbrook, <a href="worth.html">Worth</a> and <a href="ourreviews.html">surrounding communities</a>.<br>
Read More>> <a href="repairairconditioning.html"></a><a href="reach-in-cooler-repair.html">Commercial Refrigerator Repair</a> and <a href="reach-in-freezer-repair.html">Commercial Freezer Repair </a></p></td>
<th valign="top" scope="col"><div align="center">
<p><a href="repairairconditioning.html"><img src="/Assets/Images/DSCF0092.png" width="243" height="177" alt="Air Conditioning Repair Services"></a></p>
<p><a href="walk-in-cooler-repair.html">Commercial Refigeration Repair Service</a></p>
</div></th>
</tr>
<tr>
<td colspan="2" scope="col"><p>Blog Updates Coming Soon.</p></td>
</tr>
</table>
<tr>
<td width="809"><!-- InstanceEndEditable -->
<!-- end .content -->
<!--Page Footer-->
<div align="left" class="footerblue" id="footer"> </div>
<div align="center" class="footerblue" id="footer">
<table width="900" border="0" align="center" cellpadding="5" cellspacing="3" bgcolor="#B7E4EA" id="background_blue">
<tr align="center" class="background_blue" style="text-align: center;">
<td valign="middle" class="table_blue_background" id="background_blue" scope="col"><p align="center" class="background_blue"><a href="/schedule-a-free-estimate.html"><img src="/Assets/Images/service_1.png" alt="Schedule a Service Call online for Sub Zero Refrigeration" width="105" height="85"></a></a></td>
<td valign="middle" class="table_blue_background" id="background_blue" scope="col"><p align="center" class="background_blue"><a href="https://www.facebook.com/subzerorefrig" target="_new"><img src="/Assets/Images/facebook.png" alt="Find us on Facebook Sub Zero Refrigeration " name="background_blue2" width="100" height="100" id="background_blue2" /></a></p></td>
<td id="background_blue" scope="col"><a href="http://www.twitter.com/subzerorefrig" target="_new"><img src="/Assets/Images/twitter_follow.gif" alt="Follow us on Twitter Sub Zero Refrigeration" width="89" height="45" border="0" class="background_blue" /></a></td>
<td id="background_blue" scope="col"><div align="center"><a href="http://www.youtube.com/user/mrsubzerorefrig" target="_new"><img src="/Assets/Images/you-tube.jpg" width="75" height="75" alt="Watch us on YouTube Sub Zero Refrigeration" longdesc="http://www.youtube.com/mrsubzerorefrig"></a></div></td>
<td id="background_blue" scope="col"><div align="center"><a href="https://plus.google.com/108215910665703095824/about?gl=us&hl=en" target="_new"><img src="/Assets/Images/google+.png" width="100" height="100" alt="Review Us on Google Plus Sub Zero Refrigeration " longdesc="https://plus.google.com/u/0/108598412013907889976/posts"></a></div></td>
<td id="background_blue" scope="col"><div align="center"><a href="http://www.bbb.org/chicago/business-reviews/heating-and-air-conditioning/sub-zero-refriger ation-in-midlothian-il-7695" target="_new"><img src="/Assets/Images/BBB.png" width="133" height="75" alt=" Sub Zero Refrigeration and Chicago Better Business Bureau"></a></div></td>
<td id="background_blue" scope="col"><div align="center"><a href="/schedule-a-free-estimate.html"><img src="/Assets/Images/estimate_1.png" width="158" height="85" alt="Schedule a Free Estimate Online for Sub Zero Refrigeration"></a></a></div></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="footerblue">
<tr>
<th class="footerblue" style="font-family: Arial, Helvetica, sans-serif" scope="col"><div align="left"><span class="footer"><img src="/Assets/Images/truck.jpg" alt="Sub Zero Refrigeration Heating and Air Conditioning Chicago" width="240" height="109" align="left"></span><span class="footerblue" style="font-family: Arial, Helvetica, sans-serif"><span class="footer"><img src="/Assets/Images/footer_right.jpg" alt="Sub Zero Refrigeration Heating and Air Conditioning" width="717" height="109" align="left"></span></span>
</div>
<p class="footer">QUICK LINKS</p>
<p class="footer"><a href="/index.html" >Home</a> | <a href="/financing.html">Financing</a> | <a href="/aboutus.html">About Us</a> | <a href="/repair.html" >Repair</a> | <a href="/sales.html" >Sales</a> | <a href="/maintain.html" >Maintenance</a> | <a href="/products.html" >Products</a> | <a href="/jobphotos.html" >Our Job Photos</a> | <a href="/savings.html" >Cool Savings</a> | <a href="/social.html" target="_new">Social</a> | <a href="/contactus.html" >Contact Us</a> | <a href="/schedule-a-free-estimate.html" >Schedule Free New Equipment Estimate</a> | <a href="/schedule-a-free-estimate.html">Schedule Service</a><br>
<a href="/repairairconditioning.html">Air Conditioning Repair</a> | <a href="/repairfurnace.html" >Heating Repair</a> | <a href="repairheatpump.html">Heat Pump Repair</a> | <a href="/repairiaq.html" >Humidifier Repair</a><br>
<a href="/repairrooftop.html">Commercial Air Conditioning Repair</a> | <a href="/refrigeration-repair.html" >Refrigeration Repair</a> | <a href="/commercial-ice-maker-repair.html" > Ice Maker Repair</a> | <a href="/walk-in-cooler-repair.html">Walk In Cooler Repair</a><br />
</p>
<div>
<div align="center">
</div>
<address align="center" class="footer">Sub Zero Refrigeration is located at 3662 147th St. Midlothian, Illinois 60445</address> <p align="center" class= "footer"> Our suburban Chicago refrigeration heating and air conditioning repair service provides professional service throughout <a href="/orlandpark.html">Orland Park</a> | <a href="/oaklawn.html">Oak Lawn</a> | <a href="/tinleypark.html">Tinley Park</a> | <a href="/oakforest.html">Oak Forest</a> | <a href="/frankfort.html">Frankfort, IL</a> | <a href="newlenox.html">New Lenox</a> and <a href="/ourservicearea.html">The Suburbs</a>. Read our<a href="https://plus.google.com/108215910665703095824/about?gl=us&hl=en" target="_new"> Reviews on Google+ Local</a>, <a href="http://bit.ly/ND2dsc" target="_new">Yelp Reviews</a>, <a href="http://bit.ly/LDEY6c" target="_new">Insider Pages</a>, and <a href="http://bit.ly/MUC9eG">Chicago City Search Reviews</a>, on-line. Come visit our office in <a href="/midlothian.html">Midlothian, IL.</a> <br>
<a href="alsip.html">Alsip Refrigeration and Ice Machines</a> <a href="burbank.html">Burbank Refrigeration and Ice Machines</a> <a href="burrridge.html">Burr Ridge Refrigeration and Ice Machines</a> <a href="chicagoridge.html">Chicago Ridge Refrigeration and Ice Machines</a> <a href="countryside.html">Countryside Refrigeration and Ice Machines</a> <a href="crestwood.html">Crestwood Refrigeration and Ice Machines</a> <a href="darien.html">Darien Refrigeration and Ice Machines</a> <a href="evergreenpark.html">Evergreen Park Refrigeration and Ice Machines</a> <a href="flossmoor.html">Flossmoor Refrigeration and Ice Machines</a> <a href="frankfort.html">Frankfort Refrigeration and Ice Machines</a> <a href="hickoryhills.html">Hickory Hills Refrigeration and Ice Machines</a> <a href="hinsdale.html">Hinsdale Refrigeration and Ice Machines</a> <a href="homerglen.html">Homer Glen Refrigeration and Ice Machines</a> <a href="homerglen.html">Goodings Refrigeration and Ice Machines</a> <a href="hometown.html">Hometown Refrigeration and Ice Machines</a> <a href="homewood.html">Homewood Refrigeration and Ice Machines</a> <a href="lagrange.html">La Grange Refrigeration and Ice Machines</a> <a href="lagrangepark.html">La Grange Park Refrigeration and Ice Machines</a> <a href="lemont.html">Lemont Refrigeration and Ice Machines</a> <a href="lockport.html">Lockport Refrigeration and Ice Machines</a> <a href="manhattan.html">Manhattan IL Refrigeration and Ice Machines</a> <a href="midlothian.html">Midlothian IL Refrigeration and Ice Machines</a> <a href="mokena.html">Mokena Refrigeration and Ice Machines</a> <a href="monee.html">Monee Refrigeration and Ice Machines</a> <a href="newlenox.html">New Lenox Refrigeration and Ice Machines</a> <a href="oakforest.html">Oak Forest Refrigeration and Ice Machines</a> <a href="oaklawn.html">Oak Lawn Refrigeration and Ice Machines</a> <a href="orlandhills.html">Orland Hills Refrigeration and Ice Machines</a> <a href="orlandpark.html">Orland Park Refrigeration and Ice Machines</a> <a href="palosheights.html">Palos Heights Refrigeration and Ice Machines</a> <a href="paloshills.html">Palos Hills Refrigeration and Ice Machines</a> <a href="palospark.html">Palos Park Refrigeration T</a><a href="tinleypark.html">inley Park Refrigeration and Ice Machines</a> <a href="willowsprings.html">Willow Springs Refrigeration and Ice Machine </a> <a href="willowbrook.html">Willowbrook Refrigeration and Ice Machines</a> <a href="worth.html">Worth Refrigeration and Ice Machines</a></p>
<p align="center" class="footer">2012© Sub Zero Refrigeration - Last Day Updated -
<!-- #BeginDate format:Am1 -->February 18, 2013<!-- #EndDate -->
<a href="/sitemap.xml">Site Map</a> | <a href="sub-zero-news.html">Sub Zero Refrigeration in the NEWS</a>
<p align="center" class="footer">Web-master Ted Wagner - Web designer Cherie White Cachampis</div></p></th>
</table>
<script type="text/javascript">
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</div>
<!-- end .footer -->
</div>
<!-- end .container -->
</body>
<!-- InstanceEnd --></html> -
What replaces the CS6 spry menu bar in dreamweaver creative cloud 2014?
Hi,
Previously I used Dreamweaver CS6 and the spry menu bar widget (horizontal). I do not see this in Dreamweaver CC 2014. I am looking around in the Insert Panel (jQuery UI) but don't think a spry menu bar equivalent is listed.
Is there such an equivalent built into Dreamweaver CC 2014?Basic CSS drop-menu
CSS Menu - JSFiddle
Advanced drop-menu with CSS gradients & transitions
CSS Horizontal Drop-Menu - JSFiddle
PVII's Pop-Menu Magic3 (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
Responsive Iconic
http://www.dynamicdrive.com/style/csslibrary/item/responsive_iconic_menu/
Responsive Hybrid
http://www.dynamicdrive.com/dynamicindex1/responsivehybridmenu/index.html
Nancy O. -
Spry menu problem - CS6 Dreamweaver
I wonder if anyone can help me with my spry menu problem which I have with a fixed 960px wide horizonal menu bar that has 8 items in it. The sub-menus don't seem to display properly when you click on them in that some of the submenus only show up at the end of the menu bar itself in Explorer browsers 8/9. Does anyone know of any code I can apply to fix this problem? I am new to spry menu features and so any help would be very much appreciated.
Also validate the rest of the code in your pages to see if you have any critical errors that need fixing. For example, a missing doc type declaration might explain Spry failures.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
As an FYI, Adobe abandonded the Spry Framework late last year, after CS6 was released because Spry drop-menus don't hold up well on touch screen devices. If you can't get satisfaction with Spry, try jQuery Superfish. It's a better menu system.
http://users.tpg.com.au/j_birch/plugins/superfish/
Nancy O. -
How do I keep the Spry menu fixed to the bottom of the header div?
I have created a horizontal Spry menu bar using Dreamweaver CS4 but the problem is, I can't figure out how to make it be in the right position at the bottom of the header div. In Design View it is too far below the header background graphic, in Live View it cuts off the bottom of the header graphic, and it also looks higher or lower in Safari and Firefox.
I'm sure it's very simple, but how can I control them menu on the y-axis and keep the menu fixed to the bottom of the header div? Is there a way to float it to the bottom?
I really appreciate any help or advice anyone can give me on how to get a stationary menu bar.Below is an example of a fixed-header & footer layout with jQuery smooth scrolling. I did not use a separate scrolling div because mobile users have lots of trouble with them.
View source to see the code.
http://alt-web.com/TEMPLATES/FixedLayout.shtml
You need 4 basic things:
jQuery latest core library,
jQuery easing.js,
jQuery anchor.js, inside the <head> of your document
jQuery function code, near the bottom of your document.
That's all there is to it.
Nancy O. -
Missing Spry Menu Tab on CS5 using an iMac (only 2 computers cannot see it)
I am using Dreamweaver CS5 on iMacs in my classroom. Two students are not able to see the blue Spry Menu Bar tab. Is there something that needs to be selected in order for them to see it? I thought maybe they missed a step so we followed our book and recreated the Menu Bar on another page. Once the menu bar is complete and you click off, the blue Spry Menu Tab is not available. Any suggestions would be greatly appreciated.
Hello,
even if there are only two students with these problems, you should follow Ken's hint. One of my most important arguments: "Spry doesn't work correctly on touch screens!" Please try it, you will have a nasty surprise!
And here I quote from different contributions of the forum:
"Spry has been deprecated and is no longer officially supported by Adobe", “Adobe abandoned Spry late last year after CS6 came out. Future products will probably not contain any Spry so learning to use jQuery is a valuable skill to have for the future. We/I recommend you switch to a jQuery library for your further requirements."
Examples
http://users.tpg.com.au/j_birch/plugins/superfish/examples/
http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/
http://craigsworks.com/projects/simpletip/
http://calebjacob.com/tooltipster/
http://www.solutions4website.com/Extensions/nova_dropdown_menu.aspx
Tutorials:
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
http://try.jquery.com/
http://learn.jquery.com/
https://tutsplus.com/course/30-days-to-learn-jquery/
http://www.w3schools.com/jquery/
If you have a budget to work with, get PVII's Pop-Menu Magic2.
http://www.projectseven.com/products/menusystems/pmm2/
Hans-Günter
Maybe you are looking for
-
How to add a row-selector to an existing SQL Query (updatable report)
Hi, I screwed up an extensive updatable report in Apex 4.2 region by one time indicating the page may be parsed at run time. After setting this back (to validate query) a lot of the columns setting were gone, and also the row-selector I actually don'
-
Very urgent !! pls help!! web start for applet vs Japplet..
this does not work with web start. but if i chnge it to Applet , it works fine.. Why? public class NewJApplet extends javax.swing.JApplet { public void paint (java.awt.Graphics g) g.drawString ("Hello world!", 45, 30); System.out.println
-
Where I can get Dealership for sale of Oracle E-Business Suite 11i
I am taken keen interest for the sale of Oracle Product of Oracle E-Business Suite11i. Please help me in this course. I am able to Sale Oracle Financial Application 11i in his local area (Faisalabad, Pakistan). Faisalabad a largest textile exporter c
-
Syndicating Location master from MDM to ECC
Dear All We want to syndicate Locations from MDM to ECC using BETMAS but there is no std process code for its processing in ECC. What is the best way to sydicate a Location from MDM to ECC? Has anyone implemented this scenario, please provide the ste
-
Photoshop Elements 8 3GB memory limit
Folks, I'd ask this over on Adobe's forum, but it seems to hang redirecting in a loop whenever I try to login. Perhaps someone knows here. I'm using Photoshop Elements 8 and it won't allow me to access more than 3GB (although I have 8GB installed on