Spry Silly Menu Bar

Results 1 to 4 of 4

Thread: Spry Silly Menu Bar

  1. #1
    Join Date
    Oct 2008
    Location
    Woodbridge New Jersey
    Posts
    115

    Default Spry Silly Menu Bar

    Having some problems with this drop-down menu.

    On Chrome: it looks pretty good although there is a border at the bottom of the td that I can't get rid of.

    On IE: the drop downs jump all over the place from Vertical to Horizontal. Secondly: the rollover doesn't work on the menu items that don't have a dropdown.

    http://www.maxineking.com/index_3.html

    Thanks!

    PS: there is also a js menu attached to this

    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    {
    margin: 0;
    padding: 0 0 0 460;
    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: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    /*width: 8em;*/
    float: left;
    }
    /* 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: 120px;
    }
    /* 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 #997722;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
    display: block;
    cursor: pointer;
    background-color: #997722;
    padding: 5px 10px;
    color: #EBEEC4;
    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: #997722;
    color: #EBEEC4;
    /* border-top: 1px solid #997722; */
    }
    /* 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: #EBEEC4;
    color:#997722;
    }

    /************************************************** *****************************

    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: 100% 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: 100% 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(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 100% 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(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 100% 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;
    }
    }

  2. #2
    Join Date
    Dec 1969
    Posts
    95,972

    Default

    Given how many *GOOD* drop down menus there are out there that don't have the problems the Spry does, why not just get rid of Spry and use one of them?

    Or create your own. It's not hard.

    And by the by, on FF the "CONTACT" menu is not on the same line...it is under then "PAINTINGS" menu. Ahhh...wait...if I make the page full screen it is okay. But if I narrow the window to anything under 1024 pixels it looks like crap. Looks especially bad at, for example, 800 pixels width. You can SURELY do better than this, as you called it, SILLY Spry menu.

  3. #3
    Join Date
    Oct 2008
    Location
    Woodbridge New Jersey
    Posts
    115

    Default Thanks

    After I posted, I found a couple of good ones, actually ones that I used on other sites I've build.

    Hope you're doing well.

  4. #4
    Join Date
    Dec 1969
    Posts
    95,972

    Default

    Good. That Spry stuff just looked way overcomplicated for what it does, to me.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


More ASP Resources

Resources:
-- ASP Articles
-- ASP.NET Information
-- 4Guys ASP F.A.Q.
-- ASPFAQs.com
-- ASP Coding Tips
-- Related Web Technologies
-- User Tips!!
-- JavaScripts


Development Centers
-- HTML5 Development Center
-- Windows Mobile Development Center
-- Android Development Center
-- Cloud Development Project Center


Development Technology
Check out these sites for more articles, tutorials, FAQs, discussions, and code!
-- CodeGuru.com
-- VBForums.com
-- DevX.com
-- Developer.com
-- HTMLGoodies