Menu skinning with Bootstrap

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
8/30/2012 10:34:02 AM
Gravatar
Total Posts 6

Menu skinning with Bootstrap

Hi,

I'm trying to make a few skins with Twitter Bootstrap to contribute to the cause.  I'm having trouble with menus.

The portal:SiteMenu control is generating HTML that looks like the following.  Note that there's a <ul> with a second <ul> nested within.

<div class="AspNet-Menu-Horizontal" id="ctl00_SiteMenu1_ctl00">
   <ul class="AspNet-Menu">
      <li class="AspNet-Menu-WithChildren AspNet-Menu-SelectedWithChildren">
         <a href="/new-page.aspx" class="AspNet-Menu AspNet-Menu-SelectedWithChildren">Home</a>
            <ul>
               <li class="AspNet-Menu-Leaf AspNet-Menu-ParentSelected">
                  <a href="/new-page-1.aspx" class="AspNet-Menu AspNet-Menu-ParentSelected">New Page</a>
               </li>
               <li class="AspNet-Menu-Leaf AspNet-Menu-ParentSelected">
                  <a href="/new-page-2.aspx" class="AspNet-Menu AspNet-Menu-ParentSelected">New Page 2</a>
               </li>
            </ul>
      </li>
   </ul>
</div>

This doesn't work with Bootstrap, which is expecting a single <ul> with a collection of <li> elements within.  I could modify the Bootstrap CSS to work with this, but that seems to defeat the purpose of making a Bootstrap-compatible skin.  I could try to generate a Bootstrap compatible menu control which generates the correct HTML.  Are there any other ways to deal with this problem?

NOTE:  The new Bootstrap skins that come with mojoPortal use Bootstrap 2.03.  I'm working with the latest version of Bootstrap, 2.1.0, which is a bit different.

Andrew Fenster

8/30/2012 10:45:53 AM
Gravatar
Total Posts 6

Re: Menu skinning with Bootstrap

I should clarify - the nested <ul> would be OK if I can put a CSS class of "dropdown-menu" on it.  Here's a Bootstrap example:

<ul class="nav">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#about">About</a></li>
   <li><a href="#contact">Contact</a></li>
   <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      Smile<ul class="dropdown-menu">Smile
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
         <li><a href="#">Something else here</a></li>
         <li class="divider"></li>
         <li class="nav-header">Nav header</li>
         <li><a href="#">Separated link</a></li>
         <li><a href="#">One more separated link</a></li>
      </ul>
   </li>
</ul>

8/30/2012 10:48:07 AM
Gravatar
Total Posts 18439

Re: Menu skinning with Bootstrap

Hi,

Bootstrap doesn't really come with anything suitable for a menu in a cms, so you'll need to figure out your own menu style. A cms by nature can have any hierarchy of pages with any depth and asp.net menu controls also support this hierarchy in that the site map is a hierarchal data source and the menu and treeview controls are designed to data bind to a hierarchal data source.

You can control the css classes rendered on menu/treeview items from theme.skin (study a few different skins and look at the menu and treeview stuff in theme.skin) and you can control the hierarchy structure by the parent page relationships in the cms. ie if you only create root level pages then it will just be single ul with li elements (and you could possibly get away with bootstrap menu css in that case), but as soon as you create child pages then naturally other uls must be nested within the li elements of the parent ul on down to any depth level.

The lack of anything really suited to unlimited menu depth and arbitrary page hierarchy that can be created in a cms is why I had to use something else for the menu in the example bootsrap skins, because I cannot expect that people will limit their site to root level pages.

Hope that helps,

Joe

8/30/2012 10:53:18 AM
Gravatar
Total Posts 18439

Re: Menu skinning with Bootstrap

It isn't really feasible/possible to inject arbitrary extra markup at arbitrary locations in the asp.net menu or treeview controls such as extra lis that don't have link and arbitrary extra data attributes. It could possibly be done with custom development of menu or treview adapters but the custom development would be non generic, ie you'de have to hard code specific things in there for your specific needs, there isn't a way to make a one size fits all possible requirements type of solution.

Best,

Joe

8/30/2012 11:13:41 AM
Gravatar
Total Posts 6

Re: Menu skinning with Bootstrap

The mojoTreeView class has a public property called ChildUlCssClass.  That seems like it might do the trick, letting me set the CSS class for the nested <ul> tag to "dropdown-menu".  Unfortunately, I've tried setting this property and it doesn't seem to do anything.  If it's actually adding a CSS class somewhere, I can't see it.

 

 

8/30/2012 11:18:00 AM
Gravatar
Total Posts 6

Re: Menu skinning with Bootstrap

I'm sorry, I just got the <ul> tag working.  (I've been at it for a while.)  Now there are other problems.  I'll keep at it on my own for a few hours.  Thanks for your prompt response and help.

Andrew

You must sign in to post in the forums. This thread is closed to new posts.