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