spry menu styling question

anna · Nov 2, 2009

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!

PixelPusher · Nov 2, 2009

Can you post a link to the menu?

anna · Nov 2, 2009

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.

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>

PixelPusher · Nov 3, 2009

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

anna · Nov 3, 2009

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!

PixelPusher · Nov 3, 2009

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

anna · Nov 4, 2009

I am not sure I understand... So sorry!

PixelPusher · Nov 4, 2009

What part is confusing you?

anna · Nov 4, 2009

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

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..

anna · Nov 4, 2009

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

PixelPusher · Nov 4, 2009

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.

PixelPusher · Nov 4, 2009

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

anna · Nov 4, 2009

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 & Metals</a></li>
<li><a href="#">Agricultural & Environmental</a></li>
<li><a href="#">Energy & 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 & 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?

anna · Nov 4, 2009

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

PixelPusher · Nov 4, 2009

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.

PixelPusher · Nov 4, 2009

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

anna · Nov 4, 2009

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...

PixelPusher · Nov 4, 2009

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

spry menu styling question

anna

New Member

PixelPusher

Super Moderator

anna

New Member

PixelPusher

Super Moderator

anna

New Member

PixelPusher

Super Moderator

anna

New Member

PixelPusher

Super Moderator

anna

New Member

anna

New Member

PixelPusher

Super Moderator

PixelPusher

Super Moderator

anna

New Member

anna

New Member

PixelPusher

Super Moderator

PixelPusher

Super Moderator

anna

New Member

PixelPusher

Super Moderator