Submenu vertical
Hello
I created a menu with four items of menu void. Unfortunately, the navigation in the SUP menu is horizontal and I want it to be vertical. How could I just go for the sub menu but leaving the main horizontal menu?
I have watched all the menu options, but cannot for the life of see me where this option is disabled?
Thank you.
The correct way to ensure that the submenus you create in muse are appear vertically in your design even if your main menu is horizontal must ensure that, in the main window of 'plan' menu SUP pages are horizontal aligned with each other under the main menu page they 'out of' - non-aligned vertically directly below them. AAHH. Took me a day to understand this one
Tags: Adobe Muse
Similar Questions
-
Does anyone know how to create (or if there's a widget out there on the market somewhere) a vertical menu which can contain submenu items that develop and push downwards (like an accordion), but who will remain completely open (expanded) once a submenu item is selected (selection allowing another element of submenu without having to return to the parent menu item.) My goal is to have a portrait with 'Home', 'Galleries', 'About', etc with galleries individual in the expandable box (on click or rollover) under galleries, but which remain open once a specific Gallery is selected. I worked in various tests and the only way I can approach is to have state buttons in the drop down menu below a menu accordion element, but that will not be open when buttons are selected.
The only examples I can find are copyrighted by others, so I'm hesitant to reference/display here as examples. Any help would be appreciated.
You can order these links:
https://creative.Adobe.com/addons/products/2111#.VHwFD8lsiks
https://creative.Adobe.com/addons/products/4061#.VHwFGclsiks
http://Muse.Adobe.com/Widget/vertical-almosnino01
http://creativedroplets.com/Adobe-Muse-tips-sliding-menu/
Thank you
Sanjit
-
For a mobile site, I need to do a master vertical [menu] tab in the header of each page that has the following simple qualities.
(1) all of the menu must be an Accordion widget (or something similar) which can be closed up in the upper part of the screen
(2) the menu items should be placed vertically (obviously)
(3) the SUB menu items should also be arranged vertically (for some reason any they out horizontally to the right why cannot they just fall down)
---
I tried to put accordion widgets inside other widgets accordions, but so far, it doesn't look like Muse is what allows this.
Help, please! I feel like I ask is really very simple!
N
Please check these videos:
https://www.YouTube.com/watch?v=Thm8bsNccvI
https://www.YouTube.com/watch?v=QM4Z4iLgtfI
https://www.YouTube.com/watch?v=rOggrg-svPs
Thank you
Sanjit
-
Horizontal menu, submenu vertical
I use CC of Muse. How to make a horizontal menu with submenus vertical? I looked at the screenshots various people have posted, but they do not work for me. The vertical menu automatically makes the submenus horizontal - I want the opposite.
In your pages subsites add them horizontally in your site map.
As I have here in my following screenshot which will show in your horizontal menu which Untitled 5 and 6 is in fact open horizontally in the menu while the 7, 8 and 9 opens vertically.
Hope that helps.
-
How can I create a submenu? I chose for a vertical menu and want the submenu also be vertical
How can I create a submenu? I chose for a vertical menu and want the submenu also be vertical
Via the live chat, I got a useful tip... This has to do with the Organization of child pages in the tree. I had put them vertically on the relevant page (I wanted a submenu vertical). I had to put the child pages horizontally under the relevant page... not really logical or intuitive, but it works!
-
How to create a vertical submenu in my main horizontal main menu?
I have create a main menu in my site and now I'm having a few difficulties to create a submenu vertical in one of the separators. Can someone help me please?
Thank you.
C.
Hello
In the window menu options, you must select 'All the Pages' for the type of menu. Please refer to the following screenshot:
Please let me know if I'm missing something.
Kind regards
Aish
-
Horizontal, vertical to sub menu of the main menu.
Setting up my style of main menu horizontal, when I select the submenu vertical, that everything is going vertical, even when "Edit together" is not selected.
I know that the solution should be simple, but I can't find out how it's done. Anyone?
With a Horizontal Menu, the submenu (assuming you mean that the bottom of the fall) is automatically vertical, so you will have to pay anything.
-
Hello! I need help for menu vertical Adobe Muse! very urgent!
Hello!
How to make a menu like this one in adobe Muse: http://www.bryanschutmaat.com/
-vertical menu with submenu vertical
Thank you!!
To do this, you can use an Accordion widget with a custum style.
IF you are looking for Terry White, Muse, accordion, you will find video tutorials on YouTube.
-
How can I create a submenu using Muse
How can I create a submenu with muse
Hello
Please see the following links:
Adobe - submenu - Muse submenu - Drop Down Menu - Navigation - YouTube
Adobe Muse get started - adding a Navigation bar - YouTube
Concerning
Sonam
-
Hey how can you add a submenu vertical to a horizontal menu in muse? I wonder. but is it possible to turn a menu item and make it not active, and then reattach to a vertical menu. example, I have the word information. I don't want information to get a page. I want him to be a subpage. but yet I want a drop down down manu for this word. How can I add in the menu? I know that I should change the States but its confused me. Thank you
Or use this:
http://widgets-musethemes.BusinessCatalyst.com/tb005.html
Thank you
Sanjit
-
I saw other post of this problem, but I have not seen a solution. My submenu vertical is offset by about an inch. This only happens in Internet Explorer. My code is below. I've updated to spry 1.6 without change. Thank you.
@charset "UTF-8";
/ * SpryMenuBarVertical.css - review: pre-release Spry 1.4 * /.
/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
The AVAILABLE INFORMATION: Describes the box model, positioning, the order
*******************************************************************************/
/ * The outermost container for the menu bar, a box of width fixed without margin or padding * /.
UL. MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 100%;
cursor: default;
Width: 8th;
}
/ The menu bar value active with this class, currently the definition of z-index to accommodate IE rendering bugs: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html * /.
UL. MenuBarActive
{
z-index: 1000;
}
/ * Menu item containers, position the children relative to this container and are the same fixed width parent * /.
UL. MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
Width: 8th;
}
/ * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) with a higher z-index, but they are first the left side of the screen (-1000em) * /.
UL. MenuBarVertical ul
{
margin:-5% 0 0 95%;
padding: 0;
list-style-type: none;
do-size: 100%;
position: absolute;
z index: 1020;
cursor: default;
Width: 8.2em;
left:-1000em;
top: 0;
}
/ * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we have left to 0, it is on the screen * /.
UL. MenuBarVertical ul. MenuBarSubmenuVisible
{
left: 0px;
}
/ * Container of menu items are same fixed width parent * /.
UL. MenuBarVertical ul li
{
Width: 8.2em;
}
/*******************************************************************************
INFORMATION DESIGN: Describes the set of colors, borders, fonts
*******************************************************************************/
/ * Outermost menu container has borders on all sides * /.
UL. MenuBarVertical
{
border: 1px solid #CCC;
}
/ * Submenu containers have borders on all sides * /.
UL. MenuBarVertical ul
{
border: 1px solid #CCC;
}
/ * Menu items are a light grey block with padding and no text decoration * /.
UL. MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #EEE;
Padding: 0.5em 0.75em;
Color: #333;
text-decoration: none;
}
/ Components menu that have mouse over or focus have a blue background and white text * /.
UL. MenuBarVertical a: hover, ul. MenuBarVertical a: focus
{
background-color: # 33;
color: #FFF;
}
/ * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.
UL. MenuBarVertical a.MenuBarItemHover, ul. MenuBarVertical a.MenuBarItemSubmenuHover, ul. MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: # 33;
color: #FFF;
}
/*******************************************************************************
Submenu INDICATION: styles if there is a submenu in a given category
*******************************************************************************/
/ * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.
UL. MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url (SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 50 95%;
}
/ * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" positioned on the far left (95%) and centered vertically (50%) * /.
UL. MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url (SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 50 95%;
}
/*******************************************************************************
BROWSER HACKS: hacks below should not be changed, unless you are an expert
*******************************************************************************/
/ * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.
UL. MenuBarVertical iframe
{
position: absolute;
z index: 1010;
}
/ * HACK FOR IE: to stabilize the appearance of the menu items. the slash in the float is to keep IE 5.0 analysis * /.
@media screen, projection
{
UL. MenuBarVertical li. MenuBarItemIE
{
display: inline;
f\loat: left;
Background: #FFF;
}
}
You are getting closer now that CSS is corrected.
Now, you just need to remove the centering elements that you added to the HTML code.
Don't center the div, it's what is inside
it.
THE who applies to the nested ULs, drop down menus, menu.
You have two divs and a table cell that the menu is in and all are set to
align the Center.The first div content focus value is one that encompasses all
the content of your page.
You have probably done this to center the content in the web browser, but it
affects the alignment of your menu in IE because it inside the Center
it.
I'll show you how to properly Center the content after you get rid you of these
Finally three alignment is 'center' attributes.Change this:
To do this:
Change this:
To do this:
Menus now work correctly in Internet Explorer, but the content of the page is not centered
more.
To center correctly, first give the div that surrounds all the
content ID named wrapper.Change this:
To do this:
Then, finally, add this to your CSS:
{#wrapper}
Width: 800px;
margin: 0px auto;
}Now, the content is centered in the browser window, and you no longer have
multiple text-align center rules in CSS and align the Center attributes in
the resulting HTML code worth menu.You only need text-align: center to rule in the CSS spry menu link to
align the text in the menu.Take care
Tim
News:gedvek$653$1@forums. Macromedia.com...
> Thanks again but no luck. The submenus in IE are compensated, such a pain. Any
> other ideas will be appreciated.
> http://zone9.clevelandcreations.com/
> -
creating a submenu horizontal SPRY
I just created my 1st horizontal Spry menu. The problem is that the submenu vertical and I want it to be horizontal.
Can anyone help?
Thank you!Thank you guys for your replies and help. It was a learning experience!
I found this menu tab that I will play with.
http://www.dhtmlgoodies.com/index.html?whichScript=dhtmlgoodies-tabmenu
-
The page content will not be displayed in IE 7 & 8
I'm going to understand problems why content after the Spry Menu will not display in IE 8, and the page appears at all in IE 7. Seems
http://nowagenewmedia.com/Organica/
CSS
* {
vertical-align: baseline;
Police-weight: inherit;
do-family: inherit;
font style: inherit;
do-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
{#outerWrapper}
Width: 960px;
margin-top: 10px;
margin-right: auto;
left margin: auto;
border: 3px solid #CCC;
}
{#contentWrapper}
Width: 100%;
overflow: auto;
Clear: both;
}
#header {}
Width: 960px;
height: 160px;
}
#sidebar {}
float: left;
Width: 225px;
height: 400px;
background-color: #FFF;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
}
#content {}
float: left;
Width: 734px;
background-color: #FFF;
}
{#navbar}
float: left;
height: 35px;
Width: 960px;
Clear: both;
}Page
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > Untitled Document < /title >
< link hand. CSS"rel ="stylesheet"type =" text/css"/ >
"< link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css "rel ="stylesheet"type =" text/css"/ >
"< script src="Spry-UI-1.7/includes/SpryDOMUtils.js "type =" text/javascript"> < / script >
"< script src="Spry-UI-1.7/includes/SpryDOMEffects.js "type =" text/javascript"> < / script >
"< script src="Spry-UI-1.7/includes/SpryWidget.js "type =" text/javascript"> < / script >
"< script src="Spry-UI-1.7/includes/SpryMenu.js "type =" text/javascript"> < / script >
"< script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js "type =" text/javascript"> < / script >
"< script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js "type =" text/javascript"> < / script >
< style type = "text/css" >
/ * BeginOAWidget_Instance_2141544: #MenuBar * /.
/ * Values for skinning a basic through presets menu. If the default settings are not sufficient, most count should be done in
These rules, except for the images used to down or to the right pointing arrows, located in the SpryMenuBasic.css file
They take the following classes of widget for layout of menu (located in a "Preset")
. MenuBar - applies to all menu bars - default is a horizontal bar, all submenus are vertical - level 2 subs and beyond are drop down to the right.
. MenuBarVertical - vertical main bar; All submenus are drop down to the right.
You can also pass in extra classnames to set your desired top-level menu bar layout. Normally, they are defined by using a predefined setting.
They apply only to the horizontal menu bars:
MenuBarLeftShrink - the menu bar will be horizontally "shrinkwrapped" be just big enough to hold his items and left-aligned
MenuBarRightShrink - as MenuBarLeftShrink, but right-aligned
MenuBarFixedLeft - set to a specified width defined in rule "." MenuBarFixedLeft', and left-aligned.
MenuBarFixedCentered - Fixed to a specified width defined in rule "." MenuBarFixedCentered',.
and centered in its parent container.
MenuBarFullwidth - expands to fill the width of the parent container.
In general, all the rules specified in this file are prefixed by #MenuBar so that they don't apply to instances of the widget inserted along
with the rules. This allows use of multiple MenuBarBasic widgets on the same page with different layouts. Due to limitations in IE6.
There are a few rules where this was not possible. These rules are so noted in the comments.
*/{#MenuBar}
background-color: #003300;
do-family: "Lucida Sans Unicode", "Lucida Grande", without serif. / * Specify the fonts on the bar menu and submenu MenuItemContainer, so MenuItemContainer.
MenuItem and MenuItemLabel
at a given level all use the same definition for ems.
Note that this means that the size is also inherited from the submenus of the child,
so be careful when using other than relative sizes
100% on the fonts submenu. */
make-weight: bold;
font size: 13px;
make-style: normal;
padding: 0;
}
/ * ATTENTION: because ID + class selectors do not work correctly in IE6, but we want to restrict these rules to all this
instance of widget, we used the concatenated string classnames to our selectors for the type of layout of the menu bar
in this section. These have very low specificity, so be careful not to overstep accidentally. */. MenuBar br {/ * using only a class, so there same specificity that the "."} MenuBarFixedCentered br' rule bleow * /.
display: none;
}
. {MenuBarLeftShrink}
float: left; / * shrink the content, but also to float the menu bar * /.
Width: auto;
}
. {MenuBarRightShrink}
float: right; / * shrink the content, but also to float the menu bar * /.
Width: auto;
}
. {MenuBarFixedLeft}
float: left;
Width: 100%;
}
. {MenuBarFixedCentered}
float: none;
Width: 100%;
margin-left: auto;
margin-right: auto;
}
. MenuBarFixedCentered br {}
Clear: both;
Display: block;
}
. MenuBarFixedCentered. Submenu br {}
display: none;
}
. {MenuBarFullwidth}
float: left;
Width: 100%;
}/ * Top level bar small objects - these actually apply to all items and get substituted for the submenus level 1st or successive * /.
#MenuBar. {MenuItemContainer}
padding: 0px 0px 0px 0px;
margin: 0;
/ * Zero margin on the containers of items. The MenuItem is the active area of hover.
For most elements, we have padding top or bottom or border only on MenuItem
or a child so we keep all tiled submenu with elements.
Definition of this 0 avoids the "dead zones" to hover. */
}
#MenuBar. {}, MenuItem
padding: 0px 10px 0px 10px;
background-color: transparent;
border-left: 1px solid #FFF;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
}
#MenuBar. {MenuItemFirst}
border-style: none none no none;
}
#MenuBar. {MenuItemLast}
border-style: solid none none none;
}#MenuBar. MenuItem. {MenuItemLabel}
text-align: left;
line-height: 1.4em;
color: #ffffff;
background-color: transparent;
Padding: 6px 6px 15px 15px;
Width: 10em;
Width: auto;
}
. SpryIsIE6 #MenuBar. MenuItem. {MenuItemLabel}
Width: 1em; / * Equivalent to min-width in modern browsers * /.
}/ * First level of submenu items * /.
#MenuBar. Submenu. {}, MenuItem
do-family: Arial, Helvetica, without serif.
make-weight: bold;
do-size: 12px;
make-style: normal;
background-color: transparent;
padding: 0px 2px 0px 0px;
border-width: 1px;
border color: #cccccc #cccccc #cccccc #cccccc.
/ * Border styles are replaced by first and last items * /.
border-style: solid solid no solid;
}
#MenuBar. Submenu. {MenuItemFirst}
border-style: solid solid no 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: transparent;
color: #ffffff;
padding: 5px 6px 6px 12px;
Width: 7th;
}/ * Hover States for containers, objects and labels * /.
#MenuBar. {MenuItemHover}
background-color: transparent;
border color: #cccccc #cccccc #cccccc #cccccc.
}#MenuBar. MenuItemWithSubMenu.MenuItemHover. {MenuItemLabel}
background-color: transparent; / * expose this propeller separately * /.
color: #999999;
}
#MenuBar. MenuItemHover. {MenuItemLabel}
background-color: transparent;
color: #999999;
}
#MenuBar. Submenu. {MenuItemHover}
background-color: #003300;
border color: #cccccc #cccccc #cccccc #cccccc.
}#MenuBar. Submenu. MenuItemHover. {MenuItemLabel}
background-color: transparent;
color: #999999;
}
/ * The submenu - first-level submenus properties * /.
#MenuBar. {SubMenuVisible}
background-color: #003300;
min-width: 0%; / * This prevents the menu being lean that the parent MenuItemContainer - but not available on ie6 nice to have * /.
border-color: #ffffff #ffffff #ffffff #ffffff.
border-width: 0px;
border-style: none none no none;
}
#MenuBar.MenuBar. SubMenuVisible {/ * menu bar horizontally for only * /}
top: 100%; / * 100% is at the bottom of menuItemContainer parent * /.
left: 0px; / * "left" may need tuning according to borders or padding applied to the bar MenuItemContainer or MenuItem,.
and your personal taste.
0px align left drop-down list with the content of the MenuItemContainer area. Assuming you keep the margins 0
on MenuItemContainer and on the parent MenuItem
menu bar, which in fact equals the sum of padding-left MenuItemContainer & MenuItem align
the drop-down menu to 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 the width of the parent MenuItemContainer - elements will avoid total collapse * /.
}
/ * The sous-menu--deuxieme submenu level properties and beyond - are visible to descendants. MenuLevel1 * /.
#MenuBar. MenuLevel1. {SubMenuVisible}
background-color: #003300;
min-width: 0px; / * Do not neeed to match the width of the parent MenuItemContainer - elements will avoid total collapse * /.
Top: 0px; / * If you want, you can move this down a smidge to separate the top item "submenu s of menubar.
It is really necessary only for the submenu on the first point of MenuLevel1, or you can make it negative to make the submenu
vertically 'centered' about his call to * /.
left: 100%; / * If you want to move the submenu on the left to partially cover the point of his call, you can add a margin to the left with a
negative value to this rule. Alternatively, if you use the elements of fixed width, you can change this value on the left
to use px or ems to get the desired offset. */
}
/ * IE6 rules - you can remove these if you do not want to support IE6 * /./ * Note about several classes in IE6.
Some rules above use several class names to an element of selection, such as "hover" (MenuItemHover) and 'a a submenu' (MenuItemWithSubMenu).
* give the selector '. MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately, IE6 does not support using mutiple classnames in a selector for an element. For a selector like '. foo.bar.baz', IE6 does not take into account
* all but the final classname (here, ".baz") and defines the specificity in consequence, with only one of these classs as significant. To work around this problem
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate classnames for IE6, such as "MenuItemWithSubMenuHover".
* Given that many of these necessary, the plugin does not generate additional classes for modern browsers, and we use the copies of CSS2 style class
* syntax for that. Since IE6, both apply the rules where the
* It should not and gets the specificity wrong too, we have rules of order carefully, then misapplied rule in IE6 can be overridden.
* So we put first the multiple class rule. IE6 wrongly apply this rule. We follow this with the single class rule that it would be
* replace by mistake, by ensuring that the specificity of IE6 interpreted as is the same as the unique class selector, so the latter wins.
* We then create a copy of the rule of multiple class, adding a "." SpryIsIE6' in the context of the class and to ensure that the specificity
* the selector is high enough to beat the rule of single class in the case of "match of these two classes. We place the rule of IE6 at the end of the
* block of css styling to make it easy to remove if you want to drop support for IE6.
* 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 need of IE conditional comments to these rules.
*/
. SpryIsIE6 #MenuBar. MenuBarView. MenuItemWithSubMenuHover. MenuItemLabel / * selector IE6 * /}
background-color: transparent; / * expose this propeller separately * /.
color: #999999;
}
. SpryIsIE6 #MenuBar. MenuBarView. Submenu. MenuItemWithSubMenuHover. MenuItemLabel / * selector IE6 * /}
background-color: transparent; / * expose this propeller separately * /.
color: #999999;
}
. SpryIsIE6 #MenuBar. Submenu. Submenu / * selector IE6 * /}
left margin:-0px; / * Offset at least part of a version of 'double upholstery' bug IE6 'double margin "* /.
}
/ * EndOAWidget_Instance_2141544 * /.
< / style >
< script type = "text/xml" >
<!--
< oa:widgets >
< oa:widget wid = binding "2141544" = "#MenuBar" / >
< / oa:widgets >
->
< /script >
< / head >< body bgcolor = "#17321A" >
< div id = "outerWrapper" >
< div id = "header" > < img src = "media/header.jpg" width = "960" height = "160" alt = "organica title" / > < / div > "
< div id = "navbar" >
< ul id = "Menu bar" >
< li > < a href = "#" > home < /a > < /li >
< li > < a href = "#" > Organica kitchen < /a >
< ul >
< li > < a href = "#" > Menus < /a > < /li >
< li > < a href = "#" > Catering < /a > < /li >
< /ul >
< li > < a href = "#" > Bar juice < /a > < /li >
< li > < a href = "#" > produce < /a > < /li >
< li > < a href = "#" > grocery store < /a > < /li >
< li > < a href = "#" > < /a > < /li > body care
< li > < a href = "#" > events < /a > < /li >
< li > < a href = "#" > Contact < /a > < /li >
< ul >
< li > < a href = "#" > Directions < /a > < /li >
< li > < a href = "#" > job < /a > < /li >
< /ul >
< script type = "text/javascript" >
BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2 ("#MenuBar", {}
widgetID: "Menu bar",
widgetClass: 'MenuBarFullwidth the menu bar. "
insertMenuBarBreak: true,
mainMenuShowDelay: 100,.
mainMenuHideDelay: 200,.
subMenuShowDelay: 200,.
subMenuHideDelay: 200
});
EndOAWidget_Instance_2141544
< /script >
< / div >
< div id = "contentWrapper" >
< div id = "sidebar" > < / div >
< div id = "content" > < / div >
< / div >
< / div >
< / body >
< / html >You have some tags not closed in the html code. Here's what your code should look like the opening
tag to the closingtag. It's a good idea to 'comment' where yourend of tags. In the code, you will see that I did this like:. Some people like to put "comment" inside the closing like tag: If you move it thenthe comment goes with it.
- Restoration
- Juice bar
- Produce a
- Grocery
- Care of the body
- Events
- Contact
-
Problem with the 2.0 (1.0) Spry menu bar re - CSS
Hello:
I'm having some trouble with a Spry (horizontal) 2.0 (1.0) menu bar I created. Initially, I thought the problem was in what concerns the problems of rendering on IE 6.0, but the problem seems to be more general than that, and I came to believe that this has to do with the CSS created by the browser Widget and changed once imported in the Web page. That's why I chose to post my question here rather than on the spry page.
I leaned on the tutorial provided by David Powers (Bayside.css) and in addition any other documentation regarding the Spry UI bar menu. The problem appeared as one of the 6 IE rendered page with a gap that is created when the menus appear, so push down the divs that appear below the page.
However, through a laborious process of trial and error, my problem now seems to be that when I export the CSS generated by the browser widget to an external style sheet (the style sheet General governing the whole of the site), he comes into conflict with other CSS styles for links etc. The end result is that all the padding, background colors, background images, and colors of text are lost. As long as the CSS is in the head that this does not happen.
My thought is that this must have to do with the problems of specificity, inheritance, etc.
The site is available at the following ADDRESS: http://www.aclco.org/testing/index.html. In its current form, all the CSS associated with the menu bar is located at the head of each page. (see CSS below).
My question is I can set up a separate style sheet for the menu bar horizontally and have these styles applied specifically (and only) in the menu bar my only alternative is to work through the rest of the General style sheet and the work by problems of specificity/inheritance - that may be the "best" practice , but it may create another 'cascading' [sic] problems elsewhere.
Advice or suggestions or directed readings (which would point to a solution) that could be offered would be greatly appreciated.
Steve Webster
The horizontal CSS governing the menu bar is as follows: (currently the following CSS is embedded in the web page's head)
< style type = "text/css" >
/ * - Start styles horizontal Spry Menu Widget 2.0 (1.0) menu bar-* /.
/ * BeginOAWidget_Instance_2141544: #MenuBar * /.
/ * Values for skinning a basic through presets menu. If the default settings are not sufficient, most count should be done in
These rules, except for the images used to down or to the right pointing arrows, located in the SpryMenuBasic.css file
They take the following classes of widget for layout of menu (located in a "Preset")
. MenuBar - applies to all menu bars - default is a horizontal bar, all submenus are vertical - level 2 subs and beyond are drop down to the right.
. MenuBarVertical - vertical main bar; All submenus are drop down to the right.
You can also pass in extra classnames to set your desired top-level menu bar layout. Normally, they are defined by using a predefined setting.
They apply only to the horizontal menu bars:
MenuBarLeftShrink - the menu bar will be horizontally "shrinkwrapped" be just big enough to hold his items and left-aligned
MenuBarRightShrink - as MenuBarLeftShrink, but right-aligned
MenuBarFixedLeft - set to a specified width defined in rule "." MenuBarFixedLeft', and left-aligned.
MenuBarFixedCentered - Fixed to a specified width defined in rule "." MenuBarFixedCentered',.
and centered in its parent container.
MenuBarFullwidth - expands to fill the width of the parent container.
In general, all the rules specified in this file are prefixed by #MenuBar so that they don't apply to instances of the widget inserted along
with the rules. This allows use of multiple MenuBarBasic widgets on the same page with different layouts. Due to limitations in IE6.
There are a few rules where this was not possible. These rules are so noted in the comments.
*/{#MenuBar}
background-color: transparent;
do-family: Arial, Helvetica, without serif. / * Specify the fonts on the bar menu and submenu MenuItemContainer, so MenuItemContainer.
MenuItem and MenuItemLabel
at a given level all use the same definition for ems.
Note that this means that the size is also inherited from the submenus of the child,
so be careful when using other than relative sizes
100% on the fonts submenu. */
make-weight: normal;
font size: 17px;
make-style: normal;
padding: 0;
}
/ * ATTENTION: because ID + class selectors do not work correctly in IE6, but we want to restrict these rules to all this
instance of widget, we used the concatenated string classnames to our selectors for the type of layout of the menu bar
in this section. These have very low specificity, so be careful not to overstep accidentally. */. MenuBar br {/ * using only a class, so there same specificity that the "."} MenuBarFixedCentered br' rule bleow * /.
display: none;
}
. {MenuBarLeftShrink}
float: left; / * shrink the content, but also to float the menu bar * /.
Width: auto;
}
. {MenuBarRightShrink}
float: right; / * shrink the content, but also to float the menu bar * /.
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 bar small objects - these actually apply to all items and get substituted for the submenus level 1st or successive * /.
#MenuBar. {MenuItemContainer}
padding: 0px 0px 0px 0px;
margin: 0; / * Zero margin on the containers of items. The MenuItem is the active area of hover.
For most elements, we have padding top or bottom or border only on MenuItem
or a child so we keep all tiled submenu with elements.
Definition of this 0 avoids the "dead zones" to hover. */
}
#MenuBar. {}, MenuItem
padding: 10px 10px 10px 4px;
background-color: #000088;
background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/navigation%20Bar%20Segm ent - Dark.png);
background-repeat: repeat-x;
}
#MenuBar. {MenuItemFirst}
border-style: none none no none;
}
#MenuBar. {MenuItemLast}
border-style: none none no none;
}#MenuBar. MenuItem. {MenuItemLabel}
text-align: center;
line-height: 1.4em;
color: #ffffff;
background-color: transparent;
padding: 0px 18px 0px 5px;
Width: 10em;
Width: auto;
}
. SpryIsIE6 #MenuBar. MenuItem. {MenuItemLabel}
Width: 1em; / * Equivalent to min-width in modern browsers * /.
}/ * First level of submenu items * /.
#MenuBar. Submenu. {}, MenuItem
do-family: Arial, Helvetica, without serif.
make-weight: bold;
font size: 15px;
make-style: normal;
background-color: #000088;
padding: 0px 2px 0px 0px;
border-width: 0px;
border color: #cccccc #cccccc #cccccc #cccccc.
/ * Border styles are replaced by first and last items * /.
border-style: solid solid no solid;
}
#MenuBar. Submenu. {MenuItemFirst}
border-style: none;
padding: 0px;
}
#MenuBar. Submenu. MenuItemFirst. {MenuItemLabel}
padding-top: 0px;
}
#MenuBar. Submenu. {MenuItemLast}
border-style: none none no none;
}
#MenuBar. Submenu. MenuItemLast. {MenuItemLabel}
padding-bottom: 10px;
}
#MenuBar. Submenu. MenuItem. {MenuItemLabel}
text-align: left;
line-height: 1em;
background-color: transparent;
color: #ffffff;
padding: 10px 10px 10px 10px;
Width: 240px;
}/ * Hover States for containers, objects and labels * /.
#MenuBar. {MenuItemHover}
background-color: #2E35A3;
background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/navigation%20Bar%20Segm ent%20Light2.png);
background-repeat: repeat-x;
}#MenuBar. MenuItemWithSubMenu.MenuItemHover. {MenuItemLabel}
background-color: transparent; / * expose this propeller separately * /.
color: #ffffff;
}
#MenuBar. MenuItemHover. {MenuItemLabel}
background-color: transparent;
color: #ffffff;
}
#MenuBar. Submenu. {MenuItemHover}
background-color: #2E35A3;
}#MenuBar. Submenu. MenuItemHover. {MenuItemLabel}
background-color: transparent;
color: #ffffff;
}
/ * The submenu - first-level submenus properties * /.
#MenuBar. {SubMenuVisible}
background-color: transparent;
min-width: 0%; / * This prevents the menu being lean that the parent MenuItemContainer - but not available on ie6 nice to have * /.
border-style: none none no none;
}
#MenuBar.MenuBar. SubMenuVisible {/ * menu bar horizontally for only * /}
top: 100%; / * 100% is at the bottom of menuItemContainer parent * /.
left: 0px; / * "left" may need tuning according to borders or padding applied to the bar MenuItemContainer or MenuItem,.
and your personal taste.
0px align left drop-down list with the content of the MenuItemContainer area. Assuming you keep the margins 0
on MenuItemContainer and on the parent MenuItem
menu bar, which in fact equals the sum of padding-left MenuItemContainer & MenuItem align
the drop-down menu to 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 the width of the parent MenuItemContainer - elements will avoid total collapse * /.
}
/ * The sous-menu--deuxieme submenu level properties and beyond - are visible to descendants. MenuLevel1 * /.
#MenuBar. MenuLevel1. {SubMenuVisible}
background-color: transparent;
min-width: 0px; / * Do not neeed to match the width of the parent MenuItemContainer - elements will avoid total collapse * /.
Top: 0px; / * If you want, you can move this down a smidge to separate the top item "submenu s of menubar.
It is really necessary only for the submenu on the first point of MenuLevel1, or you can make it negative to make the submenu
vertically 'centered' about his call to * /.
left: 100%; / * If you want to move the submenu on the left to partially cover the point of his call, you can add a margin to the left with a
negative value to this rule. Alternatively, if you use the elements of fixed width, you can change this value on the left
to use px or ems to get the desired offset. */
}
/ * IE6 rules - you can remove these if you do not want to support IE6 * /./ * Note about several classes in IE6.
Some rules above use several class names to an element of selection, such as "hover" (MenuItemHover) and 'a a submenu' (MenuItemWithSubMenu).
* give the selector '. MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately, IE6 does not support using mutiple classnames in a selector for an element. For a selector like '. foo.bar.baz', IE6 does not take into account
* all but the final classname (here, ".baz") and defines the specificity in consequence, with only one of these classs as significant. To work around this problem
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate classnames for IE6, such as "MenuItemWithSubMenuHover".
* Given that many of these necessary, the plugin does not generate additional classes for modern browsers, and we use the copies of CSS2 style class
* syntax for that. Since IE6, both apply the rules where the
* It should not and gets the specificity wrong too, we have rules of order carefully, then misapplied rule in IE6 can be overridden.
* So we put first the multiple class rule. IE6 wrongly apply this rule. We follow this with the single class rule that it would be
* replace by mistake, by ensuring that the specificity of IE6 interpreted as is the same as the unique class selector, so the latter wins.
* We then create a copy of the rule of multiple class, adding a "." SpryIsIE6' in the context of the class and to ensure that the specificity
* the selector is high enough to beat the rule of single class in the case of "match of these two classes. We place the rule of IE6 at the end of the
* block of css styling to make it easy to remove if you want to drop support for IE6.
* 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 need of IE conditional comments to these rules.
*/
. SpryIsIE6 #MenuBar. MenuBarView. MenuItemWithSubMenuHover. MenuItemLabel / * selector IE6 * /}
background-color: transparent; / * expose this propeller separately * /.
color: #ffffff;
}
. SpryIsIE6 #MenuBar. MenuBarView. Submenu. MenuItemWithSubMenuHover. MenuItemLabel / * selector IE6 * /}
background-color: transparent; / * expose this propeller separately * /.
color: #ffffff;
}
. SpryIsIE6 #MenuBar. Submenu. Submenu / * selector IE6 * /}
left margin:-0px; / * Offset at least part of a version of 'double upholstery' bug IE6 'double margin "* /.
}
/ * EndOAWidget_Instance_2141544 * /./ * End Spry Menu Bar Widget 2.0 (1.0) Horizontal Menu Custom styles * /.
< / style >The CSS for the site in general is reproduced below: (my belief is that it is a: link, a: visited, a: hover, a: active styles that may be in conflict).
@charset "utf-8";
{body
Police: 100% Verdana, Arial, Helvetica, without serif.
min-height: 0; / * this is necessary to overcome the "haslayout" bug found in Windows 7 in conjunction with IE8. For more information see: URL - http://reference.sitepoint.com/css/haslayout.html * /
margin: 0; / * It is advisable to zero, the margin and the filling of the body to hold element has a different default browser * /.
padding: 0;
text-align: center; / * This allows the centering of the container and overcomes an inherent bug in IE 5 * /.
Color: #000000;
list-style-image: none;
background-color: #FCFCFC;
}H1, h2, h3, h4, h5, h6 {}
color: #000066;
}
a: link {}
color: #151A 96.
text-decoration: underline;
}
a: visited {}
text-decoration: underline;
color: #1B8DCD;
}
a: hover {}
text-decoration: none;
color: #F30A0A;
}
a: active {}
text-decoration: underline;
color: #151A 96.
}#container {}
Width: 960px;
margin: 0 auto; / * margins (in conjunction with a width) auto Center the page * /.
text-align: left; / * This setting overrides the text-align: center on the body element. */
background-image:
URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Midsection%20_960.png);
background-repeat: repeat-y;
}#header {}
padding: 0; / * This filling is the alignment to the left of the items in the div that appear below. If an image is used in the #header instead of text, you can remove the padding. */
Width: 960px;
height: 332px;
background-image:
URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Header_960.png);
background-repeat: repeat no.;
}
#header h1 {}
margin-right: 0px; / * zero setting of the margin of the last element in the #header div tag will prevent the collapse of margin - inexplicable space between divs. If the div has a border around it, this isn't necessary, which also allows to avoid the collapse of margin * /.
padding: 0; / * padding instead of margin will allow you to keep the edges of the div element * /.
display: none;}
#header img {}
display: none;
}{#Main_nav_contents}
padding: 0;
margin-top: 0px;
height: 39px;
Width: 950px;
padding-top: 275px;
padding-left: 39px;
z index: 3;
}{#MenuBarVertical}
margin-bottom: 50px;
padding-top: 50px;
padding-bottom: 200px;
padding-left: 15px;
padding-right: 15px;
}
{.mainContent_left}
margin: 0; / on this div element right margin creates the column on the right side of the page - no matter how content div the sidebar1″ contains, the space of the columns will remain. You can remove this line if you want the #mainContent div text to fill the space of #sidebar1 when the content of #sidebar1 is complete. */
padding-left: 30px;
padding-right: 20px; / * Remember that the fill is space inside the box of div and margin is the space outside the div box * /.
Width: 600px;
float: left;
}
{.sidebar_right}
float: right; / * because this element is floating, it takes a width * /.
Width: 270px; / actual width of this div, in browsers comply with the standards, or the standard mode of Internet Explorer includes the padding and border in addition to width * /.
top of the margin: 30px;
margin-left: 0;
margin-right: 10px;
font-size: 90%;
}
{.mainContent_right}
margin-left: 10px;
padding-left: 30px;
padding-right: 20px;
Width: 600px;
float: right;
}
{.sidebar_left}
float: left; / * because this element is floating, it takes a width * /.
Width: 270px; / actual width of this div, in browsers comply with the standards, or the standard mode of Internet Explorer includes the padding and border in addition to width * /.
top of the margin: 30px;
margin-left: 30px;
margin-right: 0;
overflow: hidden;
font-size: 90%;
}
{.main_content_centered}
Width: 650px;
margin left: 155px;
}{.main_content_centered_header}
margin left: 75px;
}{.sidebar_textbox}
margin: 0px;
Width: 260px;
padding: 2px;
}
{.sidebar_textbox_header}Width: 255px;
height: 58px;
background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/portrait%20Textbox%20he ader.png);}
{.sidebar_textbox_background_middle}
Width: 255px;
padding-top: 12px;
padding-bottom: 10px;
background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/portrait%20Textbox%20Mi ddle.png);
background-repeat: repeat-y;
}{.sidebar_textbox_content}
/ * The width and filling are fixed as follows to reflect the quirks in the rendering of the browser while ensuring that the text is contained in the background of the text box * /.
Width: 230px;
padding-left: 20px;
padding-right: 40px;
}{.sidebar_textbox_footer}
Width: 255px;
height: 64px;
background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/portrait%20Textbox%20Foo ter.png);}
#issues_menu a: link {}
color: #151A 96.
text-decoration: none;
make-weight: bold;
}
#issues_menu a: visited {}
color: #151A 96.
make-weight: bold;
text-decoration: none;}
#issues_menu a: hover {}
color: #F30A0A;
make-weight: bold;
make-style: oblique;
text-decoration: none;
}#issues_menu a: active {}
color: #151A 96.
make-weight: bold;
text-decoration: none;
}{#archives}
padding-top: 15px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 0px;}
{.landscape_textbox}
Width: 500px;
margin-right: 0px;
margin left: 30px;
padding-top: 35px;.
padding-bottom: 25px;
make-style: normal;
make-weight: normal;}
{.landscape_textbox_hdr}
Width: 500px;
height: 38px;
margin: auto;
padding: 0;
background-image:
URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Landscape%20Textbox%20Header.png);
}{.landscape_textbox_middle}
Width: auto;
margin: auto;
padding-top: 12px;
padding-bottom: 12px;
background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/landscapte%20Textbox%20 Middle.png);
background-repeat: repeat-y;
}{.landscape_textbox_content}
Width: 450px;
Padding: 25px;
}{.landscape_textbox_ftr}
Width: 500px;
height: 44px;
margin: auto;
padding: 0;
background-image: url (.. /ACLCO%20Graphics%20-%20Web%20Site%20Parts/Landscape%20Textbox%20F ooter.png);}
#footer {}
padding: 0; / * This filling is the alignment to the left of the items in the div that appear above him. */
Width: 960px;
height: 222px;
background-image:
URL (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Website%20Footer%20_960.png);
background-repeat: repeat no.;
}#footer p {}
margin: 0px; / * zero setting the margins of the first element in the footer will avoid the possibility of the collapse of the margin - a space between the div tags * /.
padding: 0px; / * padding on that element will create space, just as it would the margin, free margin collapse question * /.
text-align: center;
margin-left: 50px;
right margin: 50px;
padding: 10px;
font size: small;
}
#footer h5 {}text-align: center;
}
.fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
float: right;
left margin: 8px;
}
.fltlft {/ * this class can be used to float an element on your page to the left * /}
float: left;
right margin: 8px;
}
.clearfloat {/ * this class must be placed on an element div or break and should be the last item before closing a container should completely contain a float * /}
Clear: both;
height: 0;
font size: 1px;
line-height: 0px;
}
{.dropcap}
display: block;
float: left;
line-height: 80%;
font size: 250%;
make-weight: bolder;
color: #000066;
Padding: .1em .03em 0 0;
}{.red_arrows}
list-style-position: outside;
list-style-image: url (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Arrow%20Large.png);
}{.blue_bullets}
list-style-position: outside;
list-style-image: url (.. / ACLCO%20Graphics%20-%20Web%20site%20Parts/Bullet%20Medium%20Full.png);
}attention {}
color: #F30A0A;
font-size: x-large;
do-family: Georgia, "Times New Roman", Times, serif;
make-style: italic;
Police-weight: 900;
}
{.attention_small}
color: #F30A0A;
font size: large;
do-family: Georgia, "Times New Roman", Times, serif;
make-style: italic;
Police-weight: 900;
}.table {}
table-layout: fixed;
}
. Blue {}
Color: #00F;
}
#container .mainContent_left p .blue {}
color: #0303A 0;
}Hello Steve
Well, I checked your page in IE6 and it seems to work fine for me except that here seemes to be a little space between
- items that may be due to lack of support of .png? In other words, if there is a little transparency on the edge of the chart? Maybe it's more a shot in the water on my part!
Now my suggestion to you would be to mark this thread as closed/replied and after again with just the link to the page and your question. Short is sweet.
Martin
-
Vertical and submenu menu with Accordion for multiple master pages.
Hello
, I created a menu and a submenu with accordion, widget, my site has multiple pages and more master pages, how to do vertical menu of the homepage is also a menu of other pages or other master pages, because if I copy the vertical menu object on the other master pages, this isn't the same object, if I make a change in the menu of the a-master I also make the same change to menu b-master , so there is more work to do but there is a big problem for navigation because when I click on a submenu item I change my page, so I load the master page associated with the page loaded years then a new menu now appears as closed and I want to keep open that it was opened when I clicked on the first time.
I hope that's clear...
Thank you.
JC Quirin.
New: Create a master with no menu and the masters of the child with the menus you need. Assign the child mastes adapted to your layout.
To create child master pages, create a new master and drag the master parent on it.
I think, you used an accordion wigget for you the menu. If so, you can open this accordion, as it should be in Design view, in the various masters. It should open in this State, when you open a page using that master.
Maybe you are looking for
-
After that put 36.0.1 to date, does not connect to internet
After update, don't be loading not pages. Does not connect to Comcast. Computer restarted from scratch, reset modem and router - nothing works. I tried Safe Mode early, did not work. Internet Explorer works fine. Mail works fine. There is no error me
-
I play a game of myspace and open a tab at one of my games. I disconnect from the acct and connect to an another ACCT. The tab I opened becomes the new login name and so I can't no more then an acct upwards on the tabs. He has not done this before an
-
Hi there, I been using MacBook Air and IPad2 for awhile. Recently, I lost my MacBook Air and am interested open ICloud to check my folder/old records. Can I get directions to the opportunity to see my files in I have the cloud.
-
INF install failure insufficient reason of system at the start of XP resources
I received the "low disk space" message for about a month and have been delete certain files and programs that I have no need or use for longer. This morning when I booted my computer, I got the message that WIndows does not load my profile, then I
-
15 - d017cl HP Recovery Manager fails
I bought this computer a few days ago, and the first thing I did was to make recovery disks. I ran into a damaged file yesterday and was forced to do a system restore. I was able to complete the system restore yesterday evening and starting the wind