CSS Menu Stepdown Issue


Normally when floating objects you can count on them lining up vertically until they break. That is, you could if you weren’t using IE 6. IE 6 appends a line break effect after each floated block element which will cause “stepdown”.

The fix here is to make sure the line-height in the parent element is set to zero (0), or that the elements being floated are inline elements.

If you are familiar with the concepts of “floats”, you know that if you float a page element to the left, that the next page element will move up next to that element on the right, if possible. But have you ever seen your floated elements “stepdown”?

This is a fairly common problem you can run into when creating a horizontal menu. Like most menus, you create an unordered list:

<ul id=”menu“>
<li><a href=”#”>My</a></li>
<li><a href=”#”>Little</a></li>
<li><a href=”#”>Menu</a></li>
</ul>

You want the menu items to be large clickable blocks, so you write CSS like this:

ul#menu li a {
display: block;
width: 130px;
text-align: center;
font-weight: bold;
float: left;
color: white;
font-size: 1.2em;
text-decoration: none;
background: #600;
}

Those blocks are floated the left, so they should all line up in a row, right? Nope, that’s gonna get you some stepdown action. The problem is the list elements wrapping the anchor elements. These are also block-level elements but they are not floated. This confuses things, because block elements naturally have a break after them (like an invisible <br />). That pushes the next one down whatever the current line-height is, which is what causes the stepdown.

Here is the remedy:

ul#menu li {
display: inline; /* Prevents “stepdown” */
}

So the possible solutions for this problem are:

  • Setting those list elements as inline will take away those breaks and make sure your menu stays nice, happy, and straight!
  • Also, the problem is disappear if make line-height:0 to li elements
  • Another option would be to float the li elements instead of the links. This will also give you a little more control over the positioning/spacing of each li.

NB: This post is  simplified version of the post from http://css-tricks.com/prevent-menu-stepdown/?. Please refer the original site for more information.

ASP .Net Menu using ordered list – ul, li concept


I give a different approach to menu creation, in my ASP .Net project. The main wins being the performance and ease of use. Asp menu is pretty messy when you look at the code behind and the page size it adds. But use this concept only if performance is a critical factor.
Concept:
•    Use of ordered list (ul and li) and css smartly to construct the menu’s. Check any standard sites (www.apple.com) They use this concept.
•    Aspx design with divs only. ASP menu create Tables that are pretty messy and affects the page performance.

Screenshot:


Advantage:
•    Page is light weight
•    No table structure, only divs
•    The page menu loads like a normal html and is pretty cool and fast. It does not have any server tags also… eh except for the one div into which I have to add the codebehind menu result.

Codebehind:
•    Setup a usercontrol for this. Add it to master page.
•    Basic concept is to create the <ul> <li> <a> sections through codebehind. Use template concept, as defined below:

•    Use string.Format : string liSbTemp = string.Format(liTemplate, “link1”, “’active’”, “|”));
•    Use stringbuilder.append and so on…
•    Use for-loops effectively along with the above template(string.format({0}{1})), stringbuilder, LINQ(for querying through the list returned by the db) and structure a menu as below:

•    ‘ctl100_nvgMenu_divNavigator’ is the div with runat=server, into which I add my stringbuilder result.
•    ‘GlobalNav’ div is a wrapper to the full menu.
•    ‘mainNav’ <ul> has the main navigation tab anchor tags(<a>), with its own <li>
•    ‘subNav’ <ul> has the sub menu sections, with its own <li>
•    At the end, add the stringbuilder result to a div-divNavigator(which has a runat server attribute… only 1 runat server or do findcontrol and add it to a div on the page)
•    Use innerHtml (ctl100_nvgMenu_divNavigator.innerHtml ) to add it to the ‘divNavigator’ or else you will have some issue with the EnableEventValidation attribute in the page directive, during navigation.

Css: I am sharing the full css selector list here
#header #globalNav
{
padding-left: 8px;
padding-right: 8px;
}

#header #globalNav ul
{
padding: 1px 0px 0px 0px;
margin: 0;
list-style: none;
}

#header #globalNav ul li
{
float: left;
}

/* Start – Main Nav */

#globalNav ul#mainNav
{
font-size: 14px;
height: 27px;
}

ul#mainNav li a
{
color: #ffffff;
text-decoration: none;
line-height: 27px;
padding: 0 10px 0 9px;
}

ul#mainNav li.active
{
background: url(../../Resources/images/mainNav_left.gif) no-repeat;
}

ul#mainNav li.active a
{
background: url(../../Resources/images/mainNav_rt.gif) no-repeat right;
display: block;
color: #0D8695;
cursor: default;
}

/* End – Main Nav */

/* Start – Sub Nav */

#globalNav ul.subNav
{
border-bottom: 1px solid #C2CEDA;
height: 23px;
}
ul.subNav li
{
padding-right: 10px;
}
ul.subNav li a
{
color: #666666;
text-decoration: none;
line-height: 23px;
margin: 0 10px 0 0;
}

ul.subNav li a:hover
{
color: #0D8695;
}

ul.subNav li.active a
{
color: #0D8695;
cursor: default;
}

ul.subNav li.active a:hover
{
color: #0D8695;
text-decoration: none;
}

Voila… you have a light weight and powerful menu to boast off…

I totally respect the asp:Menu’s, but I am totally against using tables in any site… they are really primitive…  Hope Microsoft introduce div designs for the asp:Menu…

NB: To get a good head start, check the html source of apple site menu…..