1 Reply Latest reply on Jan 9, 2014 5:59 PM by BenPleysier

    Center spry menu

    ZSmith16

      Hello, I am trying to center my spry menu however I am having some trouble. I am trying to create a fluid layout so I have a <div> where my content will go and I set its width to 80%. Here is the CSS for the menu. Thanks.

       

       

      @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

      {

                padding: 0;

                list-style-type: none;

                font-size: 90%;

                cursor: default;

                width: 100%;

                font-weight: bold;

                margin: 0 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: 18%;

                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: 80%;

                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: 100%;

      }

      /* 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;

      }

      /* Menu items are a light gray block with padding and no text decoration */

      ul.MenuBarHorizontal a

      {

                display: block;

                cursor: pointer;

                background-color: #EEE;

                padding: 0.5em 0.75em;

                color: #333;

                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: #33C;

                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: #33C;

                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: 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;

                          f\loat: left;

                          background: #FFF;

                }

      }

        • 1. Re: Center spry menu
          BenPleysier Adobe Community Professional & MVP

          Try

          <!doctype html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>Untitled Document</title>

          <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">

          <style>

          ul.MenuBarHorizontal {

              max-width: 50em; /* change to suit */

              margin: auto;

          }

           

          ul.MenuBarHorizontal li {

             width: 25%; /* 4 main menu items x 25% = 100% */

          }

          </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="SpryAssets/SpryMenuBar.js"></script>

          <script>

          var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

          </script>

          </body>

          </html>

          1 person found this helpful