spry menu styling question

Discussion in 'Web Design' started by anna, Nov 2, 2009.

to remove all ads.
  1. anna

    anna New Member

    Messages:
    542
    Hello,

    Can anyone tell me how to style my spry menu (which is set up as horizontal) to display the drop down menu in a horizontal fashion as well? I know it has to be something in the positioning but I cannot figure it out.

    Thank you for any suggestions!
     
  2. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Can you post a link to the menu?
     
  3. anna

    anna New Member

    Messages:
    542
    The menu is not online yet- I am playing with it in DW so I can make a template. Here are a couple of images though (what I have and what I want). Will these help? I can paste the css code as well... Thank you, in advance.
    menu_before.jpg

    menu_after.jpg

    Here is the code:
    Code:
    #Table_01 {
    	position:absolute;
    	left:200px;
    	top:10px;
    	width:1000px;
    	height:800px;
    }
    
    #header_ {
    	position:absolute;
    	width:1000px;
    	height:97px;
    }
    
    #logo-nav_ {
    	position:absolute;
    	left:0px;
    	top:97px;
    	width:1000px;
    	height:117px;
    }
    
    #content-_ {
    	position:absolute;
    	left:0px;
    	top:214px;
    	width:1000px;
    	height:550px;
    }
    
    #footer_ {
    	position:absolute;
    	left:0px;
    	top:764px;
    	width:1000px;
    	height:36px;
    }
    
    HTML:
    <body style="background-color:#FFFFFF;">
    <!-- Save for Web Slices (site_layout.psd - Slices: footer) -->
    <div id="Table_01">
    	<div id="header_">
        <img id="header" src="http://www.webdesignforum.com/images/images/header.jpg" width="1000" height="97" alt="header slice" />
    	</div>
    	<div id="logo-nav_">
        <img name="logo_slice" src="http://www.webdesignforum.com/images/images/logo-nav.jpg" width="1000" height="117" border="0" id="logo_slice" alt="" /> 
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a class="MenuBarItemSubmenu" href="#">Markets</a>
            <ul>
               <li><a href="#">Mined Materials &amp; Metals</a></li>
               <li><a href="#">Agricultural &amp; Environmental</a></li>
               <li><a href="#">Energy &amp; Fuels</a></li>
               <li><a href="#">Food</a></li>
               <li><a href="#">Life Sciences</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Products</a>
            <ul>
              <li><a href="#">Consumables</a></li>
              <li><a href="#">Inorganic</a></li>
              <li><a href="#">Organic</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Metallography</a>
                <ul>
                  <li><a href="#">Accessories</a></li>
                  <li><a href="#">Grinding and Polishing</a></li>
                  <li><a href="#">Hardness Tester</a></li>
                  <li><a href="#">Image Analysis &amp; Management</a></li>
                  <li><a href="#">Mounting</a></li>
                  <li><a href="#">Optics</a></li>
                  <li><a href="#">Sectioning</a></li>
                </ul>
              </li>
              <li><a href="#">Separation Science</a></li>
              <li><a href="#">Used/Demos</a></li>
            </ul>
          </li>
          <li><a class="MenuBarItemSubmenu" href="#">Support</a>
            <ul>
              <li><a href="#">Ask An App Question</a></li>
              <li><a href="#">Live Chat</a></li>
              <li><a href="#">Manuals</a></li>
              <li><a href="#">PIB</a></li>
              <li><a href="#">Preventive Maintenance</a></li>
              <li><a href="#">Diagnostics</a></li>
              <li><a href="#">App Labs</a></li>
              <li><a href="#">Warranty</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Resources</a>
            <ul>
              <li><a href="#">App Library</a></li>
              <li><a href="#">Approved Methods</a></li>
              <li><a href="#">Articles &amp; Reference</a></li>
              <li><a href="#">Leasing</a></li>
              <li><a href="#">Mobile Labs</a></li>
              <li><a href="#">MSDS</a></li>
              <li><a href="#">Reference Cards</a></li>
              <li><a href="#">Tradeshows</a></li>
              <li><a href="#">e-Seminars</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Corporate</a>
            <ul>
              <li><a href="#">Contact Us</a></li>
              <li><a href="#">Corporate Profile</a></li>
              <li><a href="#">Worldwide</a></li>
              <li><a href="#">Privacy Statement</a></li>
              <li><a href="#">Search</a></li>
            </ul>
          </li>
        </ul>
    	</div>
    <div id="content-_">
        <img id="contentx20" src="http://www.webdesignforum.com/images/images/content-.gif" width="1000" height="550" alt="content slice" />
        </div>
    	<div id="footer_">
        <img id="footer" src="http://www.webdesignforum.com/images/footer.jpg" width="1000" height="36" alt="footer slice" />
        </div>
    </div>
    <!-- End Save for Web Slices -->
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    
     
    Last edited by a moderator: Nov 3, 2009
  4. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    If you want your submenu items to line up horizonatlly, my suggestion would be to add a left float to each LI and style the anchors. Something like this:

    Code:
    ul.submenu {
      margin:0;
      padding:0;
      height:30px;
      width:auto;
    }
    
    ul.submenu li {
      list-style-type:none;
      float:left;
      margin:0;
      padding:0;
    }
    ul.submenu a:link, ul.submenu a:visited {
      display:block;
      text-align:center;
      text-decoration:none;
      text-transform:capitalize;
      padding:0 10px;
      margin:0;
      height:30px;
      line-height:30px;
      color:#555;
      background-color:#eee;
      font:normal 8pt Tahoma;
    }
    
    ul.submenu a:hover, ul.submenu a:focus {
      background-color:#ccc;
      color:#fff;
    }
    
     
  5. anna

    anna New Member

    Messages:
    542
    Thank you for the suggestion.

    I am not sure how to do that; do I create new compound style rules to do this?

    Or do I modify the existing rules?

    I am sorry I am so inexperienced, I am frantically reading "Mastering CSS with Dreamweaver CS4" by Sullivan and Rewis, right now, trying to learn as much about CSS as I can! By no means do I expect you or anyone else to do my work for me, I just need step by step instructions.

    If it is too much of a pain, I completely understand, and thank you for the time you have taken to help me with this problem!
     
  6. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Not a problem I am willing to help....

    You should be able to add the css below directly into your existing style sheet(s) or create a new one, either way.

    The first-level nested ULs will need to have a class assigned to them, like so:

    HTML:
          <li><a class="MenuBarItemSubmenu" href="#">Markets</a>
            <ul class="submenu">
               <li><a href="#">Mined Materials &amp; Metals</a></li>
               <li><a href="#">Agricultural &amp; Environmental</a></li>
               <li><a href="#">Energy &amp; Fuels</a></li>
               <li><a href="#">Food</a></li>
               <li><a href="#">Life Sciences</a></li>
            </ul>
          </li>
    
    The issue you will need to think about is how will the second-level nested UL display?


    first-level: a UL within the initial LI (i.e. Markets)

    second-level: a UL within the first-level LI
     
  7. anna

    anna New Member

    Messages:
    542
    I am not sure I understand... So sorry!
     
  8. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    What part is confusing you?
     
  9. anna

    anna New Member

    Messages:
    542
    Ok, so I styled the submenu accordingly, but the text does not lay out horizontally, beneath the menu. It looks like this:

    menu.jpg

    While it is getting closer to what I am trying to do, it's still not quite there...This little piece is really tripping me up... And thank you, again, for your patience and help.

    This is where I am trying to go..
    menu_after.jpg
     
  10. anna

    anna New Member

    Messages:
    542
    Does my question about laying out the submenu horizontally make sense? I want to make sure I am asking the right question, because I am inexperienced and sometimes find that what makes sense in my head does not come out correctly on paper. :)

    What part of AZ are you in (if you don't mind me asking)?

    I just moved from Ventura, CA to Michigan
     
  11. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Yeah your question makes total sense so dont worry about that :)

    Did you associate the styles I listed below to the internal (first-level) UL?
    Meaning the styles need to be added to the linked stylesheet and the "submenu" class needs to be added to the UL tag.

    I live in Phoenix, I moved here from CA. Ventura is nice. I go back to visit a lot. Miss the ocean.
     
  12. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    The "float:left" should make the list items (LI) stack next to each other in a horizontal line instead stacking vertically.
     
  13. anna

    anna New Member

    Messages:
    542
    I think I did (never a good sign when one starts with "I think so..."
    Here is the HTML code:

    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">Markets</a>
    <ul class="submenu">
    <li><a href="#">Mined Materials &amp; Metals</a></li>
    <li><a href="#">Agricultural &amp; Environmental</a></li>
    <li><a href="#">Energy &amp; Fuels</a></li>
    <li><a href="#">Food</a></li>
    <li><a href="#">Life Sciences</a></li>
    </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Products</a>
    <ul>
    <li><a href="#">Consumables</a></li>
    <li><a href="#">Inorganic</a></li>
    <li><a href="#">Organic</a></li>
    <li><a href="#" class="MenuBarItemSubmenu">Metallography</a>
    <ul>
    <li><a href="#">Accessories</a></li>
    <li><a href="#">Grinding and Polishing</a></li>
    <li><a href="#">Hardness Tester</a></li>
    <li><a href="#">Image Analysis &amp; Management</a></li>
    <li><a href="#">Mounting</a></li>
    <li><a href="#">Optics</a></li>
    <li><a href="#">Sectioning</a></li>
    </ul>
    </li>



    And here is the code from the style sheet:

    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;
    top: 60px;
    }
    ul.submenu {
    margin: 0;
    padding: 0;
    height: 30px;
    width: auto;
    }
    ul.submenu li {
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    }
    ul.submenu a:link, ul.submenu a:visited {
    display: block:
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    padding: 0 10px;
    margin: 0;
    height: 30px;
    color: #555;
    background-color: #eee;
    font: normal 8pt Tahoma;
    }
    ul.submenu a:hover, ul.submenu a:focus {
    background-color: #ccc;
    color: #fff;
    }


    P.S. How do I clean the code up for easier reading? I noticed you did that yesterday?

    What part of CA do you come from?
     
  14. anna

    anna New Member

    Messages:
    542
    I added the class "submenu" to the other HTML elements that needed it; i.e. "support, resources, corporate"
     
  15. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Ok you have the code entered correctly, but...

    you have a global style applied to all ULs under the UL with a class name of "MenuBarHorizontal". This must be overriding the style "submenu" and stopping it from displaying laterally.

    so..for right now just comment out this style:
    Code:
    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;
    top: 60px;
    }
    
    FYI
    What that style above is saying is this:
    for every UL that is found inside the UL with a class name of "MenuBarHorizontal " apply these style to it.

    to "comment out" css, wrap the style like this:
    Code:
    /* 
    ul.style {
    blah;
    blah;
    } 
    */
    
    I grew up in San Diego (love it), then moved to norcal for college, and then moved to Monterey for a year or so before moving out to Phoenix. I have traveled a bit.
     
  16. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    BTW
    Anna there must be some other styles (at lease two) that address the style for the main UL (MenuBarHorizontal).

    They would look something like this:
    Code:
    ul.MenuBarHorizontal {
       style for list
    }
    ul.MenuBarHorizontal li {
       style for list items
    }
    
    John
     
  17. anna

    anna New Member

    Messages:
    542
    Ahhhhh....YES!!!! That totally worked!!! Now I get it...Thank you so much, John!!!

    You are tha CSS masta!

    I spent a lot of time in both SD and Monterey; if I could afford to live anywhere in the world, I think it would be Monterey. I went to college in Santa Barbara but am a MI native.

    Thanks again, I don't have to beat my brains against my cubicle anymore...
     
  18. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Excellent! Glad to hear that worked.
    It can sometimes be tricky editing the pre-built structures like the ones DW. Building from scratch is the best method but not always the easiest. Anyway, if you run into any other snags feel free to ask me.

    Yeah Monterey is really nice, the coast line is beautiful, excellent for scuba diving. Plus Santa Cruz is right around the corner (good mountain biking).

    Thanks for the compliments....
    and take it easy on those cubicle walls :p
     

Share This Page