Horizontal Sub Menu
I understand how to create a horizontal spry menu, but it still gives me vertical submenus. How can I create a horizontal submenu? I've been told that it is controlled in the "ul.menubarhorizontal ul" , but that doesn't seem to work. There are also 2 different styles called "ul.menubarhorizontal ul" which do I use if either? Could someone help gie me some clarification please!?
Once again, I want to thank you for your time, I greatly appreciate it. This is a problem I just can't seem to figure out. I inserted the code as you suggested, but Im still getting a vertically displayed submenu. I attached a pic of a screen shot of my practice site and a pic of what I want to achieve. Here is my current code after the changes:
<!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>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
ul.MenuBarHorizontal ul {
width: auto;
-->
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</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 href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
Similar Messages
-
Horizontal sub-menu - can you help?
I'd like to make a horizontal sub-menu appearing under a
horiziontal root menu (rather than the usual vertical drop-down
menu) - can this be done?
I know I could do this type of menu using Flash but I'd
rather not contain the navigation for the site in a .swf file - not
very user-friendly.Try:
- iOS: Not responding or does not turn on
- Also try DFU mode after try recovery mode
How to put iPod touch / iPhone into DFU mode « Karthik's scribblings
- If not successful and you can't fully turn the iOS device fully off, let the battery fully drain. After charging for an least an hour try the above again.
- If still not successful that usually indicates a hardware problem and an appointment at the Genius Bar of an Apple store is in order.
Apple Retail Store - Genius Bar -
Horizontal Spry Menu Bar with Horizontal Sub Menu
I have created a horizontal menu bar with only one main menu item leading to a sub menu. I would like this sub menu to display horizontally also, instead of vertically as added by default.
I am relatively new to dreamweaver and would appreciate any help possible.Came across the fix by accident thru extensions in menu bar,
and choice of cursor for each section. Feeling happy! Happy New
Year everyone. -
Horizontal sub menu in ie, need vertical?
Built a SpryMenuBarHorizontal with one sub menu. Works fine in all browers except ie.In ie sub menu is horizontal instead of vertical.
Any help?
ThanksI put your page through the validator:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Foptionsclinic.net%2Ffirst_step.ht ml
Main problem it identified was "end tag for "p" omitted."
I looked at your page in "view source" and see this:
<div id="headernav2">
<p>CALL US: 817-599-6700<br />
HOT LINE: 800-392-HELP<br />
EMAIL US: <a href="mailto:[email protected]">[email protected]</a><br />
CHAT WITH US:
I think that <p> element is not closed.
Whether it has anything to do with your spry menu is yet to be seen. I fix my own code in this way. I do not understand why some things work or do not work. My suggestion to you is add these tiny little characters in your code </p> and test it. If it works call me a Coding deity. If it doesn't work, remove it and post again content in the knowledge that someone, a complete stranger, was prepared to have a look at your page.
For my part, I have a hunch that it does have something to do with your menu. If not, it needs fixing anyway.
Regards
Martin -
Help with Horizontal Sub Menu Position
I am building a horizontal spry menu, the default is set so that the submenu displays vertically. However, I would like the submenu to display horizontally as well, so that it is flush with the bottom of the main menu. Does anyone know how to do this?
add this style rule to your page:
<style type="text/css">
<!--
ul.MenuBarHorizontal ul {
width: auto;
-->
</style>
Ben -
Horizontal menu with horizontal sub menu using image rollovers or similar
Hello,
I am brand new to web design and working on my first site. What I lack in skills, I have in free time to learn right now : ) Please let me know if there is a tutorial or other resource that describes what I am trying to do...I've been searching for days and just can't find what I'm after.
The design concept is a menu of main categories that apear to be floating over an object. When you hover over one, it looks like it gets pressed down in space resulting in the next line populating with subcategories to be selected. If you click on the main elements, you would be directed to that page - Services for instance. If you just hovered over a main category, you would be presented with a list of sub-categories that behave in the same fashion. If you then clicked on one of the sub-categories, you would be taken to that specific page.
Here's a sequence of images that show what I'm after.
I built all this in Illustrator as described in a Lynda.com tutorial. I then exported slices to dreamweaver and started building content. Each of the categories and sub categories is a separate slice with images built for the rollovers. I was able to build the main categories and get them to visually sink upon using an imageswap...now I'm stuck on how to get the second line to behave as I described.
This is a fun learning experience. Let me know if there is a better way to achieve the design. I just stared investigating SSIs as well and see the value in having this menu in just one place, referenced into all my subsequent pages. I have successfully embeded an SSI footer with rollovers on my page, but this menu problem is really tough for me.
I really appreciate any pointers.
Thanks,
Jeff PrinceI tried building a Spry Horizontal menu to get what I want, but I had no success there. Any tips for that?
On a separate note...I do not know if it is proper to use a 'tabbed panel' for my menu project, but it seems to work fine. I have built both the top (main category) and bottom (sub category) lines of my menu using spry with .png image rollovers.
Now I just need to find out how to make the main category button rollover stay 'down' while browsing the subcategories. I would also like to get the subcategories to populate upon mouseover of the main category, without requiring a selection. Now that would be slick : ) In my example above, the 'services' title should be depressed while in that submenu and look like 'landscape design'.
One minor problem is the space created between my subcategory images. I can't find the .css or .js that is creating that space. I've really trimmed down all the .css and do not know where else to hunt.
Thanks for any advice,
Jeff -
I want to have JMenu on a Side bar(JPanel) with sub menu.
I want to have the JMenu on the sidebar(which is a
JPanel placed at WEST). This JMenu shall have the sub
menu with it. I got the JMenu on the Sidebar but when
i take mouse over(or click) the MenuItem it is
displaying the sub Menu. I am attaching the my code.
Can anyone please let me know why it is not displaying
the sub menu and what should be added to my code to
work?
Thanks in Advance(see below for code)
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
public class SideBarMenu extends JFrame {
JMenuItem menuItem1,menuItem2;
JMenu books, softwares, tools;
JSeparator horizontal1, horizontal2,horizontal3;
JPanel p1, p2;
public static void main(String[] args) {
SideBarMenu vAR = new SideBarMenu();
public SideBarMenu() {
super("Side Bar");
setSize(500,500);
setLocation(150,100);
setResizable(true);
Container content = getContentPane();
p1 = new JPanel(new BorderLayout());
p2 = new JPanel();
p2.setLayout(new GridLayout(20,1));
p2.setBorder(BorderFactory.createLineBorder(Color.black,1));
books = new JMenu("Books");
horizontal1 = new JSeparator( JSeparator.HORIZONTAL );
softwares = new JMenu("Softwares");
horizontal2 = new JSeparator( JSeparator.HORIZONTAL );
tools = new JMenu("Tools");
horizontal3 = new JSeparator( JSeparator.HORIZONTAL );
//sub Menu for menu "books"
menuItem1 = new JMenuItem("Java");
books.add(menuItem1);
menuItem2 = new JMenuItem(".Net");
books.add(menuItem2);
//sub Menu for menu "Softwares"
menuItem1 = new JMenuItem("Java");
softwares.add(menuItem1);
menuItem2 = new JMenuItem(".Net");
softwares.add(menuItem2);
//sub Menu for menu "tools"
menuItem1 = new JMenuItem("Java");
tools.add(menuItem1);
menuItem2 = new JMenuItem(".Net");
tools.add(menuItem2);
p2.add(books);
p2.add(horizontal1);
p2.add(softwares);
p2.add(horizontal2);
p2.add(tools);
p2.add(horizontal3);
p1.add(p2,BorderLayout.WEST );
content.add(p1);
setVisible(true);
}Hi Ashwin,
I saw the above code which is approaching my requirement... Thats cool man. Taking that as reference i modified it to make it what i want. The code i have modified and which is very closer to my requirement is attached below. I have set the Windows Look and Feel, because its easy to track my problems with it. The problems am having are:
1) When the mouse is removed from the menu its submenu is not disappearing.
2) When i take the mouse over the menu its making the name(Books/softwares/tools) of the menu invisible.
3) When i take the mouse over the sub menu items they are not getting highlighted, which means they are not listening
I hope u will solve these issues for me...
Also make the menu items work ie., just make them print when i click submenus like "Clicked books->java" and "clicked softwares->.Net" so that i get an idea of events....
Many Thanks .
Here we go,
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Container;
import java.awt.GridLayout;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionAdapter;
import javax.swing.BorderFactory;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JMenuItem;
import javax.swing.JPanel;
import javax.swing.JPopupMenu;
import javax.swing.JSeparator;
import javax.swing.UIManager;
public class SideBarMenu4 extends JFrame
JMenuBar menuBar;
JPopupMenu popup = new JPopupMenu();
JMenuItem menuItem1, menuItem2;
JMenu books, softwares, tools;
JLabel mainMenu = new JLabel("Main Menu");
JMenu subMenu;
JSeparator horizontal1, horizontal2, horizontal3;
JPanel p1, p2;
public static void main(String[] args)
SideBarMenu4 vAR = new SideBarMenu4();
public SideBarMenu4()
super("Side Bar");
setSize(500, 500);
setLocation(150, 100);
setResizable(true);
setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
Container content = getContentPane();
p1 = new JPanel(new BorderLayout());
try {
//MetalLookAndFeel.setCurrentTheme(new MacMetricsTheme());
UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");
} catch(Exception e) {}
p2 = new JPanel();
p2.setLayout(new GridLayout(30, 1));
p2.setBorder(BorderFactory.createLineBorder(Color.black, 1));
books = new JMenu("Books");
horizontal1 = new JSeparator(JSeparator.HORIZONTAL);
softwares = new JMenu("Softwares");
horizontal2 = new JSeparator(JSeparator.HORIZONTAL);
tools = new JMenu("Tools");
horizontal3 = new JSeparator(JSeparator.HORIZONTAL);
// sub Menu for menu "books"
menuItem1 = new JMenuItem("Java");
popup.add(menuItem1);
//books.add(menuItem1);
menuItem2 = new JMenuItem(".Net");
popup.add(menuItem2);
popup.setPopupSize(100,50);
menuBar = new JMenuBar();
menuBar.setLayout(new GridLayout(0, 1, 5, 5));
books.add(popup);
books.setComponentPopupMenu(popup);
books.addMouseMotionListener(new MouseMotionAdapter(){
public void mouseMoved(MouseEvent e)
popup.show(books, 88, 0);
softwares.add(popup);
softwares.setComponentPopupMenu(popup);
softwares.addMouseMotionListener(new MouseMotionAdapter(){
public void mouseMoved(MouseEvent e)
popup.show(softwares, 88, 0);
tools.add(popup);
tools.setComponentPopupMenu(popup);
tools.addMouseMotionListener(new MouseMotionAdapter(){
public void mouseMoved(MouseEvent e)
popup.show(tools, 88, 0);
// p2.add(menuBar);
p2.add(books);
p2.add(horizontal1);
p2.add(softwares);
p2.add(horizontal2);
p2.add(tools);
p2.add(horizontal3);
p1.add(p2, BorderLayout.WEST);
content.add(p1);
setVisible(true);
} -
How do you change orientation of sub level of horizontal spry menu?
Hi,
I am using Dreamweaver CS 4 on a Mac.
I wanted to create a horizontal spry drop down menu. Instead of the orientation of the drop down sub menu being a vertical ist, I wanted the sub menu to have a horizontal orientation (to mimic the horizontal orientation of the main menu) so that each button would be placed horizontally next to each other .
I m pretty new to CSS and HTML, but am having fun learning how to manipulate the code.
Please help! Thanks!
Gayle ;-)Adobe Fill & Sign does not yet have a feature to rotate PDF pages but there are several websites that will rotate a PDF for free and then you can bring that PDF with correct orientation into Fill & Sign to fill out. Any of the top hits when you google "rotate PDF free" will work.
Thanks,
Josh -
Muse 2014 -sub menu items appearing on roll-over etc.
Hi, complete newbie, so sorry if this has already been covered elsewhere. Only started using Muse about 1 month ago and now using Muse 2014 - using horizontal menu widget and discovered how it now shows sub-menus when hovering over the main menu item- I find this great!
I want a 'Contact Me' page with a basic form and this is not a problem, however, I want the sub-menus to appear when hovering over the other main menu items, but not the contact me page - might be completely off here, but created a 'Thank you' page as a child page of the contact me page and only want this displayed (not as a sub-menu choice when hovering over the contact me main menu item) when they have clicked the submit button on the form (I know how to set this re-direction in the forms options). Have tried playing with menu on the master page - switching off the edit together and changing settings on only the contact me menu item - without success- seems to apply to all main menu items.
I would like to know how to achieve sub-menus on other menu items - but not on contact me item; or whether I am going about trying to have a 'Thank you' response when someone submits the contact me form in the completely wrong way - can this be better achieved by other means?
I would really appreciate your advice and help. My published site is 'onyerbikegeordie.uk' with the main menus - except not with a contact me page as yet, but would give you an idea of what I am trying to achieve except for a contact me page.
Sorry for the long post, but thanks for reading and in anticipation of your help!
Joe
Message was edited by: Joe FitzpatrickHi, managed to find the answer to this myself. In Plan, right-click on page and select Menu Options > Exclude Page from Menus. Job Done!
Joe -
Positioning of spry sub menu in IE8
Hi - can anyone help with an IE8 issue concerning Spry? I have created a menu here:
http://www.clinicafiore.co.uk/jan2012/indexJan2012_1.html
In all the browsers I have tested (Chrome,FF,Safari,Opera) on Mac and PC platforms it works fine. In IE8 it doesn't (hooray).
The critical attribute is:
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: 189px;
top: 0;
I.e. I have pushed the sub-menu out 189px when visible and set the top value to 0 thinking this would align the sub-menu with the top of the main menu item.
Is there a better way to do this to cover all browsers or do I need some conditional code for IE?
Really.really grateful for any help
For good measure here's all the html & the css
HTML
<div id="leftNav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" title="ageing body" class="MenuBarItemSubmenu">AGEING BODY</a>
<ul>
<li><a href="#">Ageing Décolleté</a></li>
<li><a href="#">Ageing Hands</a></li>
<li><a href="#">Ageing Neck</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">ageing face</a>
<ul>
<li><a href="#">Ageing Lips</a></li>
<li><a href="#">Double Chin</a></li>
<li><a href="#">Downturned Mouth</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
CSS
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0.9em;
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: 0.9em;
position: relative;
text-align: left;
cursor: pointer;
width: 189px;
float: left;
font-weight: bold;
text-transform: uppercase;
/* 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: 189px;
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: 189px;
top: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 189px;
font-weight: normal;
text-transform: none;
/* 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;
font-weight: normal;
text-transform: none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #aee56b;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
border-bottom-width: thin;
border-bottom-style: dotted;
border-bottom-color: #FFF;
/* 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: #999999;
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: #999999;
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(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(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 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;I may be misinterpreting what it is that you want, partly because I thought we were talking horizontal menu and you point out a vertical menu.
I think that you used the vertical menu as an illustration to shopw how you want the submenu alligned. If that is correct, then please copy an paste the following into a new document and see the result in an IE8 browser.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
ul.MenuBarHorizontal ul {margin-left: 8em; margin-top: -35px;}
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</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 href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
If the above is not what you want, then please explain.
Gramps -
Horizontal Spry Menu appears as bullet point list in IE8 and below - fine in firefox, chrome and IE9
This one is breaking my brain! I have an horizontal spry menu bar in my website that renders correctly in all browsers except ie 8 and below where it appears like an unordered list - almost like no CSS had been applied at all. You can check out the site here http://www.webhance.com.au. The spry css looks like this:
@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: 130%;
cursor: default;
width: auto;
float:right;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
cursor: pointer;
width: 150px;
float: right;
text-align:center;
font-family:"AvantGarde Bk BT";
/* 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: 150px;
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
width: 150px;
/* 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-right: 1px solid #9fe2fd;
text-align:center;
font-family:"AvantGarde Bk BT";
background-color:#4c859d;
color:#FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
border-right: 1px solid #9fe2fd;
display: block;
cursor: pointer;
background-color: #4c859d;
padding: 0.5em 0.75em;
color: #FFF;
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: #4c859d;
color: #9cc9a0;
/* 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: #4c859d;
color: #9cc9a0;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
float: left;
background: #FFF;
The HTML for the section looks like this:
<div class="header">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" id=button1>Home</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Services</a>
<ul>
<li><a href="design.html">Web Design</a> </li>
<li><a href="maintenance.html">Web Maintenance</a></li>
<li><a href="social.html">Social Media</a></li>
</ul>
</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a> </li>
</ul>
<!-- end .header --></div>
I really really need some help - hope someone out there can point me in the right direction :-)
JulieHi Gramps - thanks for getting back to me - I took advantage of your advice to others with some other issues I had and they worked a charm so I was really hoping to hear from you :-)
Unfortunately removing media="only screen and (min-width: 769px) from the css call didn't resolve the problem. Check it out on my index page www.webhance.com.au/index.html Any other ideas?
Cheers, Julester -
HELP PLEASE!!! Horizontal Spry Menu
I'm having trouble with my horizontal spry menu. I have added
it and it looks great in Firefox. No problems at all, exactly how I
like it. But when previewed in Internet Explorer it doesn't show at
all. There's nothing. I've inserted the "mark of the web." Nothing.
I don't really know where I'm going wrong. I'm relatively new to
Dreamweaver and am using CS4. Can someone please help?Thank you Beth,
That has helped me a great deal, there is still a slight problem though... while the menus are falling vertically now they are not inline with the menu buttons, (slightly to the right each time).
You suggested I upload the website to a server but I am not at this stage yet and I'm not sure how to do this either! I don't know if it's possible to help me without this? My code is still the same, the only difference now being that both ul.MenuBarHorizontal ul and ul.MenuBarHorizontal ul li have stated widths as you suggested; 8em.
Maybe this will help show you the problem:
I know this is really bad quality I think you can see how the sub menu isn't directly underneath the heading (highlighted in blue). I want the sub heading to be inline with the 'About us' heading, do you know how to do this?
Thank very much for the help so far,
Kyra -
Cursor selection does not follow chapter order on sub-menu
I used iMovieHD6 to add chapter markers to my large DVD project. They "shared" very nicely into iDVD8 and the Chapter Selection sub-menus were created nicely.
The problem is that when I use the cursor arrows on the DVD remote (real or virtual, in or out of iDVD), the highlight jumps around the sub-menu items rather than moving in a logical order. For example, I have 4 sub-menus with 6 chapters in each. Let's use numbers for them starting with the upper left they are 1,2,3 and then at the lower left they begin 4,5,6. I am using the Reflection White theme. When I press the right remote cursor button it will move from 1 to 2 to 5 to 6 to 3 to 4 and back to 1. Note that this order is not the same for each sub-menu, but none of them go 1,2,3,4,5,6.
I don't know what might be wrong or how to correct it, but I have a really big project that is otherwise perfect and I'd really like to get it out, please help!
Thanks.I just wanted to add this before closing this topic.
After poking around with the Reflection theme I better understood what Len was talking about. It appears that there are no modifiable parameters in the theme itself that control the order of cursor's motion through the buttons. That I assume is hard-coded into iDVD and follows a pre-programmed logic.
The point of failure is the position and orientation of the buttons in the Reflection theme's sub-menus when added automatically. They are made to look to the viewer as though they are set on an angled surface and viewed at an angle from above. While our brains can process this effect nicely, iDVD's cursor logic doesn't fare as well.
The work-around is fairly simple: Realizing that iDVD treats all chapter buttons as though they are two-dimensional objects on a flat surface, you must re-arrange them so that from top-left to bottom-right they follow a logical order, with the first buttons higher and farther left than the later-selected buttons. You don't have to move them very far to get the desired result and it doesn't have to affect the overall appearance of the menu in a noticeable way.
A slight rearrangement in my case left the overall look of the chapter menu the same but yielded a zig-zag flow through the buttons as follows:
[1] [3] [5]
[2] [4] [6]
Pressing the right cursor key jumps from top left to bottom left to top center then bottom center then top right and finally bottom right before going back to the start. Granted this is not quite "right" in that if iDVD could "see" the menu the way my brain does it would go left to right across the upper row of buttons rather than zig-zagging, but I figure that as long as the user can understand how to get to the button they want it'll be fine.
If you really need your menu selection to move linearly left to right with those arrows and with the up/down arrow used to move it vertically, then you have to arrange the buttons on the menu in a rectangular pattern with the top of each row of buttons all in a nice horizontal line. Note that's not the same as the alignment line that Reflection provides for you, it's a true horizontal line in relation to the monitor screen.
I'd much prefer that iDVD revisit the logic of the cursor control code, perhaps adding the choice of allowing the numerical sequence of the chapters to dictate the order of the cursor's motion rather than their relative position on the screen, but since they don't call me for advice, the above will likely have to do. -
ERROR with Horizontal Spry Menu & IE 7 ONLY!
I created a new website with CS3 adding a horizontal Spry Menu across the top of the page. I am having a problem with this menu in Internet Explorer 7 ONLY! I don't have this problem with Firefox, Chrome or Safari. I wouldn't care so much but IE is the dominant browser. The site is: http://www.sunscapesolar.net. The problem is that when you mouse over any of the top-level menu titles that have sub-menus below like: PRODUCTS, SYSTEMS, INCENTIVES, etc., the body text shifts down and I get a white box popping up that says "false." I've checked everything I know but since DW created the javascript code, I don't know where to go. I have posted this problem three times and nobody has responded! Someone has to know what's wrong! Please help... I don't want to create the site from scratch. . .
Thanks in advance...
Mikefixed it myself - please ignore
-
Hi,
I have created a menu with four sub menu items. Unfortunately the sub menu navigation is horizontal and I want it to be vertical. How would I go about just making the sub menu vertical but leaving the main menu horizontal?
I've looked at all the menu options but can't for the life of me see where this option is toggled?
Thank-you.Here is the options associated with a verticle sub-menu:
Is this what you were looking for?
Julia
Maybe you are looking for
-
Excise invoice taxing values are not getting updated
Respected Members I have created a sales order and and done the billing and while creating of billing it creates excise invoice. Problem is that billing document and accounting document showing the values of BED and taxes but when we go to tcode j1ii
-
How can i check for my model number of dv6 pavilion?
i can not identify my laptop, i need to download drivers from hp.com serial number:[Personal Information Removed] product number:A3W63EA#A2N i have searched a lot but could not find any drivers i have searched on hp.com by the auto detect of the prod
-
How to make a 3d object of 2d image
Hello everyone, I have this image of a robot - crude, I would like to place this within another image (the map) and move it around according to the movements of the robot. I believe the best way to do this is by making a 3d object and placing the te
-
This is regarding the RRI jump. I am trying to jump from a report to a transaction. All the assignments are made to be generic. Now the problem is that when I try to execute this jump I get a warning stating that Selection for InfoObject cannot be u
-
HI EVERYONE - I AM NEW TO MAC & AM IN DESPIRATE NEED OF SOME ASSISTANCE :(
I have Fusion installed as I got Windows XP pro incase I couldn't get used to the Mac side easily.... Anyway being a total technophobe (female obviously) - I didn't know I could have taken snapshots of the VM position. Sooooooo -what did I do just no