Snippets today are a little more, well... complicated

Today developers have it great - there are tons of 3rd party libraries, API's and tools that handle the most mundane tasks, shorten our code, and in some cases allow different people with different talents to contribute to the overall project good.  The bad news is that developers today deal with lots of different frameworks and languages to accomplish even the simplest programming feat.

So, to properly demonstrate a good snippet - let's take a simple example - rollover main menu.  How many times have you coded that one, eh?

There are lots of approaches - man, I think I have done them all.  Lately, we seem to use this sprite method a lot.  So to set this up - let's discuss.  First, the menu needs 3 states, normal, hover, and selected.  And to use a sprite, I need a single image that includes all 3 states.

Here's one:

Next, I need some html - how to "embed" the menu into the page.  I like using unordered lists, so here that is:

<div id="navigation">
   <ul>
      <li id="n1"><a id="A1" runat="server" href="/HowItWorks/Gallery.aspx">Take 
         a tour</a></li>
      <li id="n2"><a id="A2" runat="server" href="/blog">Blog</a></li>
      <li id="n3"><a id="A3" runat="server" href="/SignUp/Enrollment.aspx">Plans / Sign Up</a></li>
      <li id="n4"><a id="A4" runat="server" href="/FeedBack/SendFeedback.aspx">Contact</a></li>
   </ul>
</div>

Next, we need a little css:

#navigation
{
    width: 467px;
    padding: 64px 0 0;
    height: 42px;
    float: right;
    display: inline;
    clear: right;
}


#navigation ul
{
    position: relative;
    width: 467px;
    height: 42px;
    background-image: url(images/nav/top_nav.gif);
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navigation ul li, #navigation a
{
    display: block;
    height: 42px;    
}

#navigation ul li a
{
    text-indent: -9999px;
    text-decoration: none;
}

#n1 { left: 0; top: 0; width: 110px; }
#n2 { left: 111px; top: 0; width: 70px; }
#n3 { left: 182px; top: 0; width: 139px; }
#n4 { left: 322px; top: 0; width: 145px; }

#n1 a:hover { background: transparent url(images/nav/top_nav.gif) 0 -42px no-repeat; border-bottom: 0; }
#n2 a:hover { background: transparent url(images/nav/top_nav.gif) -111px -42px no-repeat; border-bottom: 0; }
#n3 a:hover { background: transparent url(images/nav/top_nav.gif) -182px -42px no-repeat; border-bottom: 0; }
#n4 a:hover { background: transparent url(images/nav/top_nav.gif) -322px -42px no-repeat; border-bottom: 0; }

#n1 a.selected { background: transparent url(images/nav/top_nav.gif) 0 -84px no-repeat;border-bottom: 0; }
#n2 a.selected { background: transparent url(images/nav/top_nav.gif) -111px -84px no-repeat;border-bottom: 0; }
#n3 a.selected { background: transparent url(images/nav/top_nav.gif) -182px -84px no-repeat; border-bottom: 0; }
#n4 a.selected { background: transparent url(images/nav/top_nav.gif) -322px -84px no-repeat; border-bottom: 0; }

Finally, since this is a .NET application, I'll add some code-behind to dynamically set the "selected" css class when a menu option is the current selection:

protected void Page_Load( object sender,
                          EventArgs e )
{
   if ( IsPostBack ) return;
   ResetUserHeaderItems( );
}

private void ResetUserHeaderItems( )
{
    string pathLower = Request.Url.AbsolutePath.ToLowerInvariant( );

    if ( pathLower.Contains( "/howitworks/" ) )
    {
        A1.Attributes[ "class" ] = "selected";
    }
    else if (pathLower.Contains("/blog/"))
    {
        A2.Attributes[ "class" ] = "selected";
    }
    else if (pathLower.Contains("/signup/"))
    {
        A3.Attributes[ "class" ] = "selected";
    }
    else if (pathLower.Contains("/feedback/"))
    {
         A4.Attributes[ "class" ] = "selected";
    }
}

So even in this simple example, we are using 3 different languages to accomplish a single task. But there is really one more thing I should do - this could be better with a functioning example page. So I can upload a mini-project, complete with my image, a .css file, a .aspx and the codebehind .cs file.

Now, this is a simple example, but you can certainly imagine a larger more complex scenario - how about a snippet to teach the basics of LINQ to Entities? Maybe a dependency injection sample using Castle?