14 Replies Latest reply: Jun 22, 2012 6:14 AM by alexisonsmith3 RSS

    Spry Menu Question

    alexisonsmith3 Community Member

      Hi,

       

      Iamhaving issues with my Spry Menu. I am trying to put it above my container withmy pictures and for it to be in the middle of the page and of the same width as everything else however it seems to be at the bottomofthe page cut off

       

      Regards,

       

      Alex

       

      www.newcityexplorer.com

        • 1. Re: Spry Menu Question
          Ben Pleysier CommunityMVP

          I see that you are still working on your site and that you have fixed the menu problem.

           

          Gramps

          • 2. Re: Spry Menu Question
            alexisonsmith3 Community Member

            Yes but it is still not fixed yet.Themenu seems to be all over the place and is not the full width of the container

            • 3. Re: Spry Menu Question
              Ben Pleysier CommunityMVP

              Re-install the original SpryMenuBarHorizontal.css file and make the following changes

               

              ul.MenuBarHorizontal li {

                  width: 20%;

                  background-color: #CCC;

              }

              ul.MenuBarHorizontal a {

                  background-color: #CCC;

                  color: #000;

                  font-family: "Comic Sans MS", cursive;

                  font-weight: bold;

              }

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

                  color: #FFF;

              }

               

              Gramps

              • 4. Re: Spry Menu Question
                alexisonsmith3 Community Member

                It has gone vertical and not horiztonal :S

                • 5. Re: Spry Menu Question
                  Ben Pleysier CommunityMVP

                  I do not see that you have made any change at all.

                   

                  Gramps

                  • 6. Re: Spry Menu Question
                    alexisonsmith3 Community Member

                    Have a look now

                    • 7. Re: Spry Menu Question
                      Ben Pleysier CommunityMVP

                      This is all I see for SpryMenuBarHorizontal.css. Where has the rest gone????

                      ul.MenuBarHorizontal li {

                          width: 20%;

                          background-color: #CCC;

                      }

                      ul.MenuBarHorizontal a {

                          background-color: #CCC;

                          color: #000;

                          font-family: "Comic Sans MS", cursive;

                          font-weight: bold;

                      }

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

                          color: #FFF;

                      }

                      Gramps

                      • 8. Re: Spry Menu Question
                        alexisonsmith3 Community Member

                        I think I have changed everything but it is still not showing up correctly

                        • 9. Re: Spry Menu Question
                          Ben Pleysier CommunityMVP

                          I am not a very good teacher, my apologies. We'll take another tack that will make it a bit easier for me.

                           

                          1. Change line number 13 from

                           

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

                           

                          to

                          <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">

                          This will ensure that we are talking about the same original SpryMenuBarHorizontal.css.

                           

                          2. Insert the following lines to your document starting at line 193 where it says </style>, in such a way that </style> gets pushed down to line 211


                          ul.MenuBarHorizontal li {
                              width: 20%;
                              background-color: #CCC;
                          }
                          ul.MenuBarHorizontal a {
                              background-color: #CCC;
                              color: #000;
                              font-family: "Comic Sans MS", cursive;
                              font-weight: bold;
                          }
                          ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
                              background-color: #33C;
                              color: #FFF;
                          }
                          ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
                              background-color: #000;
                              color: #FFF;
                          }
                          

                           

                          To make sure that the above has worked as intended, line 180 through to line 220 should look like

                           

                          }
                          ul#bottom-nav a {
                          display:block;
                          text-decoration: none;
                          padding: 4px;
                          color: #000;
                          font-weight: medium
                          }
                          
                          #phone {
                          font-weight:bold;
                          color: #000;
                          }
                          ul.MenuBarHorizontal li {
                              width: 20%;
                              background-color: #CCC;
                          }
                          ul.MenuBarHorizontal a {
                              background-color: #CCC;
                              color: #000;
                              font-family: "Comic Sans MS", cursive;
                              font-weight: bold;
                          }
                          ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
                              background-color: #33C;
                              color: #FFF;
                          }
                          ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
                              background-color: #000;
                              color: #FFF;
                          }
                          </style>
                          </head>
                          
                          
                          <body>
                          
                          <div id="rightSidebar">
                          <h3>This is top of #rightSidebar</h3>
                          <div class="box">
                          <h3>Box Title</h3>
                          

                           

                          Gramps

                          • 10. Re: Spry Menu Question
                            alexisonsmith3 Community Member

                            It is now at the top however the drop down menu do not appear over the container. Also the header text is above the drop down menu

                             

                            Alex

                            • 11. Re: Spry Menu Question
                              Ben Pleysier CommunityMVP
                              It is now at the top

                              That is where you wanted it??? And it works???

                               

                               

                              the drop down menu do not appear over the container.

                              That is not because of the menubar. If you look at it in IE you will notice that they do appear. The reason they do not appear in compliant browsers is because you have placed the menu in a container that has the overflow set to hidden. hence anything that overflows, like the dropdown menu items, will be hidden. Give the container a height (eg. 300px) and you will see what I mean.

                               

                               

                              Also the header text is above the drop down menu

                              Exactly where you put it as in

                               

                              <header><div id="Logo"></div></header>

                              <section>

                                <header><h1>Where will you fly to next?</h1>

                              </header></section>

                              <ul id="MenuBar1" class="MenuBarHorizontal">

                               

                              Gramps

                              • 12. Re: Spry Menu Question
                                alexisonsmith3 Community Member

                                Thankyou that worked however now I am seeing that my .html file cannot see my SpryMenuBarHorizontal.css and I am unable to change it!?

                                 

                                Alex

                                • 13. Re: Spry Menu Question
                                  Ben Pleysier CommunityMVP

                                  Have a look at line 25

                                  <link rel="SpryAssets/SpryMenuBarHorizontal" type="text/javascript" href="SpryMenuBarHorizontal.css" />

                                  This should read

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

                                  Gramps

                                  • 14. Re: Spry Menu Question
                                    alexisonsmith3 Community Member

                                    I do not know what I have done but when I started working this morning it stopped and went back to how it was before. Can you see the mistake?

                                     

                                    Alex