Help for Horizontal Menu (AccordionPanel)
Hi,
Anybody know this website horizontally yellow strip is used navigation is (AccordionPanel, Jquirey) http://www.savills.com/ i like very much how can we do similar this?
Thanks
Manoj
Hello Manoj,
did you have a look at Adobe Widget Browser? (see screenshots)
and one of them as an example):
Hans-Günter
Similar Messages
-
Deleted CSS for Horizontal Menu Bar. Help!
I deleted the css for my spry horizontal menu bar and now when I try to upload it into a new page it is distored. I added back the css rules for the menu bar and it helped but I cannot get the menu bar to line up horizontally like it was originally. The bars are vertically staggered across the page. Can anyone help me with the css settings to get the menu bar back to normal?
Thank you
TeresaHello Teresa,
we should not resign ourselves. I for my part, I'm very "happy" with my DW, particularly you/we find here many unselfish helpers! What concerns your "way to build website an easier way" I'll propose DW itself (see screenshot of my German DW):
or many of interesting templates (Google is your friend) and here my favorite are these of Nancy O.:
http://alt-web.com/Free-CSS-Templates.shtml.
And I want to reoeat my hints from above:
If you have a budget to work with, look at PVII's Pop-Menu Magic3.
http://www.projectseven.com/products/menusystems/pmm3/index.htm
jQuery Superfish (free): http://users.tpg.com.au/j_birch/plugins/superfish/ aso.
Good luck!
Hans-Günter
P.S.
And whether you use DW or other programs, sooner or later you have to become familiar with CSS and html aso. -
Help with Horizontal Menu Bar in IE
I am having trouble with my menu bar in IE. It works fine in Opera, Firefox, and Safari. In IE when you hover over it it opens on the left hand side and not straight down. I have tried many things others have suggested with no luck. I am not very good with code and this is the first website I have worked on as part of my job (wasn't hired on as a web designer! I work on a horse farm!). Here is the link to the site www.garnercreekfarms.com.
Here is my JS:
// SpryMenuBar.js - version 0.12 - 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.
var Spry; if (!Spry) 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];
Here is my 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: auto;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 70em;
/* 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: 10em;
float: left;
color: #F59CB0;
background-color: #FFF;
/* 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
width: 250px;
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 9em;
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: 9px;
color: #EF9CCF;
background-color: #FFF;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* 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: #FFF;
padding: 0.5em 0.75em;
color: #EB91B6;
text-decoration: none;
text-align: center;
/* 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: #FFF;
color: #EF93B0;
text-align: center;
font-size: 100%;
/* 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: #FFF;
color: #EF93B0;
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%;
color: #EF93B0;
background-color: #FFF;
text-align: center;
/* 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%;
color: #EF9CCF;
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 a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
color: #EF93B0;
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;
#table2 tr .header p {
font-family: "Apple Chancery";
#table2 tr .header .regular2 {
font-family: "Times New Roman", Times, serif;Alyssa,
Have you tried putting this rule back as it was originally:
/* 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; /*was 9px*/
color: #EF9CCF;
background-color: #FFF;
That is, changing your 9px back to auto.
And giving us a link (as you did) is much better than printing out the code for us! Thanks!
Beth -
*Help* Spry Horizontal Menu Bar wont show and cant seem to center it with rest of content
Hey,
I am a newbie to Dreamweaver and was wondering if someone can
help me with the Spry Horizontal Menu Bar....
http://www.djdanmatthews.net
1) After moving mouse over diffrent areas of Spry menu bar
the text seems to disapear or not show up?
2) I can't seem to center content of Spry menu bar with rest
of website?
3) How do I ad a image (where also can I get it) to the Spry
menu bar so it looks more professional &3d?
Thanks so much,
Dan*Bump
-
Fixing a set width for horizontal menu bar
I'm using the Spry horizontal menu bar at the top of my page and want to put it as a set width that doesn't zoom or shrink in size when someone uses this function on their screen. At the moment, when zooming, the menu wraps to the next line. How can I stop this? Does anyone know how to do this please?
Many thanks,You can set the width of the menuitems as a percentage, you can also set a minimum width for the menubar container (UL).
Gramps -
Halo
If someone could help, please!
I'm having a bit of trouble with the spryHorizontal menu. In IE (I'm using 9) the submenu's overlape the main menus. In Safari/Chrome the submenus are next to each other. And on Opera/Firefox the submenu....well do not know how to explain so here is some pics:
This is IE9
This is Chrome/Safari
And this is FireFox/Opera
Here is my SpryCss:
@charset "UTF-8";
LAYOUT INFORMATION: describes box model, positioning, z-order
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
ul.MenuBarActive
z-index: 1000;
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
width: auto;
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
position: absolute;
left: -1000em;
width: auto;
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
opacity: 0.75;
width: auto;
white-space: nowrap;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 5) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 5) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 5) inset, 0 1px 0 rgba(255, 255, 255, 1);
ul.MenuBarHorizontal ul li
width: auto;
white-space: nowrap;
ul.MenuBarHorizontal ul ul
position: absolute;
margin: 0 0 0 100%;
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
ul.MenuBarHorizontal ul
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
margin: 0;
background: -moz-linear-gradient(top, #18293B, #3C5676);
background: -webkit-gradient(linear, left top, left bottom, from(#3c5670), to(#18293b));
background: -o-linear-gradient(#3c5670, #19293b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#18293B', endColorstr='#3C5676');
ul.MenuBarHorizontal a
margin: 0;
display: block;
cursor: pointer;
padding: 10px;
color: #FFF;
text-decoration: none;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#18293B', endColorstr='#3C5676');
font-family: 'Muli', sans-serif;
font-size: 10pt;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
margin: 0;
background-color: #18293b;
color: #FFF;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #18293B;
color: #FFF;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{ font: 14pt small-caps;
font-family: 'Podkova', sans-serif;
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
BROWSER HACKS: the hacks below should not be changed unless you are an expert
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
And here is my HTML:
<!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>Incidentia</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/CSS.css" rel="stylesheet" type="text/css" />
<link href="css/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Muli:300,400,300italic,400italic|Podkova|Rokkitt&v2' rel='stylesheet' type='text/css'>
</head>
<script src="jsp/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;
//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = 7;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
theobj.thediv.style.visibility="visible";
function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
// -->
</script>
<body>
<!----------------------------------------------------------------WRAPPER-------------------------------------------------------->
<div id="wrapper">
<!----------------------------------------------------------------HEADER---------------------------------------------------------->
<div id="header">
<div id= "logo">
</div>
<div id="searchbox">
<form id="searchbox" action="">
<input id="search" type="text" placeholder="Search">
<input id="submit" type="submit" value="Submit">
</form>
</div>
</div>
<!---------------------------------------------------------------MENUBAR-------------------------------------------------------->
<div id="MenuBar">
<ul class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Diary</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">this is long menu item</a>
<ul>
<li><a href="#">this a longer longer sub menu item</a></li>
<li><a href="#">this a longer longer</a></li>
<li><a href="#">this a longer</a></li>
</ul>
</li>
<li><a href="#">this is</a></li>
<li><a href="#">this</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Profile</a>
<ul>
<li><a href="#">A very short story</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Reports</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Role</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Preformance</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Timesheet</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Promo</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
</ul> </div>
<!---------------------------------------------------------------CONTENT-------------------------------------------------------->
<div id="content">
</div>
<!---------------------------------------------------------------FOOTER----------------------------------------------------------->
<div id="footer">
<div class="footer_col">
<h1> View Demo</h1>
<p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
<p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
<p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
</div>
<div class="footer_col">
<h1>Our Clients</h1>
<p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
<p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
<p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
</div>
<div class="footer_col">
<h1> Recent News</h1>
<p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
<p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
<p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar = new Spry.Widget.MenuBar("MenuBar", {imgDown:"img/SpryMenuBarDownHover.gif", imgRight:"img/SpryMenuBarRightHover.gif"});
//-->
</script>
</div>
</body>
</html>
Here is my css:
@charset "utf-8";
/* CSS Document */
/* font-family: 'Muli', sans-serif;
font-family: 'Podkova', sans-serif;
font-family: 'Rokkitt', serif;*/
/*===========================PARAGRAPH & HEADINGS====================*/
h1 {
font-family: 'Podkova', sans-serif;
font-size: 24px;
float: left;
color:#FFF;
text-align: center;
p {
font-family: 'Muli', sans-serif;
font-size: 10px;
text-align: left;
float: left;
color: #FFF;
/*===========================BODY====================================*/
body {
/* fallback */
background-color: #FCF7E8;
/* -----------------------------------------css3 code -------------------------------------------------*/
/*--------------------------------gradient background--------------------------------*/
background: -moz-radial-gradient(50% 50%, circle, #FCF7E8, #D0B580);
/*---mozilla-- background: -moz-linear-gradient(#FCF7E8, #D0B580);*/
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 1204, from(#FCF7E8), to(#D0B580));
/*---safari/chrome-- background: -webkit-gradient(linear, left top, left bottom, from(#FCF7E8), to(#D0B580));*/
/*---opera--*/ background: -o-linear-gradient(#FCF7E8, #D0B580);
/*--ie6-7--*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCF7E8', endColorstr='#D0B580');
/*===========================WRAPPER=================================*/
#wrapper {
margin: auto;
width: 960px;
min-height: 100%;
height: auto;
padding-top: 10px 10px 0px 10px;
/*===========================CONTENT=================================*/
#content {
min-height: 600px;
width: 100%;
/*===========================HEADER==================================*/
#header {
position: relative;
padding: 10px;
/*===========================LOGO====================================*/
#logo {
background-image: url(img/logo.png);
background-repeat: no-repeat;
height: 51px;
width: 330px;
position: relative;
margin-bottom: 20px;
float: left;
/*===========================SEARCH STYLES===========================*/
#searchbox
float: right;
position: relative;
#search, #submit
float: left;
#search
border: 0.5px solid #D0B580;
font-size: 10pt;
background-color: #FCF7E8;
font-family: 'Muli', sans-serif;
color: #18293B;
height: 20px;
width: 225px;
padding: 1px 1px 1px 5px;
/* -----------------------------------------css3 code -------------------------------------------------*/
/*---------------------------------round corners----------------------------------------*/
/*---mozilla--*/ -moz-border-radius: 10px 0px 0px 10px;
/*--opera+ie--*/ border-radius: 10px 0px 0px 10px;
/*----------------------------------------inner shadow----------------------------------*/
/*---mozilla--*/ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
/*---safari/chrome--*/ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
/*--ie+opera--*/ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
#submit
color: #FFF;
border: solid 0.75px #18293B;
background: #18293B;
height: 23px;
width: 50px;
padding: 3px;
/* -----------------------------------------css3 code -------------------------------------------------*/
/*---------------------------------round corners----------------------------------------*/
/*---mozilla--*/ -moz-border-radius: 0px 10px 10px 0px;
/*--ie+opera*/ border-radius: 0px 10px 10px 0px;
/*---safari/chrome--*/ -webkit-border-radius: 10px;
/*--------------------------------gradient background--------------------------------*/
/*---opera--*/ background: -o-linear-gradient(#18293B, #3C5676);
/*---safari/chrome--*/ background: -webkit-gradient(linear, left top, left bottom, from(#18293B), to(#3C5676));
/*---mozilla--*/ background: -moz-linear-gradient(top, #18293B, #3C5676);
/*--ie6-7--*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#18293B', endColorstr='#3C5676');
/*---ie8-9--*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#18293B, endColorstr='#3C5676)";
#submit:hover
background: #18293B;
#submit:active
color: #FFF;
#submit::-moz-focus-inner
border: 0;
/* Small centering fix for Firefox */
/*===========================MENUBAR=================================*/
#MenuBar{
height: 40px;
position: relative;
clear: both;
padding-left: 10px;
/* -----------------------------------------css3 code -------------------------------------------------*/
/*---------------------------------round corners----------------------------------------*/
/*---mozilla--*/ -moz-border-radius: 10px;
/*--ie+opera*/ border-radius: 10px ;
/*---safari/chrome--*/ -webkit-border-radius: 10px;
/*--------------------------------gradient background--------------------------------*/
/*---mozilla--*/ background: -moz-linear-gradient(top, #18293B, #3C5676);
/*---safari/chrome--*/ background: -webkit-gradient(linear, left top, left bottom, from(#3c5670), to(#18293b));
/*---opera--*/ background: -o-linear-gradient(#3c5670, #19293b);
/*---ie6-7--*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#18293B', endColorstr='#3C5676');
/*---ie8-9--*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#18293B, endColorstr='#3C5676)";
/*----------------------------------------inner shadow----------------------------------*/
/*---mozilla--*/ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 5) inset, 0 1px 0 rgba(255, 255, 255, 1);
/*---safari/chrome--*/ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 5) inset, 0 1px 0 rgba(255, 255, 255, 1);
/*---opera+ie--*/ box-shadow: 0 1px 3px rgba(0, 0, 0, 5) inset, 0 1px 0 rgba(255, 255, 255, 1);
/*===========================FOOTER===================================*/
#footer {
background-color: #18293B;
position: relative;
height: auto;
padding: 10px;
/* -----------------------------------------css3 code -------------------------------------------------*/
/*--------------------------------gradient background--------------------------------*/
/*---mozilla--*/ background: -moz-linear-gradient(top, #3C5676, #18293B);
/*---safari/chrome--*/ background: -webkit-gradient(linear, left top, left bottom, from(#3C5676), to(#18293B));
/*---opera--*/ background: -o-linear-gradient(#3C5670, #19293B);
/*---ie6-7--*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#18293B', endColorstr='#3C5676');
/*---ie8-9--*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#18293B, endColorstr='#3C5676)";
.footer_col {
position:relative;
float: left;
padding: 10px 10px 0px 10px;
width: 290px;
I've been pulling my hair out on this one. Any help would be great apprciated.
(I also have some problems with my footer, but will open a new post for that later)
Thank You
LizeHi Gramps
Thank you for replying.
I did try that solution previously, but gave it another go. It did not work, so I thought maybe I should try it on a dummy page. It works on FireFox/Opera/Chrome/Safari but not in IE.
Here is the screen shots:
And here is the 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;
/* 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;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
display: block;
float: none;
width: auto;
white-space: nowrap;
border-bottom: solid 1px #EEE;
/* 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: #EEE;
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: #33C;
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: #33C;
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%;
padding: 0.5em 2em 0.5em 0.75em;
/* 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;
Am I missing something?
Thanks Lize -
Help - My Horizontal menu bar does display
I have read other posting on similar problems and tried those suggestions. But I still can get my menu bar to display.
Your support has no clue. The problem is that the code on the page is looking for the Spry asset files with these links -
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
But the page itself is already at the root of the account, so there is NO ability to go up one folder level as the code you have on the page directs. Furthermore, if I browse to this location -
http://www.jarthurssalon.com/SpryAssets/SpryMenuBar.js
which is where the asset files SHOULD be found if you have in fact uploaded them, I get a file not found message. You need to do two things -
1. Fix the code on the page (in the head) to be like this -
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
2. UPLOAD THOSE TWO FILES TO THE REMOTE SITE. -
Nube needs help inserting a JQuery horizontal menu bar into my site-help.
Please forgive the ignorance of my questions but I am new to Mobile site design and Dreamweaver.
I am trying to build a responsive web site for my company that can be viewed on multiple platforms, but am having trouble inserting a responsive menu and responsive slide show.
This post is in regard to the menu bar, which I have created using JQuery on a seperate page. I have managed to get the layout to work but still can't figure out how to create mouse overs for the links
or how to insert it into my site.
Please help.
Why can't I see the nav bar in the site when I paste in?
All I see is the text and no images. I know I am pasting the code in the wrong place.
Where do I insert it?
Below is the code for the site and below that is the code for the menu bar.
Where do I insert it? Help.
Thank you in advance for any help you can provide.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/master.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
<div align="center"><img src="images/Site Objects/headermain.png" alt="header"></div>
</div>
<div id="navbar">ul#navlist { font-family: <span class="navfont">sans-serif</span>; }
ul#navlist a
font-weight: bold;
text-decoration: none;
ul#navlist, ul#navlist ul, ul#navlist li
margin: 0px;
padding: 0px;
list-style-type: none;
ul#navlist li { float: left; }
ul#navlist li a
color: #ffffff;
background-color: #<span class="navmainbg">003366</span>;
padding: 3px;
border: 1px #ffffff outset;
ul#navlist li a:hover
color: #ffff00;
background-color: #<span class="submenubg">003366</span>;
ul#navlist li a:active
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }
ul#subnavlist li a
padding: 0px;
margin: 0px;
ul#navlist li:hover ul#subnavlist
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
ul#navlist li:hover ul#subnavlist li a
display: block;
width: 10em;
border: none;
padding: 2px;
ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }
Read more: How to Make a Rollover Drop-Down Menu | eHow http://www.ehow.com/how_8569816_make-rollover-dropdown-menu.html#ixzz2WZQ3IDmU</div>
<div id="slideshow">
<div id="slideshow">
<div align="center">
<!-- Begin DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
<div class="dwuserEasyRotator" style="width: 1225px; height: 400px; position:relative; text-align: left;" data-erConfig="{autoplayEnabled:true, randomize:true, autoplayDelay:3000, autoplayStopOnInteraction:false, autoplayPauseOnHover:false, audio_controllerLocation:'br', lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-77-97-99-50-47-68-111-99-117-109-1 01-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-11 2-114-101-118-105-101-119-95-115-119-102-115-47', wv:1}" data-erName="slideshow rotator" data-erTID="{hg3ysjwkx61418058007631}">
<div data-ertype="content" style="display: none;"><ul data-erlabel=>
<li>
<img class="main" src="_images/Site Objects/fades how/lrg_images/image09-turn.png" />
<img class="thumb" src="_images/Site Objects/fadess how/lrg_images/image09-turn.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/fades how/lrg_images/image08-ss.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image08-ss.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image07-posters.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image07-posters.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image06-photo_ed.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image06-photo_ed.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image05-nwsmag.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image05-nwsmag.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image04-litigation.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image04-litigation.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image03-creative.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image03-creative.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image02-corp.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image02-corp.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image01-bound.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image01-bound.png" />
</li>
</ul>
</div>
<div data-ertype="layout" data-ertemplateName="NONE" style=""> <div class="erdots" style="overflow: hidden; margin: 0; position:absolute;right:0;top:9px;width:300px; font-size: 10px; font-family: 'Lucida Grande', 'Lucida Sans', Arial, _sans; color: #FFF;" data-erConfig="{showText:false}" align="center">
<div class="erdots_wrap" style="wasbackground-color: #CFC; float: right;" align="left"> <!-- modify the float on this element to make left/right/none=center aligned. -->
<span class="erdots_btn_selected" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: default; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_65.png) top left no-repeat;">
</span>
<span class="erdots_btn_normal" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_35.png) top left no-repeat;">
</span>
<span class="erdots_btn_hover" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_65.png) top left no-repeat;">
</span>
</div>
</div>
<div class="ercats erFixCSS3" style="position:absolute; left:0; right: 320px; top: 0;" style_real="padding: 4px 8px; font-family: 'Lucida Grande', 'Lucida Sans', Helvetica, Arial, _sans; font-size: 11px; color: #333; wasmargin: 0 50px 10px 50px; wasborder-radius: 6px; wasbackground-color: #EEE; wasborder: 1px solid #E0E0E0; overflow: hidden;">
<div align="center">
<!-- <div style="float: left; padding: 6px 18px 3px 0; font-weight: bold;">Title text!</div> -->
</div>
<div class="ercats_btn_selected erFixCSS3" style_real="float: left; padding: 3px 8px 4px 8px; border-radius: 4px; background-color: #FFF; box-shadow: 0 0 2px #999; wasborder: 1px solid #CFCFCF; color: #555; margin: 3px 9px 3px 0; cursor: default;">
<div align="center">Title1 </div>
</div>
<div class="ercats_btn_normal erFixCSS3" style_real="float: left; padding: 3px 8px 4px 8px; border-radius: 4px; color: #666; cursor: pointer; margin: 3px 9px 3px 0;">
<div align="center">Title2 </div>
</div>
</div>
<div class="erimgMain" style="position: absolute; left:0; right:0; top:40px; bottom:0;" data-erConfig="{___numTiles:3, scaleMode:'fillArea', imgType:'main', __loopNextButton:false, arrowButtonMode:'rollover'}">
<div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
<div class="erimgMain_slide">
<div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
</div>
</div>
<div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -30px;" data-erConfig="{image:'circleBig', image2:'circleBig'}"></div>
<div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -30px;" data-erConfig="{image:'circleBig', image2:'circleBig'}"></div>
</div><div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;">
This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com.
<br /><br />
Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds.
<br /><br />
<a style="color:#FFF;" href="#" class="erabout_ok">OK</a>
</div>
<noscript>
Rotator powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
</noscript>
<script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
</div>
</div>
<!-- End DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
</div>
<!-- End DWUser_EasyRotator --></div>
</div>
<div id="body">
<div align="center"><img src="images/page templates/home pg tmplt blnk.png" alt="body"></div>
</div>
<div id="footer">
<div align="center"><img src="images/Site Objects/footermainbck.png" alt="footer"></div>
</div>
</div>
</body>
</html>
Below is the code for the JQuery menu with sub and secondary sub menus:
<!DOCTYPE html><!--[if IE 7]>
<html lang="en" class="ie7 oldie"></html><![endif]--><!--[if IE 8]>
<html lang="en" class="ie8 oldie"></html><![endif]-->
<!-- [if gt IE 8] <!-->
<html lang="en">
<!-- <![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexNav - Flexible, Device Agnostic Navigation</title>
<link href="css/flexnav.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="css/page.css" media="screen, projection" rel="stylesheet" type="text/css">
<style type="text/css">
body,td,th {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14pt;
body {
background-color: #FFF;
a:link {
color: #FFFFFF;
text-decoration: none;
a:visited {
color: #FFF;
text-decoration: none;
a:hover {
color: #F00;
text-decoration: none;
a:active {
color: #900;
text-decoration: none;
</style>
<script type="text/javascript" src="//use.typekit.net/qyb8ood.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body bgcolor="#FFFFFF" vlink="#FF0000" alink="#990000" class="home-page">
<script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
<div class="container">
<header id="site-header">
<div class="menu-button">Menu</div>
<nav>
<ul data-breakpoint="800" class="flexnav">
<li><a href="HOME">HOME</a>
<li><a href="About Us">ABOUT US</a>
<li><a href="Products">PRODUCTS</a>
<ul>
<li><a href="Bound Products">Bound Products</a>
<ul>
<li><a href="Booklets">Booklets</a></li>
<li><a href="Catalogs & Magazines">Catalogs & Magazines</a></li>
<li><a href="Newsletters">Newsletters</a></li>
<li><a href="Presentation Books">Presentation Books</a></li>
<li><a href="Manuals">Manuals</a></li>
</ul>
</li>
<li><a href="Brochures">Brochures</a></li>
<li><a href="Business Cards">Business Cards</a></li>
<li><a href="CD & DVD Dupe">CD & DVD Duplication</a></li>
<li><a href="Copies">Copies</a></li>
<li><a href="Corp. ID">Corporate ID</a></li>
<li><a href="Flyers">Flyers</a></li>
<li><a href="Forms">Forms</a></li>
<li><a href="Menus">Menus</a></li>
<li><a href="Photo Collages">Photo Collages</a></li>
<li><a href="Photo Enlargements">Photo Enlargements</a></li>
<li><a href="Postcards">Postcards</a></li>
<li><a href="Rack Cards">Rack Cards</a></li>
<li><a href="Wide Format">Wide Format</a>
<ul>
<li><a href="Banners">Banners</a></li>
<li><a href="Posters">Posters</a></li>
<li><a href="Signs">Signs</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="Services">SERVICES</a>
<ul>
<li><a href="Litigation">Litigation Services</a></li>
<li><a href="Creative">Creative Services</a></li>
</ul>
</li>
<li><a href="FAQs">FAQs</a>
<li><a href="Contact Us">CONTACT US</a>
</ul>
</nav>
</header>
\ </div>
<script type="text/javascript">$(".flexnav").flexNav();</script>
</body>
</html>Ok, I managed to place the menu within the site, but I still don't have a horizontal menu. All I can see is the unordered list.
(see below).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<meta name="view" name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=9 />
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/master.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
<style type="text/css">
img {margin:6px; border:solid 2px #FFF;}
img:hover {background: #666;}
</style>
<link href="styles/navbar stylesheet new.css" ref="stylesheet" type="text/css" />
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
<div align="center"><img src="images/Site Objects/headermain.png" alt="header"></div>
</div>
<div id="navbar"><script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
<div class="#"
<div class="menu-button"></div>
<nav>
<ul data-breakpoint="800" class="flexnav">
<li><a href="HOME">HOME</a>
<li><a href="About Us">ABOUT US</a>
<li><a href="Products">PRODUCTS</a>
<ul>
<li><a href="Bound Products">Bound Products</a>
<ul>
<li><a href="Booklets">Booklets</a></li>
<li><a href="Catalogs & Magazines">Catalogs & Magazines</a></li>
<li><a href="Newsletters">Newsletters</a></li>
<li><a href="Presentation Books">Presentation Books</a></li>
<li><a href="Manuals">Manuals</a></li>
</ul>
</li>
<li><a href="Brochures">Brochures</a></li>
<li><a href="Business Cards">Business Cards</a></li>
<li><a href="CD & DVD Dupe">CD & DVD Duplication</a></li>
<li><a href="Copies">Copies</a></li>
<li><a href="Corp. ID">Corporate ID</a></li>
<li><a href="Flyers">Flyers</a></li>
<li><a href="Forms">Forms</a></li>
<li><a href="Menus">Menus</a></li>
<li><a href="Photo Collages">Photo Collages</a></li>
<li><a href="Photo Enlargements">Photo Enlargements</a></li>
<li><a href="Postcards">Postcards</a></li>
<li><a href="Rack Cards">Rack Cards</a></li>
<li><a href="Wide Format">Wide Format</a>
<ul>
<li><a href="Banners">Banners</a></li>
<li><a href="Posters">Posters</a></li>
<li><a href="Signs">Signs</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="Services">SERVICES</a>
<ul>
<li><a href="Litigation">Litigation Services</a></li>
<li><a href="Creative">Creative Services</a></li>
</ul>
</li>
<li><a href="FAQs">FAQs</a>
<li><a href="Contact Us">CONTACT US</a>
</ul>
</nav>
</header>
</div>
<script type="text/javascript">$(".flexnav").flexNav();</script>
</div>
<div id="body">
<div align="center"><img src="images/page templates/home pg tmplt blnk.png" alt="body"></div>
</div>
<div id="footer">
<div align="center"><img src="images/Site Objects/footermainbck.png" alt="footer"></div>
</div>
</div>
</body>
</html> -
Horizontal Menu Bar Help Needed
Hi there, I am somewhat new to web design but I've been helping a friend update his business's page recently. We use Dreamweaver CS3 and our hosting is thru GoDaddy.
My problem appears when I try to insert a horizontal menu bar (Insert>Spry>Menu bar) so that a dropdown menu will appear when I hover over an option, much like the top menu on the GoDaddy homepage, among others. It works correctly when I preview my page in a browser from Dreamweaver, (Firefox, IE) but when I actually upload my page to the GoDaddy servers and view it, it shows up not as a bar with hidden options, but as a long unformatted vertical list.
The site in question is here: http://www.notyouraveragebookkeeper.com/indextabs
I thought it might be a problem with CSS, but I made sure that all of the style sheets are properly uploaded to the servers, and I made sure that my browser accepted any Javascript applets. I've also tried it with my Dreamweaver CS5 trial. Like I said, I am an amateur in every sense of the word and I'm still learning technical terms for things so some of my jargon may be a bit flawed. I have done a good bit of online research in forums and otherwise, and I've tried solutions that have been given to similar problems. Maybe someone could view the source code and find out where I've gone wrong, or suggest tips to identify problems in Dreamweaver. I feel like the problem lies within the Spry framework, but I have very little knowledge on how it works or what it does.
Any assistance in this regard would be extremely helpful and appreciated.Neither SpryMenuBar.js and SpryMenuBarHorizontal.css can be found by your online site.
Possibly these have not been uploaded or uploaded to a wrong location.
Gramps -
Horizontal Menu Bar size changes (for some viewers)
I have set up my first horizontal menu bar (Using CS3) and was pretty proud of how far I got on my own. I have customized the colors, and have it centered on my page - all exactly what I wanted. I have viewed the site in a few different browsers (Explorer, Safari, Mozilla) and on 4 different computers and it looks good to me, however, when my client views the site (using Explorer as her browser) - the horizonatl menu bar does not fit on one line. Does anyone know what could be causing this? Am I going to have to customize the css for the size of the text on the menu bar or the overall size of the menu bar?
Here is the live page: http://www.ourtruecolors.org/newsite/
Here is a screenshot of what my client sees: http://www.meredithandrob.com/TC/TCscreenshot-1.jpg
Here is a screenshot of what I typically see and how it SHOULD look: http://www.meredithandrob.com/TC/TCscreenshot-2.jpg
Any help would be greatly appreciated!Hi,
My compliments on a great looking site.
My experience is that browsers have different default values. What I tend to do to neutralize this by adding the following line at the top of the style sheet:
margin: 0; /* it's good practice to zero the margin and padding of all elements and tags to account for differing browser defaults */
padding: 0;
The net effect is that you must apply a CSS-rule to all of your HTML-tags such as <h1>, <h2>, <p> etc.
This regime has saved me from many dillemmas such as the one you are now experiencing.
I hope this helps.
Ben -
Horizontal menu bar displays grey in IE - Please Help
These are my first websites and i have created it in DW CS4. Everything is working and i have checked in multiply browsers. The one issue i can't work out is that when viewed in IE the horizontal menu bar looks grayed out. The main menu should be transparent with a white border, while submenus have a .gif image gradient background also with a white border.
Please help, I would be very grateful and if you would ever find yourself in the Maldives i'm sure we could repay the favour.....
Please find all the details below
The URLs are
http://www.noonudiversmaldives.com
http://www.noonuislandretreat.com
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;
/* 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: 8.5em;
float: left;
border: thin solid #CCC;
/* 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: 8.2em;
position: absolute;
left: -1000em;
border: thin solid #CCC;
/* 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
width: 8.2em;
/* 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;
background-image: url(../background/Navboxes.gif);
background-repeat: repeat-y;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #CCC;
text-decoration: none;
text-align: center;
border: thin solid #CCC;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFFF33;
font-weight: bold;
border: thin solid #CCC;
/* 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
color: #FFFF33;
border: thin solid #CCC;
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
color: #CCC;
border: thin solid #CCC;
/* 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
border: thin solid #CCC;
/* 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
color: #FFFF33;
border: thin solid #CCC;
/* 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
color: #CCC;
border: thin solid #CCC;
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-color: #999999;Hi,
Before I give you the solution, please be advised that nothing goes above supplying an online URL. This helps us more than anything else. In fact, with an online URL ther is no need for further code.
So, in your case, thank you for the URL.
For the solution to your problem, just remove the red coloured part.
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background-color: #999999;
I'll see you in the Maldives.
Ben -
Spry Horizontal Menu - Need Submenu HELP!
Using DW CS3 - Spry v. 1.6.1
I've created a horizontal menu with drop down submenus. After
many hours, I finally figured out how to change the background of
the main menu items, but cannot for the life of me figure out how
to style the submenus without screwing up the main menu. I'm a
newbie to CSS and Spry and am very confused by some of the class
designations used in the style sheet.
If you can just tell me what in the stylesheet to change I
will forever grateful!
Thanks!
ps - If you're an Adobe person reading this, I found the
comments to not be very helpful, they're a bit confusing for new
users....Simply, your menu list items are too wide (altogether) to fit on the same line.
I see that you have defined your div#container as 1000px, and your div#nav_bar as, well, it will default to 1000px. Then you have set your MenuBar to 80% of that width, and your list items as 16.8% of that.
So far, everything is flexible.
When you get down to ul.MenuBarHorizontal a, however, you have set padding: padding: 0.5em 0.75em; If you change your padding units to percentages, you should be able to find acceptable measures that will allow your list items to remain on one line.
Keep in mind that, as the following references notes, in some browsers padding is measured in addition to the stated width of your element:
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
So make sure ALL your percentages add to 100%...including the horizontal padding (for both sides!) and the width (don't add in the vertical padding...that could be left as is). Actually, add them up to slightly less than 100% for comfort. If you get a gap at the end of the menubar, center the menubar and apply a background to the containing div.
Beth -
I need help!! I finished three beautifull webs in MUSE but i have a problem (three problems). When i make the preview of the site in MUSE everything it´s perfect, a beautiful orange horizontal menu screens ok, but when i publish in Catalyst or in my server the web dosen´t shows the "real" aspect. The menu option disappears (Buttons) and all the head section changes breaking the structure. Is this a mistake of my work or it´s a Bug? Here is one example of what i´m saying. http://edac.businesscatalyst.com/index.html Here is an Screenshot of how it should be viewed. http://www.miguelrua.com Thanks! :))
Hi Miguel,
When I check the link at my end, I see no differences between the menu on the site and the menu in the screenshot you provided. In fact, the only difference I see is an accordion used in the site, which is not there in the screenshot (Adding a screenshot for your reference). It looks like you made some changes to the site, which seem to have resolved the problem.
Kind Regards
Aishvarya Rastogi
Message was edited by: Corey@Adobe -
Issue with having to declare fixed width for my top level floated LI in horizontal menu
Hi and thanks for taking a look at my problem:
I am having trouble getting my sub menus to display correctly in IE.
Originally i didn't declare a fixed width for my top level li and it displayed perfectly in all browsers except IE.
If i don't declare a fixed width for my floated floated elements, IE treates the top level li as the same width as the ul they contain (which I don't want). So I declared a width for the ul.MenuBarHorizontal li to be 80px, which is close to the minimum width that i want to use for the top level list items. However, in actual fact, the top level list items all have individually declared widths in the classes they are assigned.
How can i re-write the html or CSS so that the browser, mainly IE, reads the correct widths for the top level ist li??
Here is a link to the page with the problem
Thanks in advance if anyone can help me out.Hi Beth,
thanks so much for your repsonse.
I will take your notes and advice and see if i can apply it to the actual page i was referring to. It seems you were now looking at a completely different page with a different (albeit spry) horizontal menu.
Again, i truly appreciate your time and advice.
Thanks! -
SOS! PLEASE HELP! IE BUG AND HORIZONTAL MENU
Hi guys,
Even though it works fine in firefox etc, ie just won't
render my horizontal menu without putting a medium thick white band
at the top of the menu container and inbetween each of the submenus
- really beginning to do my head in as I don't know the hack for
this. Please help - I'm sure it's really simple. Here's my homepage
http://www.weddingsongbird.com/index.html
Thanks JThis may be a too obvious, but did you try:
<div id="banner"><img src="Summer-Tree.gif"
width="877" height="222" /></div>
instead of:
<div id="banner"> <img src="Summer-Tree.gif"
width="877" height="222" /></div>
Sometimes, white spaces, returns, and other invisible
characters mess with the HTML rendering.
Maybe you are looking for
-
The name "Pi" does not exist in the namespace "clr-namespace:PressureVessels".
Pi is the name of a class. I made some major modification to the program in VS 2013, then after transferring the program to another PC with VS 2012 running, I am getting many errors that says: The name "ClassName" does not exist in the namespace "cl
-
I tunes crashes ca 10 seconds after starting it, what to do?
This is the error log, I don't have a clue what it means but you probably do. Process: iTunes [293] Path: /Applications/iTunes.app/Contents/MacOS/iTunes Identifier: com.apple.iTunes Version: 10.7 (10.7) Build Info:
-
How can I apply existing WCS "WLAN Config" templates to a new WLC?
We've been running a pair of WLC 4402s managed by WCS, thus we are still on the older 7.0.235.0 (WCS) / 7.0.235.3 (WLC) release. I'm trying to add an additional WLC 4402-50 as a hot spare. I first ran the manual setup steps to give it an IP in our ra
-
IPod is corrupt but won't restore
Ok well, A few weeks ago I lost my ipod, and i just recently found it last week. It was completely out of battery so I charged it for a while, and then now whenever I try turning it on, it won't work giving me a folder icon and saying i should go to
-
When I try to send an image from Aperture (latest version 3.4.3, running on Mountain Lion) to Photoshop Elements 11 via the "Edit with Photoshop Elements 11" menu command, PE 11 opens fine but displays a blank gray area where the image should have en