11 Replies Latest reply: Apr 20, 2012 9:27 PM by Ben Pleysier RSS

    Spry Submenu has disappeared

    Janie Pearson Community Member

      I have added a spry menu bar to my site and all was working well until it seemed I added a spry panel in another area on the page. Now the submenus of the main navigation don't show, but I know they are still there. I'm a newbie and I don't know if this is related to one of my divs being absolute vs relatively positioned or if it is a problem with having added the spry panel. If someone could look I'd really appreciate it! Temporary site is: www.jrhyne.com/Janie/index.html

        • 1. Re: Spry Submenu has disappeared
          martcol Community Member

          You have declared two form elements in your page and that might throw some things off.

           

          You are right to suspect that lots of AP divs will cause you problems.  Take a look at your nice orderly design after increasing the text size in-browser and see what happens.

           

          Martin

          • 2. Re: Spry Submenu has disappeared
            martcol Community Member

            Having said that, I can't work out what the problem is with your menu and I can't stop to study your code any more.  Don't worry, someone will come along soon.

             

            Maritn

            • 3. Re: Spry Submenu has disappeared
              Janie Pearson Community Member

              Thanks Martin I see what you mean. So is the answer to change all my AP divs to relative? I'm still learning and having a difficult time figuring out how to get the Divs to go where I want when I make them relative...

              • 4. Re: Spry Submenu has disappeared
                Janie Pearson Community Member

                No worries - I'm sure someone will help! Thanks for your input!

                • 5. Re: Spry Submenu has disappeared
                  martcol Community Member

                  You'll get different views on this I'm sure but personally, I try my damnedest to avoid position: absolute as much as I can.  I've not built that many sites, I admit, but have always used floats for my site structure.  It takes a bit to get your head around and until it clicks in your thinking it does not feel very intuitive.

                   

                  If it were me, I think I would start again.  Maybe use one of the layouts that Dreamweaver offers or look around for something that suits.  There are heaps out there and plenty of online tutorials to get you started on that. Try W3 Schools and maybe look around this forum for some starter tips.

                   

                  Again, this does not sort your spry issue so you might still like to sit tight for someone else to have a look.

                   

                   

                  All the best,

                   

                  Martin

                   

                   

                  Sent from my iPhone

                  • 6. Re: Spry Submenu has disappeared
                    hans-g. CommunityMVP

                    Hello Janie,

                     

                    I experimented a little bit with your source codes. First I commented out this "top: 385px;" in your

                     

                    #MainContent {
                    background-color: #FFF;
                    width: 960px;
                    margin-top: 0px;
                    margin-left: 0px;
                    position: absolute;
                    left: -1px;
                    top: auto;
                    /* top: 385px;*/
                    height: 525px;


                    and I commented out: your whole "MenuBarHorizontal"

                     

                    <!--  <div id="MainNav">
                        <ul id="MenuBar1" class="MenuBarHorizontal">
                          <li><a class="MenuBarItemSubmenu" href="#">train</a>
                            <ul>

                    ..........
                                 <li><a href="#">fitbird store</a></li>
                            </ul>
                          </li>
                    </ul>
                      </div>-->

                     

                    Below I inserted a new Spry MenuBarHorizontal (without a div id!)

                     

                    <ul id="MenuBar2" 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 href="#">Item 3.1</a>        </li>
                            <li><a href="#">Item 3.2</a></li>
                            <li><a href="#">Item 3.3</a></li>
                          </ul>
                        </li>
                    </ul>

                     

                    and I got this in my offline browser (expl. for Item 1):

                     

                    drSpry.jpg

                     

                     

                    As you can see the spry works, ok, on a very low level, but maybe it encourages you to elaborate my recommendations more and more 'till you will get your personal goal.

                     

                    Good luck!

                    Hans-Günter

                    • 7. Re: Spry Submenu has disappeared
                      Ben Pleysier CommunityMVP

                      The reason Hans-Günter's solution worked is because in his second menu, which worked, he had the constructor in the right spot. The constructor for the menubar must come after the markup.

                       

                      If you move the constructor to just above the </body> tag as follows, all is well.

                      <script type="text/javascript">

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

                       

                      var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("NewsletterPanel", {contentIsOpen:false}); // THE COLLAPSIBLEPANEL CONSTRUCTOR

                      </script>

                      </body>

                      </html>

                       

                      Gramps

                      • 8. Re: Spry Submenu has disappeared
                        Ben Pleysier CommunityMVP

                        @martcol

                         

                        Welcome to the fold brother.

                         

                        Actually I would go one step further: avoid POSITION as much as possible, the default, which is static, along with widths, margins and floats, is all the positioning you need for a normal fluid layout.

                         

                        Gramps

                        • 9. Re: Spry Submenu has disappeared
                          Janie Pearson Community Member

                          Thanks everyone for your input! I am learning quickly that web design is basically fixing one problem to create a new one, lol. I think I've got my spry problem worked out, thanks to your help, and have gone back and fixed my position issues (I think) with my divs... only to somehow have lost my centering of my page! I can't figure out what I did to lose it and I'm sure it's just something I overlooked. Any ideas?

                          • 10. Re: Spry Submenu has disappeared
                            Janie Pearson Community Member

                            I now have the site under:

                             

                            jrhyne.com/Janie/pages/index.html

                            • 11. Re: Spry Submenu has disappeared
                              Ben Pleysier CommunityMVP

                              Please have a look at the following, copy and paste into a new document and view in any browser.

                               

                               

                              <!doctype html>
                              <html>
                              <head>
                              <meta charset="utf-8">
                              <title>Untitled Document</title>
                              <style>
                              * {
                                  padding: 0;
                                  margin: 0;
                              }
                              html {
                                  background-color: #999;
                                  color: #666;
                                  height: 100%;
                                  overflow-y: scroll;
                              }
                              body {
                                  width: 960px;
                                  margin: 10px auto;
                                  border: 2px ridge #999;
                                  background: #FFF;
                              }
                              ol, ul {
                                  margin: 0 10px 0 40px;
                              }
                              p {
                                  padding: 0.8em 20px;
                              }
                              .header {
                                  background: #FFF url(http://jrhyne.com/Janie/graphics/swooshlogoheader.png) no-repeat 20px 5px;
                                  height: 60px;
                                  border-bottom: 2px ridge #999;
                              }
                              .header h1 {
                                  color: #333;
                                  letter-spacing: 2px;
                                  font: 2em Arial, Helvetica, sans-serif;
                                  padding: 10px 0 0 60px;
                                  width: 300px;
                                  float: left;
                              }
                              .header .newsletter {
                                  width: 250px;
                                  float: right;
                                  border: 2px ridge #999;
                                  margin: 20px 10px 0;
                              }
                              .banner {
                                  background: #666;
                                  height: 285px;
                                  margin-top: 2px;
                                  color: #FFF;
                              }
                              .nav {
                                  height: 60px;
                                  background: #00AEEF ;
                                  margin-top: 2px;
                                  color: #FFF;
                              }
                              .article {
                                  overflow: hidden;
                                  padding: 20px;
                              }
                              .article .leftcol {
                                  width: 220px;
                                  float: left;
                              }
                              .article .centrecol {
                                  margin-top: 40px;
                                  width: 440px;
                                  float: left;
                              }
                              .article .centrecol p {
                                  font-size: 1.3em;
                                  text-align: justify;
                              }
                              .article .rightcol {
                                  margin-top: 80px;
                                  width: 230px;
                                  float: right;
                                  background: #33CCFF;
                                  padding-bottom: 20px;
                                  border: 2px outset #333;
                              }
                              .article .rightcol p {
                                  font-size: 1.3em;
                              }
                              .footer {
                                  background: #99CC66;
                                  height: 100px;
                              }
                              </style>
                              </head>
                              
                              <body>
                              <div class="header">
                                <h1>fitbird fitness</h1>
                                <div class="newsletter">
                                    collapsible panel
                                </div>
                              </div>
                              <div class="banner">
                                  <p>content for banner goes here..</p>
                              </div>
                              <div class="nav">
                                  <p>MenuBar</p>
                              </div>
                              <div class="article">
                                  <div class="leftcol">
                                  <img src="http://jrhyne.com/Janie/graphics/sable.jpg" width="213" height="148" alt="goggles" />
                                  <img src="http://jrhyne.com/Janie/graphics/CRBLWH.png" width="200" height="200" alt="helmet" />
                                  <img src="http://jrhyne.com/Janie/graphics/wave-rider-15.jpg" width="222" height="150" alt="shoes" />
                                </div>
                                <div class="centrecol">
                                  <p><strong>FitBird Fitness</strong>, a multisport training company, was established in 2009 after <strong>Coach Anne Shawhan</strong> realized the need for coached performance based triathlon training for men, women, and youth of all ages and abilities.</p>
                                  <p>Since our inception <strong>FitBird Fitness</strong> has become a familiar name in the triathlon community and our athletes have earned respect not only through their performance, but through their willingness to give back with their time to promote the sport and to encourage the community to join the effort to become<em> fit</em>.</p>
                                </div>
                                <div class="rightcol">
                                  <p><strong>fitbird</strong> /fit/ /berd/</p>
                                  <p>Noun:</p>
                                  <ol>
                                    <li>A physically fit, hot body</li>
                                    <li><em> pl.</em>  A group of triathletes that train as a flock under the direction of their coach, the original FitBird</li>
                                  </ol>
                                </div>
                              </div>
                              <div class="footer">
                                  <p>Footer goes here</p>
                              </div>
                              </body>
                              </html>
                              

                               

                              Gramps