HOW TO: Customizing the CSS Friendly Adapters

[Gregory A. Beamer]

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.

 

[HillBilly]

That makes three of us ;-)

<snip />

 

[Gregory A. Beamer]

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.