HOW TO: Customizing the CSS Friendly Adapters

Discussion in 'ASP .Net' started by Gregory A. Beamer, Aug 5, 2009.

  1. NOTE: The entry linked below is raw. I will have another blog entry soon
    with a more detailed explanation. Follow @CrazyCancerDev on Twitter (no
    tweets yet) if you want to subscribe to different topics on developing a
    new site (including tweet on blog entry, CSS Friendly adapter
    alteration, publishing a blog using Windows Live Writer, etc).


    I posted a brief tutorial of what I did to alter the CSS Friendly
    adapters:
    http://bit.ly/4fTuIR

    This is the first of two blog entries, as I will have more info on this
    in the upcoming week or so. The basic gist of the entry is getting rid
    of the class heavy definitions (classes defined at each level of the
    menu) and moving to defining one class for the menu type (horizontal or
    verticle) and then using standard ul/li syntax underneath that one class
    definition.

    In the original CSS Friendly adapters (found at
    http://www.codeplex.com/cssfriendly), you end up having markup that
    looks like this:

    <div class="AspNet-Menu-Horizontal">
    <ul class="AspNet-Menu">
    <li class="AspNet-Menu-WithChildren">
    <a href="javascript:__doPostBack('EntertainmentMenu','bMusic')"
    class="AspNet-Menu-Link">Music</a>
    <ul>
    <li class="AspNet-Menu-Leaf">
    <a href="javascript:__doPostBack('EntertainmentMenu','bMusic
    \\Classical')" class="AspNet-Menu-Link">
    Classical</a>
    </li>
    <li class="AspNet-Menu-WithChildren">
    <a href="javascript:__doPostBack('EntertainmentMenu','bMusic
    \\Rock')" class="AspNet-Menu-Link">
    Rock</a>
    <ul>
    <li class="AspNet-Menu-Leaf">
    <a href="javascript:__doPostBack('EntertainmentMenu','bMusic
    \\Rock\\Electric')" class="AspNet-Menu-Link">
    Electric</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="javascript:__doPostBack('EntertainmentMenu','bMusic
    \\Rock\\Acoustical')"
    class="AspNet-Menu-Link">Acoustical</a>
    </li>
    </ul>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="javascript:__doPostBack('EntertainmentMenu','bMusic
    \\Jazz')" class="AspNet-Menu-Link">Jazz</a>
    </li>
    </ul>
    </li>
    <li class="AspNet-Menu-WithChildren">
    <span class="AspNet-Menu-NonLink">Movies</span>
    <ul>
    <li class="AspNet-Menu-Leaf">
    <a href="javascript:__doPostBack('EntertainmentMenu','bMovies
    \\Action')" class="AspNet-Menu-Link">Action</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="javascript:__doPostBack('EntertainmentMenu','bMovies
    \\Drama')" class="AspNet-Menu-Link">Drama</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="javascript:__doPostBack('EntertainmentMenu','bMovies
    \\Musical')" class="AspNet-Menu-Link">
    Musical</a>
    </li>
    </ul>
    </li>
    </ul>
    </div>

    With my variation, the HTML is much cleaner and looks like this:

    <div class="AspNet-Menu-Horizontal">
    <ul>
    <li>
    <a href="javascript:__doPostBack('EntertainmentMenu','bMusic')">
    <span>Music</span></a>
    <ul>
    <li>
    <a href="javascript:__doPostBack('EntertainmentMenu','bMusic
    \\Classical')">
    <span>Classical</span></a>
    </li>
    <li>
    <a href="javascript:__doPostBack('EntertainmentMenu','bMusic
    \\Rock')">
    <span>Rock</span></a>
    <ul>
    <li>
    <a href="javascript:__doPostBack('EntertainmentMenu','bMusic\\Rock
    \\Electric')">
    <span>Electric</span></a>
    </li>
    <li>
    <a href="javascript:__doPostBack('EntertainmentMenu','bMusic\\Rock
    \\Acoustical')">
    <span>Acoustical</span></a>
    </li>
    </ul>
    </li>
    <li>
    <a href="javascript:__doPostBack('EntertainmentMenu','bMusic
    \\Jazz')">
    <span>Jazz</span></a>
    </li>
    </ul>
    </li>
    <li>
    <a href="javascript:__doPostBack
    ('EntertainmentMenu','bMMovies")">
    <span>Movies</span></a>
    </li>
    <ul>
    <li>
    <a href="javascript:__doPostBack('EntertainmentMenu','bMovies
    \\Action')">
    <span>Action</span></a>
    </li>
    <li>
    <a href="javascript:__doPostBack('EntertainmentMenu','bMovies
    \\Drama')">
    <span>Drama</span></a>
    </li>
    <li>
    <a href="javascript:__doPostBack('EntertainmentMenu','bMovies
    \\Musical')">
    <span>Musical</span></a>
    </li>
    </ul>
    </li>
    </ul>
    </div>

    The point here is I am using simple <ul> and <li> tags, without classes
    specified, which is more like the standard. The DIV tag still has a
    class, which is used to easily move from horizontal to vertical menus
    without a huge code change (one class changed).

    The entry was inspired largely by Mark Rae, who has repeatedly asked me
    to post what I had done.

    --
    Gregory A. Beamer
    MVP; MCP: +I, SE, SD, DBA

    Twitter: @gbworld
    Blog: http://gregorybeamer.spaces.live.com

    *******************************************
    | Think outside the box! |
    *******************************************
     
    Gregory A. Beamer, Aug 5, 2009
    #1
    1. Advertising

  2. Gregory A. Beamer

    HillBilly Guest

    That makes three of us ;-)

    <snip />
     
    HillBilly, Aug 5, 2009
    #2
    1. Advertising

  3. "HillBilly" <> wrote in news:uFyTnz9FKHA.4932
    @TK2MSFTNGP04.phx.gbl:

    > That makes three of us ;-)
    >
    > <snip />
    >


    I psoted a version that goes with the product Artisteer (a $49 template
    site builder). It is still a work in progress, as I still have to get non-
    linked items to display properly (not an issue for me as all menu items
    have links in mine, so it may be in September when I get it done -
    apologies in advance).

    Entry found here:
    http://bit.ly/ihgsb

    If you have not played with Artisteer, the demo is full featured, so you
    can play with it. It does brand all images, however, so you have to buy
    before you post your site.

    --
    Gregory A. Beamer
    MVP; MCP: +I, SE, SD, DBA

    Twitter: @gbworld
    Blog: http://gregorybeamer.spaces.live.com

    *******************************************
    | Think outside the box! |
    *******************************************
     
    Gregory A. Beamer, Aug 10, 2009
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    2
    Views:
    277
    Kevin Spencer
    May 1, 2007
  2. Replies:
    1
    Views:
    278
  3. Nitin
    Replies:
    1
    Views:
    354
    Michael Nemtsev
    Nov 20, 2007
  4. Mark B
    Replies:
    3
    Views:
    471
    Gregory A. Beamer
    Jul 10, 2009
  5. Mark B

    CSS Friendly Adapters

    Mark B, Jul 15, 2009, in forum: ASP .Net
    Replies:
    5
    Views:
    1,212
    Gregory A. Beamer
    Jul 17, 2009
Loading...

Share This Page