How I do I create a horizontal menu with images as background?

Apple OSX.6.7
Dreamweaver CS 5.5
Template: 2 column fixed, left sidebar, header and footer
I have tried the spry horizontal  menu available through the Insert panel in Dreamweaver 5.5. I thought I could set background images on the li elements, attaching via CSS and using IDs on each li. So far nothing is working especially well, and I'm fried.
What is the best way to create a horizontal menu when you want to use a background image? At this point, I'd be fine with using one image background and relying on the anchor pseudo classes for hover and active. The menu doesn't have to be an image rollover. It just has to enable me to keep the part of the banner image that descends into the menu area.
My goal is to do everything using CSS instead of resorting to a table for positioning the menu elements.
Thanks for your input.

Customizing Spry Menus
http://foundationphp.com/tutorials/sprymenu/customize1.php
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

  • Horizontal menu with horizontal submenu

    I am trying to create a horizontal menu with a submenu that is horizontal directly underneath.  So, when you hover over the items on the top menu, the list of subitems appears as a horizontal menu direclty below the the top menu.  I've been able to modfy the spry tabbed panel widget to mostly do that, but there has to be a better way. It appears that the spry menu widget for the horizontal menu just has a drop down of subitems in a vertical list below the top menu item.   I've searched but can't find the answer.  Could someone please help me out with suggestions?  Thank you.

    It would have been a lot easier to see what the problem is if you had posted a URL to your site. Now I am only guessing that you have placed an auto width on the submenu item container.
    See here for more info http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml
    The only problem with the above sample is that when you make the style rule for the submenu items, you need to include !important next to the float as follows
    ul.MenuBarHorizontal ul li {
        display: block;
       float: none !important;
        width: auto;
        white-space: nowrap;
        border-bottom: solid 1px #EEE;
    Gramps

  • How To Create Drop Down Menu With Tab

    hi
    How To create Drop Down Menu with tab in Header of application like website Horizontal Dropdown Menu In html.
    Thanks
    Manoj
    Edited by: Manoj Kaushik on Dec 30, 2009 4:16 AM

    Try the Apex forum {forum:id=137} someone there may have an answer.
    Which version, that could be important, XE out-of-the-box has apex 2.1 if it hasn't been upgraded to 3.x

  • Problem in creating client side PDF with image using flex and AlivePD

    I need a favor I am creating client side PDF with image using flex and AlivePDF for a web based application. Images have been generated on that pdf but it is creating problem for large size images as half of the image disappeared from that pdf.I am taking the image inside a canvas . How do i control my images so that they come fit on that pdf file for any image size that i take.
    Thanks in advance
    Atishay

    I am having a similar and more serious problem. It takes a
    long time to execute, but even attaching a small image balloons the
    pdf to 6MB plus. After a few images it gets up to 20MB. These are
    100k jpeg files being attached. The resulting PDF is too large to
    email or process effectively. Does anyone know how to reduce
    size/processing?

  • Drop Down Menu with images in Muse and Animate

    Hello,
    i am trying to create a drop down menu with images as you can see on this website:
    http://www.kadewe.de/
    In Adobe Muse the menu with all pages in it doesn't let me insert pictures.
    With the empty composition widget i archived something similar but when once activated the action it doesn't close.
    My last try was to build a menu in Edge Animate. The Problem i had was that when i used the action click, open URL.
    Inserted in Muse the new page opens in the created animation and not on the same page fullscreen.
    What have i done wrong?
    Thank you for your answers.

    I am having a similar problem. I have multiple widgets on a page -- menus, accordions, tooltips, slideshows. As soon as I 'activate' a widget (eg: expand an accordion or play a slideshow) it disables all the triggers below it, as well as all the hyperlinks. This seems like a bug... I hope there's a workaround?

  • CSS Rollover Menu with Images and Current Page Indicator

    Hello.
    I have found a very interesting video here: http://www.youtube.com/watch?v=vv8cRYGCvIY about creating a CSS Rollover Menu with Images and Current Page Indicator (I tested it and it is working fine).
    I have a web site with 15 pages based on a template and I want to use that video sample to do the same thing on my web site.
    Please tell me if I can use the sample from the link above to do that.
    What should I change in the css file (what new class should I make) to make this work on a web site based on a template  ?
    Thank You !

    I don't know about that video tutorial but a sitewide persistent menu indicator ('you are here' highlighting) is very simple to do with CSS classes.
    Details and code examples below:
    http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • What's the best method for a nav menu with image rollover for all visitors?

    Hi.
    First, thanks for reading this.
    What's the best method for a nav menu with image rollovers for all visitors, including PDAs? I've used JavaScript rollovers for years because the majority of my customers' visitors use some version of IE (past 7.0) but I'm building a new site that has to display properly for the widest range of visitors imaginable. (I also know that I need to use a more modern method for everyone and this is my excuse to start).
    Finally, using images is critical. I apologize ahead of time to anyone I offend, but I have never seen a nav menu without images that doesn't look just plain terrible.
    Thanks.
    Fitz21

    If you want the best menus possible for Dreamweaver look no further than Project Seven:
    http://projectseven.com/
    They have all kinds of menus and other extensions available for purchase.  Easy to use and they work as advertised.  I personally use Pop Menu Magic and Tab Panel magic myself.  I could go on and on, but I guarantee that if others respond they will echo the same sentiment for Project Seven.

  • How to create a horizontal menu?

    Am using studio creator 2 and there is no provision to create a horizontal drop down menu. how do i make one? (a list of items will drop down when the mouse hovers over a menu item)
    I have used samples from http://www.milonic.com and i am supposed to add this to the page using the menu::
    <script type="text/javascript" src="milonic_src.js"></script>
    <noscript>JavaScript Menus and DHTML Menus Powered by Milonic</noscript>
    <script type="text/javascript">
    if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
    else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
    </script>
    <script type="text/javascript" src="menu_data.js"></script>
    however, there are problems with the this part
    "<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>"
    can someone help me please.......i need this urgently :-(

    this is the what is there at the source of the blank page::
    <?xml version="1.0"?>
    <!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 content="no-cache" http-equiv="Pragma" />
    <meta content="no-cache" http-equiv="Cache-Control" />
    <meta content="no-store" http-equiv="Cache-Control" />
    <meta content="max-age=0" http-equiv="Cache-Control" />
    <meta content="1" http-equiv="Expires" />
    <title></title>
    <script type="text/javascript" src="/homePage/theme/com/sun/rave/web/ui/defaulttheme/javascript/formElements.js"></script>
    <link rel="stylesheet" type="text/css" href="/homePage/theme/com/sun/rave/web/ui/defaulttheme/css/css_master.css" />
    <link rel="stylesheet" type="text/css" href="/homePage/theme/com/sun/rave/web/ui/defaulttheme/css/css_ie55up.css" />
    <script type="text/javascript">
    var sjwuic_ScrollCookie = new sjwuic_ScrollCookie('/home.jsp', '/homePage/faces/home.jsp');
    </script>
    <link id="link1" rel="stylesheet" type="text/css" href="/homePage/resources/stylesheet.css" />
    </head>
    <body id="body1" style="-rave-layout: grid">
    <form id="form1" class="form" method="post" action="/homePage/faces/home.jsp" enctype="application/x-www-form-urlencoded">
                            <script type="text/javascript" src="resources/milonic_src.js"></script>
                            <noscript><a href="http://www.milonic.com/">JavaScript Menus and DHTML Menus Powered by Milonic</a></noscript>
                            <script type="text/javascript">
                                if(ns4)_d.write("<scr"+"ipt type=text/javascript src=resources/mmenuns4.js><\/scr"+"ipt>");
                                else _d.write("<scr"+"ipt type=text/javascript src=resources/mmenudom.js><\/scr"+"ipt>");
                            </script>
                            <script type="text/javascript" src="resources/menu_data.js"></script>
    <input id="form1_hidden" name="form1_hidden" value="form1_hidden" type="hidden" />
    </form>
    </html>i just cant figure out where i am doing wrong. I have saved the mmenudom.js, mmenuns4.js, milonic_src.js and menu_data.js files in the resouces folder of the project.

  • How to create a dropdown menu with sub buttons that link back to the labels on click.

    im trying to create a dropdown menu buttons that when you rollover to the top central button the button it opens up like a drop down menu would containg two other subsectional buttons. This makes the sub sectional buttons seperate from the main stage making it difficult to simply give them a on click,  sym.play("label") function.
    the buttons work like this in symbols or sections stage/panel/homebutton inside home button is group dev containg another group dev containg the button which I need to link back to a "label" in the /panel/ symbol or section. Thank you very much.

    pdp_1 wrote:
    Hi!
    I would like to create a DVD menu that offers two languages. So the first page gives two options: Language 1 and Language 2. Then depending on which language you choose, you go to a menu that proposes different videos and a photo slideshow.
    Regardless on which language button you click on initially, you get the same content but in different languages.
    I've been looking at Premiere's templates, which I can certainly customize, but I really don't see how to create the double menu. Does anybody have an idea?
    Put the video with the first language on the timeline followed by the video with the second language.  Use chapter markers so you can have each video as a chapter in the menu.
    I use Premiere Pro, so I can't give more specific directions. Perhaps somebody like ATR will chime in.
    Also, I have another question: can I put videos from different projects in the same DVD with Premiere or must all of the videos that go into the DVD be in the same project?
    Thank you very much!!!
    pdp1
    They must be in the same project.

  • How can I create a horizontal scrollbar with a centered thumb that scrolls content from both sides?

    I am having trouble figuring out how to create a horizontal scrollbar component either by itself or nested inside a data list component that will have it's thumb centered in the track when running and reveal content from either the right or left side when the thumb is moved. The furthest I have managed to get is to create a data list component with a scrollbar component inside that has a centered thumb that reveals content from the right side of the list (0 through 10 of the items) but only reveals blank area when tracking the other way. Is there a way to create say… negative items in the data list… 0 through -10? Or am I approaching this the wrong way. Please help. Thanks.

    Mykola,
    Thanks. I guess I was hoping for an answer that addressed my question from a designer's point of view rather than a developers'. As a designer with over ten years experience using Adobe products for print work it is difficult to understand why "centered" is such a complicated concept when designing art for use on the web. It is so frustrating to realize that most containers for images and text can only be resized by pushing and pulling handles located on the right and bottom; Catalyst seems like a great start but if Adobe really wanted to impress the "design" community it might consider putting all that supercharged code underneath the hood of some more familiar "design" tools. Maybe a "catalytic converter" would allow the introduction of a "centered" tool for every element.
    After all, why is it literally twenty-five times more difficult, requiring the use of three additional programs to create a component that functions exactly like a typical data list and scroll bar with the exception that the thumb is "centered" on the track and reveals images from both the right and left. For that matter why not also have as an option a thumb that snaps to the bottom of the track and reveals images from the top… and one that snaps to the right and reveals images from the left when you run the project? It just seems so logical to expand the scroll bar component to include these options.
    I am very glad to have Catalyst and will redesign my project to fit within the constraints of the tools available in the program but it seems that if Adobe is really serious about Catalyst being a window into the world of web design for designers/AD's that perhaps it might benefit by focusing on what might improve the program from the designer's point of view. I hate to say it but the Catalyst forum is already rife with answers to questions that are riddled with code… Literally. And to be honest most designers don't have the time to decipher that code. As a designer I work regularly and have a deep understanding of Photoshop, InDesign, Illustrator, Acrobat Pro, Final Cut Pro, Final Draft and modo. I do hi-res assembly, retouching, design and layout, identity, production, 3D modeling and rendering, video editing… and before I switch to using Catalyst for web mock-ups I am going to need a more "designer" friendly set of tools and definitely a "centered" control.
    I really think Adobe is fantastic. But I also think it could take a lesson from a great little company called Luxology. I tried learning 3D modeling and rendering for years with programs like Lightwave, Maya and others, always with mixed results. Then Luxology came along and actually delivered on their promise to create a 3D program for artists. What was the factor that made all the difference? Well, besides the Apple award winning interface and sets of tools it was the training available on their sight. The program itself ships with thirty-six hours of quicktime movies. And hundreds more hours available for download. I have never yet not been able to quickly and easily find an answer to a question I had about how to accomplish something in modo. You know how long I have already spent on Adobe TV searching through videos and on the Catalyst forum searching through topics trying to get an answer to what I thought was a very simple question? Way too many. If I have a question about a Luxology product that I can't find the answer to do you know what I do? I call Brad Peebler, the President of Luxology. I'm not special nor do I work for some special development house with special privileges that is simply their policy. And that policy has paid big dividends. Both ILM and Pixar has licensed their technology.
    Well… I apologize for this long response but I really think that if Catalyst is going to attract the market it wants that it will have to consider putting some designers on the development team. After all… Isn't that what the promo videos tout… Finally a web design program for designers. Well, I guess we'll see.
    Karl

  • How to create drop-down menu with transparency

    Hello,
    Is it relatively easy to create drop-down menu's with
    transparent drop downs? Any step by step help would be greatly
    appreciated.
    I thank you in advance,
    Jaz

    jasperjaz schrieb:
    > Looks like some cool stuff. However, nothing on drop
    downs
    >
    Take a look at "Creating Animated Buttons". The Tweening of
    the text to
    the right and changing the color perhaps could be replaced or
    appended
    by your drop-down-needs? The Drop-Down is another Animated
    Button!?
    Bye
    Klaus

  • 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 Prince

    I 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

  • Horizontal menu with one top level having pages below.

    I have reviewed the answer to a similar post and reviewed the settings as shown in the image. My problem is that I want this one menu item to display the pages vertically and not drop down, and display to the right. I have tried every way of setting the menu preferences I can think of and it refuses not to impact the menu as a whole. This includes unchecking the box that allows individual edits. Can someone provide me a text procedure step by step to make my one top level menu item display the pages dropped down vertically for selection as opposed to down and right? This is the latest version of Muse. The menu widget was created by allowing it to detect the pages the way they were set in design mode.

    Ok just in case any other new users to muse have the same problem with a horizontal menu needing to have one of the top level links drop down a vertical menu below. Initally in plan view I had created the top level page, and all the other pages below stacked vertically. What I did to make it display the way I wanted is to delete the pages stacked vertically and place them on the same line horizontally. See below .....

  • How do you make a transparent spry menu that has a background color on sub menus?

    Hi i am a total newbie at html and css scripting/coding and i've been working on creating a website of course because im here and i have search and search and i've found a few topics about this but none of them have what i want and it would be helpful if when you post the reply you explain it so hopefully i can add on and learn but i am trying to get the background color on the sub menus #1A1A1A and then the menu it self transparent here is my code it might make no sense at all since im a newbie ;P
    @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 auto;
              padding: 0;
              list-style-type: none;
              font-size: small;
              cursor: default;
              width: 100em;
    /* 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: 18px;
              position: relative;
              text-align: left;
              cursor: pointer;
              width: 10.8em;
              float: left;
              visibility: visible;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
              margin: 0;
              padding: 0;
              list-style-type: none;
              font-size: 100%;
              z-index: 1020;
              cursor: default;
              width: 8.2em;
              position: absolute;
              left: -1000em;
    /* 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: 15em;
    /* 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
    ul.MenuBarHorizontal ul
              border: 0px solid #1A1A1A;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
              display: block;
              cursor: pointer;
              background-color: transparent;
              padding: 9px;
              color: #FFF;
              text-decoration: #1A1A1A;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
              font-weight: bold;
              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
              font-size: 18px;
    /* 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: #0048ff;
              color: #EEE;
    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-color:#1A1A1A;
              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-color:#1A1A1A
              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: 85% 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: #222222;

    Hi and welcome -
    Start with fixing this missing semicolon  (in red)
    /* 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-color:#1A1A1A;
              background-repeat: no-repeat;
              background-position: 95% 50%;
    You will find you will get faster, more accurate help from us if you upload your test page and any dependent files to your server and post a link here.  That way we can examine ALL your code

  • IWeb 08: Static horizontal menu with background image

    Hi
    I want to make a static horizonal menu bar. I want to have a 800px x 40px black bar that has a background image from the same size. The reason of a background image is because I want a logo to be in that menu. I have searched in google for samples but I haven´t been able to find one that is simple and that I can incorporate the logo in the background. Can somebody tell me a link to a place to get this or tell me a code ? I don´t know html thou
    thank you in advance

    Don't really understand exactly what you are asking here?  Why do you need any code to create a menu bar? You can do this very easily in iWeb.
    To create a menu bar:
    1.  Open your page in iWeb and then open the Inspector and go to Page and click on 'Hide from menu' and 'Don't include in menu and this will turn off the iWeb built in template navigation menu.
    2.  To create your own menu bar, simply use either a text box or a shape and make it 800px by 40px and then place it on your page where you want your nav menu to be and type in your links and then hyperlink them to your pages by opening the Inspector and opening Hyperlink - 2nd from the end and then highlighting the text and linking to relevant pages and then setting the colours via the format link.
    Don't quite understand why you want a background image in a nav menu?  It will be very hard to get anything of those sizings and people do not usually have a background image in a nav menu - normally a colour.  A nav menu is not the place for background images or logos - it is too small and all this should be in your header section instead.
    If you want more help, then please be precise about what you are asking.

Maybe you are looking for