Skip navigation
Janie Pearson
Currently Being Moderated

Spry Submenu has disappeared

Apr 15, 2012 10:23 AM

Tags: #missing #spry #submenus #menu #bar

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

 
Replies
  • Currently Being Moderated
    Apr 15, 2012 10:32 AM   in reply to Janie Pearson

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2012 10:37 AM   in reply to martcol

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2012 11:24 AM   in reply to Janie Pearson

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2012 1:03 PM   in reply to Janie Pearson

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2012 6:07 PM   in reply to Janie Pearson

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2012 6:15 PM   in reply to martcol

    @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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 9:27 PM   in reply to Janie Pearson

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points