Horizontal Menu Bar (using JQuery as opposed to Spry Assets)

In older versions, used SpryAssets to create a horizontal menu bar, but that is no longer supported. CC has lots of JQuery inserts, but none for a Horizontal Menu Bar. What do i do to create one?

Below are a few more menus you could use:
Pure CSS Drop-Menu
http://jsfiddle.net/NancyO/zN7fU/
CSS3 Dropdown Menus
http://www.red-team-design.com/css3-dropdown-menu
PVII's Pop-Menu Magic3 (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
Responsive Iconic
http://www.dynamicdrive.com/style/csslibrary/item/responsive_iconic_menu/
Nancy O.

Similar Messages

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

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
Teresa

Hello 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.

Spry Horizontal Menu Bar not working in IE

Hi! I am new to this forum and new to Dreamweaver. I recently used Dreamweaver to build a website to display my digital portfolio. I am not very good at this and don't understand much of this works. I inserted a spry horizontal menu bar for my navigation. I did change the original set up to have the background the colors I wanted and I also changed the size so it would go across the top of my page. This looks fine in Firefox and Safari but in Internet Explorer the bar displays vertically, which does not look good. Can anyone look at my code and tell me how I can fix this problem?
I appreciate any help I can get with this as I have tried everything I know.
This is the link to my site: www.digitaldesignsbymargee.com

Hi! I am new to this forum. I inserted a spry horizontal menu bar for my navigation but i cannot able veiw a horizontal menubar in IE though it works fine in google chrome and Mozila. Can anyone look at my code and tell me how I can fix this problem?
w@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: 0px;
    padding: 0px;
    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: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 14em;
    float: left;
    border-color: white;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: none;
    border-right-width: 1px;
/* 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: 14em;
    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: 14em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: 0 0 0 99%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.9em 0.75em;
    color: white;
    font-size: 14px;
    font-weight: bold;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    text-decoration: none;
    color: white;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    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
    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: 10px 85%;
/* 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
    b/ackground-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 10px 85%;
/* 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
    b/ackground-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;
     /* I have updated and checked the code as mentioned in the forum topic but still it is not working */
ul.MenuBarHorizontal a:visited { color: white;}
ul ul a { background-color: #436d9c; }
ul a.MenuBarItemHover { background-color: #19385a; }
ul .MenuBarItemSubmenu ul li a { border: none; }
ul a.MenuBarItemSubmenu.MenuBarItemSubmenuHover { background-color: #19385a; }
ul.MenuBarSubmenuVisible li { border: none; }
I appreciate any help I can get with this as I have tried everything I know.

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 mac to pc

Recently created this page: http://musicnotes.net/MNI/SPRY.html using Dreamweaver CS3 but it does not look the same in all browsers.
It starts out with the table width set for 100% and then hard sets the
column widths to force the complete heading to something like 1600 pixels
wide. The cell widths should be allowed to set themselves.
In IE 6.0, and probably IE 7.0, the mouse over point to change colors is a
narrow strip between the links. Results in white flashes as you move down.
In IE 8.0, which is now similar to FireFox, the mouseover color changes work
okay but the secondary panels overlap the primary column. It's workable but
doesn't look quite right.
Except for being forced super wide and too big, everything seems to work
okay in Firefox.
Does anyone know if these issues are resolved using CS4.

Thanks Gramps, will take a look and get sorted!
Date: Mon, 14 Feb 2011 19:00:03 -0700
From: [email protected]
To: [email protected]
Subject: I am having problems with my spry horizontal menu bar defaulting to the top of page in IE
The structure of your document needs fixing. You will be able to get a lot of information from here http://www.adobe.com/devnet/dreamweaver/css.html
After you have fixed the structure start with a fresh copy of SpryMenuBar. Read this before making any changes http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
Gramps
>

Horizontal menu bar appears vertical after upload

Hi,
I am new using Dreamweaver CS4 and have encontered a problem. I have made a nice looking (I think so) horizontal menu bar on my web project and it works/looks fine in the "LIve View" of DW. However on the web page after upload it looks like this:
http://www.competenciagroup.com/ColombiaTravel/index.html#
It has changed from horizontal to vertical and all formats are gone. Anybody have a clue?
Thanks in advance,
Ivan

The Spry stylesheet cannot be found.
The Spry CSS should be:
http://www.competenciagroup.com/SpryAssets/SpryMenuBarHorizontal.css
In your local working folder on your computer, is the Spry folder inside the working folder, or is it outside of that folder. The Spry Assets folder should be inside the folder where all your other html/image files are. The link in your html pages, shows that the Spry folder goes one level deeper than that.
The paths to both the spry css and the spry js file are wrong, you need to fix that and then upload the files again.
Hopefully you are working within a Defined Dreamweaver site - this is a very important first step before working on your site.
Define a site:
http://kb2.adobe.com/cps/140/tn_14028.html
Via the File Panels window, move the spry folder into your working folder *do not do it via windows explorer* it has to be done through Dreamweaver so that DW can correctly the file links. If everything goes correctly, you should be asked whether you want to update any links, so yes.. and hopefully the links will be corrected.
Usually the link should look like this if the Spry folder is inside your working folder structure:
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
Your link however shows as:
<link href="../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
This means that the browser is trying to find the files one level down from where you website files are stored on the server.. and it's not there.

Horizontal menu bar -- submenu display

Hi, everyone --
This is my first post here, and my first time using spry. I
am trying to set up my horizontal menu bar so that the submenus
open up horizontally -- instead of vertically -- below the parent
menu item. (If the submenu list opens up vertically below the
parent item it takes up too much space.)
Any suggestions?
Thanks so much!
Lisa

Found topic.
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1381916&highlight_key=y

Horizontal Menu Bar - 2 issues

Hello, I have been here asking questions before and I still
have a couple more.
I am using the horizontal menu bar with the spry 1.5
pre-release files.
LINK
2 things, first:
I want the submenu text to be smaller than the menu text,
i.e. menu text should be 11px and submenu should be 10px, I just
cant seem to rustle it out of the css to make it happen.
ul.MenuBarHorizontal ul li
display: block;
float: none;
width: auto;
white-space: nowrap;
font-size:10px;
the bold addition does not seem to be working.
Secondly:
When this menu is viewed in IE7 it looks as if the border is
sunken/iframe is being used, and there is the text "
false" located inside the submenu.
I have commented out the hacks in the css for IE to no avail.
Wondering why the border looks so weird and the word false is being
imposed on my submenu
Thanks in advance

To change the font-size, try placing the font-size property
on the <a> element of the submenus.
The IE7 sunken/iframe problem is a hack that is necessary to
make the submenus appear above any native windows (Flash, Selects,
etc) that may be in the browser window. It's showing because you
removed the background color off of the <a> elements. Try
making the <li> or the <a> background color white and
it should hide the iframe.
ul.MenuBarHorizontal ul li {
background-color: white;
border-bottom: solid 1px white; /* Workaround IE Gap bug */
ul.MenuBarHorizontal ul a {
font-size:10px;
I also noticed that your menus were suffering from the
infamous link in list gap IE bug. You can either remove *all*
whitespace in your lists to get around the bug *or* use the bottom
border property like I did above.
--== Kin ==--

Horizontal Menu Bar not displaying when published as it views in live view or preview

I am working on putting together our site and haven't used Dreamweaver in years so very rusty. I have a horizontal menu bar that is working properly in "live view" and in "preview" mode but when I publish the submenus are not working.
You can view the site at www.pulsecc.org
Any help will be greatly appreciated.

Thank you so much! That's a little frustrating how long I pulled my hair out trying to figure something this simple out!
Thanks again!

Horizontal Menu Bar Placement Problem in IE

I am having problem determining which CSS rule is causing a
horizontal menu bar to show correctly in the Dreamweaver Design
view, correctly in Firefox, but incorrectly in IE7. I have a
background image in the header, but the menu bar cover it up on the
left side in IE7. Any thoughts?
And while we are at it, any reason that the button hover
color touches the header logo in Firefox (as desired) but is
dropped down several pixels in IE?
I have attached a link to the site for viewing. I have also
attached the CSS code that the menu is using.
www.swcdc.grohse.com
Thanks for any help or ideas!

Anyone who increases their browser's text size will see the same thing. For wiggle room, reduce top-level links from 11 to no more than 7.
Nancy O.

Horizontal menu bar - increase the height and center the vertical treat position.

I am using SpryMenuBarHorizontal.css and want to increase the height of a horizontal menu bar 20 28px and have the menu names move to be centered vertically, rather than be aligned at the top.
Can anyone help me figure out how to do this?

In the following adjust the highlighted value to suit
ul.MenuBarHorizontal a {
padding: 0.5em 0.75em;
Gramps

Horizontal menu bar to stay visable

I'm looking to make a horizontal menu bar that moves up to the top of the page and then stays on the top visible, I"d like to know if its passable to do in Muse.
Something like the following link,on the bar where it say "easy to use...work anywhere..."
http://www.freshbooks.com/tour.php

Hello,
Unfortunately you cannot achieve this functionality using Adobe Muse' out of the box features.
You can Pin a menu to Browser top, however the functionality (where Menu initally scrolls to the Browser top and then sticks there) cannot be achieved.
Please have a look at the video which would help you use pinning option in Muse : http://tv.adobe.com/watch/muse-feature-tour/muse-pin-objects-to-the-browser-window/
Hope this helps.
Regards,
Sachin

Horizontal Menu Bar Spacing Bug?

I created a horizontal menu bar. Chose Uniform Spacing from the blue fly-out menu.
After adding a another couple of pages, the menu spacing failed to update—the menu now looked cramped in places.
I had to go back to the Master Page and choose Uniform Size, and then Uniform Spacing in order for the menu to update correctly.
Using Muse CC ver. 7.1.

thanks, beth
i'm the kind, probably such as your self, as well, that tends to blur a little in and out of reality !
i too, leave things like js and php to those who like it, and concentrate on design - other than knowing enough to do things like changing the delay time in the js for the spry dropdown
thanks for your invitation and i will do so as time permits
as a small attempt at returning the favor, i was going to pose another problem to you when i found the solution, and so instead i will offer you the solution - you may well already have it, but just in case:
i noticed (or rather the client noticed, but i've seen it before!) that a small dotted rectangle appears onclick on the spry links in firefox and ie, but not in safari
the solution is to place onfocus="blur()" within - and at the end - of the a href tag like this:
if you knew this, please ignore my attempt - if you didn't, well then . . .there ya go!
perry
Perry Yeldham
www.21thirteen.com
website design and development

Horizontal Menu Bar extends off the screen

I have the horizontal menu bar working great with a standard
CF query results set. however, the problem i am having is that the
right most menu item has two levels of children that expand right
on rollover, but that pushed them off the browser so you can;t
actually see them. is there a way to have them expand to the left
instead?

Start Firefox in <u>[[Safe Mode]]</u> to check if one of the extensions or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox (Tools) > Add-ons > Appearance/Themes).
*Don't make any changes on the Safe mode start window.
*https://support.mozilla.com/kb/Safe+Mode
Try to disable hardware acceleration.
*Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available"
If disabling hardware acceleration works then check if there is an update available for your graphics display driver.

Horizontal Menu Bar (using JQuery as opposed to Spry Assets)

Similar Messages

Maybe you are looking for