Menu Bar Spry Widget 2.0 with several background images.

Hello

I am quite new to HTML & CSS. I designed a navigation system using Dreamweaver built in the Spry menu bar. When I discovered that it did not work on the mobile platform iOS (iPad), I rebuilt using the 2.0 Bar Menu Spry Widget. After going through the tutorial of David Powers on the subject (here: http://www.adobe.com/devnet/dreamweaver/articles/spry_menu_bar.html ) and tweaking the CSS by trial and error that I'm going to look very nice, but is not quite where I want it to be, and I need help. It is a question of the 3 part (well okay, it's three different questions).

Here are two links to the work in progress (note: all site links, see the pages still using the older menus built-in spry bar - please ignore them). CSS for the menu is contained in these documents. Each maintains a drop-down list in a slightly different way. Both versions are relevant to questions 2 and 3.

http://www.mentalwarddesign.NET/Dynamech/about/index.html

http://www.mentalwarddesign.NET/Dynamech/about/indexV2.html

1. when a link is set to a menu item that contains a submenu, the submenu drop-down does not work on iOS touchscreen devices (ie the iPad). Main menu link must be removed so that it works correctly. I want a user to be able to click (or tap) on the main menu item and be taken directly to the first page in the submenu. Is there a solution for this?

2. the first version (/ index.html) has a submenu with a border and demarcation lines. The second version (/ indexV2.html) has no borders/lines, but a RADIUS on the corners. I try to combine these to have the RADIUS and the lines. The borders are controlled by #MenuBar. SubMenu.MenuItem RADIUS is controlled by #MenuBar.SubMenuVisble and #MenuBar.MenuLevel1.SubmenuVisible. The problem I get when you combine the two effects is that borders extend beyond the RADIUS. I tried ' overflow: hidden ' on any combination of the foregoing ID's and the only thing that made him the flyout of sub-sub to appear is prevented. Any thoughts on how I might accomplish this?

3 here is what is referenced in the subject.  The Menu bar is in a div tag called navMain. The background image in this div is made unique navigation bar image to look like seven tabs. If you look at the indexV2.html link above and go to the 'about' tab you'll see what I'm doing. I need to use a different background image for each tab for consulted/assets /. And of course I don't want the images repeat in the submenus as they do here. But wait, there is more! I also want to create a State "chosen" so that the image on hover shows from any page you are visiting currently - IE if you look at any page in the 'Drawings' submenu (of lets say that you are on the "miscellaneous" page) then the stationary image for "Drawings" is displayed. And if possible, he would suffer to the question I posed in the #1?

Thanks in advance for helping this newbie. The responces are greatly appreciated.

Ed

If the markup of my menu bar is the following

so I can style each button as follows

#MenuBar .home. MenuItem, #MenuBar .home. MenuItem. {MenuItemLabel}

background-color: orange;

}

#MenuBar .entertainment. MenuItem, .entertainment #MenuBar. MenuItem. {MenuItemLabel}

background-color: red;

}

#MenuBar .politics. MenuItem, #MenuBar .politics. MenuItem. {MenuItemLabel}

background-color: white;

}

#MenuBar .sports. MenuItem, .sports #MenuBar. MenuItem. {MenuItemLabel}

background-color: blue;

color: white;

}

GRAMPS

Tags: Dreamweaver

Similar Questions

  • Need to change the menu bar Spry for a right-to-left language

    Hello

    I am trying to create a menu bar Spry with submenus for a language from right to left.  This means that I need to the menu bar appear on the right side of the screen, having the submenus pop up to the left of their parent buttons and the little arrows that appear on the parent point left buttons (instead of the right as is the default behavior).  I discovered how to get the menus pop up to the left of their parents and you can manage to get the menu on the right side of the screen, I think.  However, I am having a hard time finding how to get small arrows on the left.  Can someone help me with this?

    I use DW CS3 on Windows XP and test with IE and Firefox.

    Web site can be found at: http://www.pogostick.NET/~Shahaf/test2

    In the document css SpryMenuBar, 3rd section for Indication of submenu.  You'll see a few GIFs with a substantive position.  It is the image of the arrow.  Simply change the position and you are good to go.

  • Custom with a background image button had a white area around it

    Hello

    I have a screen with a black background and I am trying to add a custom button with a background image on it. But the custom button has a white border around it.

    Is it possible to remove this white border or black?

    Thank you

    Is the custom field button only focusable, or do you see it too when she does not have focus? Try drawFocus() substitution if it is only when he has developed there.

  • How to fade along with a background image.

    Does anyone have a suggestion on how better to fade along with a background image, which left and right side exactly blends in the background. In addition, it should be a very gradual fade.

    My image is a model of 18px 1900px X and it supposed to repeat on the y-axis. I did apply a layer mask, select from the left and the right 250 250px. Then I went to put smoth to 100% and the feather to 100px, and cut the fethers part to see the fade.  It worked well, but you are still able to see the visible lines on each display of color fade. The re is a better way to fade and other image or something else I can try to make the transition to choke?

    Thank you!

    Looks like bands, not feather. try to work in 16-bit...
    / G

  • "Menu bar Spry" expanding box problem.

    Hello

    I wonder if anyone knows how to solve a 'expansion bar problem', associated with vertical menus bar spry.

    This problem occurs especially in Internet Explorer 10 and 11. All texts and images on the right of the menu spray are projected down to below the lower menu bar.

    The page is displayed in Firefox and Google Chrome 100%-125%, but the same thing would happen if I Zoom in more than 125%.

    The only potential incompatibility problem by Dreamweaver is the "expand the bar problem.

    Thanks in advance!

    Hello Ben,

    Thanks a lot for your suggestions.

    It seems that the problem had nothing to do with a "expanding box problem.

    I managed to solve the problem by introducing

    Michael

  • Size of menu bar Spry set correctly for mobile layout when using fluid grid

    I use the horizontal spry menu bar and the checkerboard to fluid. Works fine until it is used in mobile size. The size of the navigation bar set correctly, but the text is too large for each area of the spry menu bar. Is it possible to have the text to set for the mobile structure only? Is there a way for the spry menu bar to stack vertically?

    Spry is neither sensitive nor touch the screen of the environment.  It has been discontinued & removed DW in 2013.

    Inherited liquid grid layouts will be soon abandoned as well (see press release public Beta).

    If you have a budget to work with, look at menus adapted the seven project.

    PVII Pop Menu Magic 3: the constructor only sensitive Menu for Dreamweaver

    Nancy O.

  • Menu bar static slide to stretch with browser height

    I know this may be invited at one point but I couldn't find a solution.  I have not my menu bar to stretch up and down in the browser.  In Muse, I have the rectangle touch the top bottom and sides of the canvas.  I design for the largest of screens out there, but the basics should still apply I guess.  Please tell me what I'm doing wrong.

    Note that in the browser, it will stop before touching the bottom of the page.

    See my screenshots:

    In Muse

    Screen Shot 2015-12-22 at 6.25.32 AM.png

    In the browser:

    Screen Shot 2015-12-22 at 6.25.58 AM.png

    For your case, I think that you can just draw the box taller. A Pinned item didn't impact on the height of the page or cause to lie vertical scroll bar, so you can create it as big as you want (bigger than the top) without negative side effects. As mentioned in other threads, Muse has no currently all built-in automatic vertical resizing of objects at height of the browser window. If you want or need something which is dynamically which you need to explore custom code or the third party widgets.

  • Vertical menu bar Spry works only in Internet Explorer

    I have a simple (I think) menu bar vertical Spry in my site that works fine in all browsers except - you guessed Internet Explorer.  One of the sub-items moves just above a menu item main when he earned the favor (it's a real verb LOL); so, you can't really even click on that element of particular main menu...  Here is the website: www.meridianwaterfiltration.com

    Any help would be appreicated!

    Add/Edit the following

    UL. MenuBarVertical a {}

    Width: 10em;

    }

    GRAMPS

  • Firefox installed on Windows 7 but the menu bar and icons is filled with small horizontal lines on the icons and the menu bar...

    I installed Firefox 21 on a new Windows 7 operating system. The menu bar and the toolbar at the top of the windows is full small horizontal lines. Sometimes, there are more lines and sometimes less. It makes the icons and menu items almost impossible to see. So far, is that the Firefox screen that made it. Other programs I have installed so far doesn't do this.

    Any ideas?

    Try disabling hardware acceleration in Firefox.

  • Faced with centered Background Image

    I have the code that I found always give me a background focused on a screen image.  It is based on the ideas presented here:

    http://supportforums.BlackBerry.com/T5/Java-development/MainScreen-explained/Ta-p/606644

    However, the code does not, at least not for me.

    I tried other variations as well, as the addition of another not VFM of scrolling, then adding data scrolling to the optimization of resources, but even this indirection suffers from the same problem.  Have two screenshots to show, the 'exclamation' should be at the centre according to me!

    Code follows.

    To illustrate the problem, just space out the field change with "entry" for more complete screen.  Then the same thing to one below the Bitmap and then scroll and down using the trackpad.  I suspect that you will see the problem.

    I saw this on OS 6.0 and 7.0 OS simulators.  Not tested on OS 5.0 and tested only on touchscreen devices.  I'll do some more tests later.

    Someone at - it suggestions on the subject of how we get the "centered" background Bitmap actually stay in the Center will still let me add lines to my editfields and scroll using the trackpad?

    Net.rim.device.api.system import. *;
    Net.rim.device.api.ui import. *;
    Net.rim.device.api.ui.component import. *;
    Net.rim.device.api.ui.container import. *;

    /**
    * A screen class to test background bitmap images.
    */
    SerializableAttribute public class BackgroundImageScreen extends screen
    {
    private int backgroundColor = 0x00FF0000;
    private bitmap _backgroundBitmap = Bitmap.getPredefinedBitmap (Bitmap.EXCLAMATION);
       
    Constructor
    public BackgroundImageScreen()
    {
    Super(Manager.USE_ALL_WIDTH |) Manager.USE_ALL_HEIGHT | Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR);
    setTitle (new LabelField ("Background Image Demo"));
    VerticalFieldManager backgoundManager = VerticalFieldManager(Manager.USE_ALL_WIDTH | nouveau Manager.USE_ALL_HEIGHT |) Manager.VERTICAL_SCROLL | Manager.VERTICAL_SCROLLBAR) {}
    {} public void paintBackground (Graphics g)
    int currentVackgroundColor = g.getBackgroundColor ();
    try {}
    g.setBackgroundColor (backgroundColor);
    g.Clear ();
    } {Finally
    g.setBackgroundColor (currentVackgroundColor);
    }
    int managerWidth = this.getWidth ();
    int managerHeight = this.getHeight ();
    centerX = int (this.getWidth () - _backgroundBitmap.getWidth (()) 2.
    centerY = int (managerHeight - _backgroundBitmap.getHeight ()) 2.
    System.out.println ("current position:" + Integer.toString (centerX) + ":" + Integer.toString (centerY) +)
    ", Far manager:" + Integer.toString (managerWidth) + ":" + Integer.toString (managerHeight) + "."
    ", Manager virtual:" + Integer.toString (this.getVirtualWidth () + ":" + Integer.toString (this.getVirtualHeight () + "."
    ", ManagerScroll:" + Integer.toString (this.getHorizontalScroll () + ":" + Integer.toString (this.getVerticalScroll ())); "."
    g.drawBitmap (this.getHorizontalScroll () + centerX, this.getVerticalScroll () + centerY, _backgroundBitmap.getWidth (), _backgroundBitmap.getHeight (), _backgroundBitmap, 0, 0);
                       
    }
    };
    backgoundManager.add (new EditField ("scrolling test:", "Enter the text here to scroll"));
    backgoundManager.add (new SeparatorField());
    backgoundManager.add (new BitmapField (Bitmap.getPredefinedBitmap (Bitmap.QUESTION)));
    backgoundManager.add (new SeparatorField());
    backgoundManager.add (new EditField ("test an another parchment:", "Enter the text here to scroll"));
    This.Add (backgoundManager);

    }
    }

    Ahh, touch screens...

    I remember I had to invalidate the Manager paint extra stuff (vertical scroll bar in my case) in scrollChanged() specifically for touchscreen devices. So one thing to try is to implement ScrollChangeListener in your main screen or your added VFM and invalidate the VFM in scrollChanged. This should fix the problem, even if it will be a drop in performance.

    I suspect that the touchscreen devices have certain graphic hardware acceleration, which makes them more effective when scrolling but it lacks what BlackBerry stuff framework is not aware (for example your paintBackground according to the positions of scrolling).

    I'm curious to know what happens if you use setBackground on a scroll, no Manager and add the scroll with no bottom paint on top of it. setBackground, being a built-in could make better use of their hardware acceleration.

  • Please help beginner with CSS background-image

    I use Dreamweaver CS4. I created a site on my computer. D:Data\Local_sites\Gravity_Works. In this directory using Dreamweaver, I created 3 files - css, images and models. In the pictures folder, I have an image - bg_body_winter.jpg. In the Templates folder, I have Gravity-works - Home01.dwt. I have created a new form of the page the template file and named index - test01.html and saved directly in the folder Gravity_Works

    I have this css code in a css in the css folder file:

    {body
    background: url(/images/bg_body_winter.jpg) top of Center no-repeat scroll #C1CAD6;
    }
    {body
    Police: 100% Verdana, Arial, Helvetica, without serif.
    margin: 0;
    }

    I downloaded the site in a test folder on my server at fatcow.com. You can see the page using the link below.

    http://www.openrangeimaging.com/test/gravity-test/index-Test01.html

    The image appears as it should be in Dreamweaver Live View. It does not appear in Design view. It does not appear in the preview of the local file in a browser. The image does not appear when you look at the index file - test01.html that is located on the server by using the link above. The specified background color appears but not the image.

    I'm confused about how I should name the path to the image. I think it must be relative root of the site so that anywhere, I have download the website, the image can be found. Can someone tell me how I should name the path to the image properly.

    I feel that I should know how doing this and looked around for help online and tutorial books I have, but I just don't get it.

    TIA for any help.

    In your linked css file the path to the background image must be as shown below (note points both in front of the bar oblique leader)

    {body
    Background: url (.. / images/bg_body_winter.jpg) no-repeat scroll top centre #C1CAD6;
    }

    If you have this image, the browser is trying to find a 'pictures' folder in your "css" folder and it appears no one.

    If you include the colon before the first slash the browser search the folder 'images' outside your "css" folder and in the folder root site.

  • How this guy do this with its background images?

    In the following example, the background image stretches to fill your screen in real time (try resizing browser on the fly), but retains its proportions intact throughout. I didn't even know it was doable.

    Can someone tell me how this is done?

    http://www.serialcut.com/

    Click options in the upper left to see other background images in action. The transition effect is not important. I am referring strictly to the properties ' full page + kept proportions "of these environments.

    Is there a tutorial somewhere for that?

    It seems they did a custom jquery plugin.  The problem is that eventually even with their method, the images have a limit.  Their image is 1920 x 1108.  So they made up a 1080 display.  After that the image could not be resized.  But to have the image resized, you must load the large image for all users regardless of their resolution of the screen.

    The following link seems to have a similar distribution of jquery:

    http://johnpatrickgiven.com/jQuery/background-resize/

  • DWCS4 behavior of the effects appear with DIV background image?

    Is it possible to use the effects appear on the background image in a DIV with the command 'OnLoad '. I want my banner to fade in (param) when the page is reached.
    It's the tag with that I want to use the above behavior:
    < div class = "dwBanner" > < / div >

    Thank you very much.
    www.dwdallam.com

    ...

  • capacity of the type lost with the background image

    I found the code to load a bitmap as a background (JDE 4.2 so I'm on verticalfieldmanager of riding) but I've lost the ability to use the styles - specifically HCENTER for a horizontal field Manager.

    I thought that the code inline on Mount verticalfieldmanager was only on the functions you specify riding, but somehow styles don't seem to do anything right now.

    My class extends screen.  In addition to setting the style to the LabelField, I tried using a horizontal field with a HCENTER style Manager and adding that to the sublayout but everything continues to show left justified.

    LabelField myField = new LabelField("      ",FIELD_HCENTER){ public void paint(Graphics g){ g.setColor(Color.WHITE); super.paint(g); } };
    
    --- main class code snip ---
      super(NO_VERTICAL_SCROLL);
    
       mainManager = new VerticalFieldManager(Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR )
            {
                public void paint(Graphics graphics)
                {
                    graphics.clear();
                    graphics.drawBitmap(0, 0, deviceWidth, deviceHeight, _backgroundBitmap, 0, 0);
                    super.paint(graphics);
                }
            };
    
            //this manger is used for adding the components
            subManager = new VerticalFieldManager(Manager.VERTICAL_SCROLL | Manager.VERTICAL_SCROLLBAR | Manager.FIELD_HCENTER)
            {
                protected void sublayout( int maxWidth, int maxHeight )
                {
                    int displayWidth = deviceWidth;
                    int displayHeight = deviceHeight;
    
                    super.sublayout( displayWidth, displayHeight );
                    setExtent( displayWidth, displayHeight );
                }
            };
    
       subManager.add(myField);
    
       mainManager.add(subManager);
    
       this.add(mainManager);
    }
    

    Thanks for the help,
    Craig

    He finds... styles work but the fields are not the full width so that they were in "centered" relatively close to the left of the screen.

    Thanks for the research.  Fix use of USE_ALL_WIDTH to the verticalfieldmanager (probably could have done this in several places).

    Kind regards
    Craig

  • Several background Images screen

    Is it possible to have several wallpapers that scroll as a slideshow?

    Hello

    Not natively, but there are a lot of utilities like this: http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/Win-Vista-Wallpaper-Changer.shtml

    Good luck, Rick Rogers, aka "Crazy" - Microsoft MVP http://mvp.support.microsoft.com Windows help - www.rickrogers.org

Maybe you are looking for