Vertical menu with non-collapsing child nodes

12/2/2009 3:32:58 AM

Evan

Total Posts 4

View Posts

Vertical menu with non-collapsing child nodes

Hello,

I see some queries in the forums asking about having a vertical menu with child nodes that will not collapse. Has anyone produced a skin/code tweaks that does a clean job of this?

In the layout.Master I've set the SiteMenu properties of UseTreeView=true, TreeViewExpandDepth=5, TreeViewShowExpandCollapse=false, TopLevelOnly=false, Direction=Vertical.

A few questions I have (sorry, I'm too tired tonight to look all of these things up):

1. When the parent is selected the child node is surrounded by the background fill of the parent. Can this be overcome through css?

2. Is there a way to have the entire width of a tree node be clickable instead of only the text of the node being clickable? I'll try playing with setting the nodes width to 100%.

3. Is there a way to have a parent node that does not have a page, so that clicking the parent node would open the first child, or possibly be non-clickable? If this isn't already done, would TreeViewAdapter::RaisePostbackEvent be a good place to select the child?

Thanks in advance,

-Evan

(great job on mojoPortal - keep up the good work!)

12/2/2009 10:40:36 AM

Joe Davis

Total Posts 2253

View Posts

Re: Vertical menu with non-collapsing child nodes

Hi Evan,

If you want to use a vertical menu that doesn't collapse set the UseTreeView=false. After doing this, you will have to modify a different set of CSS Classes (AspNet-Menu-Vertical). I have included some CSS for this below. You will have to of course tweak it to match what you are trying to do.

div.AspNet-Menu-Vertical{
}
div.AspNet-Menu-Vertical ul.AspNet-Menu {
position: relative;
font-size: 12px;
font-weight:normal;
list-style: none;
z-index: 100;
padding:0 10px 0 5px;
margin: 0px auto 15px 0px;
}
div.AspNet-Menu-Vertical ul.AspNet-Menu li ul.AspNet-Menu {
padding-left: 16px;
}
div.AspNet-Menu-Vertical ul.AspNet-Menu li {
z-index: 99;
list-style:none;
}
div.AspNet-Menu-Vertical ul.AspNet-Menu li.nobullet {
background-image: none;
}
div.AspNet-Menu-Vertical ul.AspNet-Menu li.nobullet a{
margin-left:0px;
}

div.AspNet-Menu-Vertical ul.AspNet-Menu li a {
display: block;
color: #c0c0c0;
text-decoration: none;
padding-left: 15px;
background: url('arrowRight_gray.gif') transparent no-repeat scroll left center;
line-height: 25px;
}
div.AspNet-Menu-Vertical ul.AspNet-Menu li a:hover {
color: #fff;
text-decoration:none;
background-color: #666666;
}
div.AspNet-Menu-Vertical ul.AspNet-Menu li a img{
padding-right: 3px;
float: left;
display:block;
}

div.AspNet-Menu-Vertical ul.AspNet-Menu li a.AspNet-Menu-SelectedLeaf,
div.AspNet-Menu-Vertical ul.AspNet-Menu li a.AspNet-Menu-SelectedWithChildren {
color: #fff;
font-weight:bold;
background-color: #666666 !important;
}

div.AspNet-Menu-Vertical ul.AspNet-Menu li.AspNet-Menu-WithChildren ul {
padding-left: 20px;
}

To answer your other questions:

Yes, you will have to apply the background to div.AspNet-Menu-Vertical ul.AspNet-Menu li a.AspNet-Menu-SelectedWithChildren. The key here is that you are applying the background to the link (a) and not the list item (li). The list item contains the list of children while the link only contains the link.
This should be taken care of when you use the CSS above.
Please see http://www.mojoportal.com/how-to-make-a-page-link-to-a-child-page.aspx.

HTH,
Joe Davis

12/2/2009 6:53:30 PM

Evan

Total Posts 4

View Posts

Re: Vertical menu with non-collapsing child nodes

Thanks Joe, that did help a lot.

In order to make the whole li clickable (instead of requiring the user to click the <a> text) I ended up adding the following:

div.AspNet-Menu-Vertical ul.AspNet-Menu li a { width: 100%; }

Best,

-Evan

12/2/2009 11:12:53 PM

Evan

Total Posts 4

View Posts

Re: Vertical menu with non-collapsing child nodes

There are two scenarios present in my site:

1. Parent menu elements that do NOT have a page of their own, so the parent menu element should never be highlighted.

2. And parent menu elements that DO have their own pages, so they should be highlighted.

By looking at the generated HTML, it looks like the parent menu element has the class AspNet-Menu-SelectedWithChildren even if the child element is actually selected (the child AspNet-Menu-Selected-Leaf is selected, not the parent). I tried some CSS selectors, such as AspNet-Menu-SelectedWithChildren:focus as well as AspNet-Menu-SelectedWithChildren:not(> AspNet-Menu-Selected-Leaf) but they didn't work (yeah, the syntacx rules out the second idea there, but I gave it try anyway :) ).

Any clever ideas of how to recognize when the parent is actually selected?

12/10/2009 1:14:43 PM

Joe Davis

Total Posts 2253

View Posts

Re: Vertical menu with non-collapsing child nodes

Hi Evan,

I think I have figured out a solution for you. I used the jQuery parent and parents traversing methods to get it done.

Copy this to your layout.master after the <asp:ScriptManager .../>

<script defer="defer" type="text/javascript">
    $(document).ready(function(){
     $("a.AspNet-Menu-SelectedLeaf").parents(".AspNet-Menu-SelectedWithChildren").children("a.AspNet-Menu-SelectedWithChildren").addClass("ChildSelected");
     $("a.AspNet-Menu-SelectedWithChildren").parent().parents(".AspNet-Menu-SelectedWithChildren").children("a.AspNet-Menu-SelectedWithChildren").addClass("ChildSelected");
     $("a.AspNet-Menu-SelectedLeaf").parent().parents(".AspNet-Menu-SelectedWithChildren").children("a.AspNet-Menu-SelectedWithChildren").addClass("ChildSelected");
    });
   </script>

Next, copy this to your stylemenu.css file at the bottom

a.ChildSelected,a.AspNet-Menu-ChildSelected{
background: transparent !important;
font-weight:normal !important;
}

The menu system is a little funny in that it does generate an .AspNet-Menu-ChildSelected class for second-level menu items that have children. I am not sure why it doesn't generate that class for all menu items with children.

This will work for up to 4 levels of vertically listed pages.

HTH,
Joe D.

12/12/2009 1:25:42 AM

Evan

Total Posts 4

View Posts

Re: Vertical menu with non-collapsing child nodes

Joe, you must enjoy being the hero. :)

Using the selectors for those classes I can now enable and disable properties to visually "deselect" the ancestors of a selected leaf.

I'll post a nice vertical menu once I finish it up.

Thanks very much,

-Evan

2/18/2010 4:42:42 AM

Slaven Brumec

Total Posts 55

View Posts

Re: Vertical menu with non-collapsing child nodes

Hi!

Sorry for bringing back this old discussion to life, but Joe D. really is the hero!

I've been trying for some time to make PageMenu as ordinary vertical menu, NOT a treeview (to be used with standard horizontal top-level-only SiteMenu).

Almost lost hope 'till finding this thread, but now it works! I suggest putting that Joe D's advice here into skinning documentation.

2/18/2010 12:54:49 PM

Joe Davis

Total Posts 2253

View Posts

Re: Vertical menu with non-collapsing child nodes

Hi,

Thank you for the kind words. I am glad you were able to use this solution.

I have write access to the documentation so I will get this put in the docs as soon as I can.

Thanks,
Joe D.

2/18/2010 1:02:00 PM

Wei Li

Total Posts 125

View Posts

Re: Vertical menu with non-collapsing child nodes

I am really interested in this topic. Can you put a link so I can take a look of the finished vertical menu?

Thanks

2/18/2010 1:06:31 PM

Joe Davis

Total Posts 2253

View Posts

Re: Vertical menu with non-collapsing child nodes

The i7MEDIA website uses a menu that is very similar to this. You can check out this link for an actual representation: http://i7media.net/reseller-hosting-linux.

Notice that Linux is high-lighted but Reseller Hosting is not.

Thanks,
Joe D.

2/19/2010 1:22:13 AM

Slaven Brumec

Total Posts 55

View Posts

Re: Vertical menu with non-collapsing child nodes

I am really interested in this topic. Can you put a link so I can take a look of the finished vertical menu?

Well, my mojoPortal solution is an intranet site without public access, at least for now. However, I'll take a time soon to update my home pages with such menu and then I'll send you the link.