Sitefinity 5.0 Vertical Navigation With Drop Down?

Posted by Community Admin on 03-Aug-2018 16:07

Sitefinity 5.0 Vertical Navigation With Drop Down?

All Replies

Posted by Community Admin on 22-May-2012 00:00

First off, I'd like to note that I'm very new to Sitefinity but so far, I absolutely love it. Alright, so what I want is very, very easy...but it seems to be damn near impossible with this, which is leaving me a little disheartened. All I want, is a vertical navigation menu, that shows children on mouse over. I know there's the vertical menu with drop down, why isn't there a vertical? This makes really no sense to me.  I've tried doing 'Clean Navigation' but that proved to be next to useless, or maybe I'm not looking in the right places? Either way, if someone could point me to the right resources to make this happen, I would be very, very grateful :)

Also; Hi! My name's James.

Thanks everyone! Attached is a screenshot of what I want to happen.

Posted by Community Admin on 22-May-2012 00:00

I find it really hard to believe that such a powerful CMS is limited by something so silly. I've tried the methods in this post: http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/simple-sub-menu.aspx

But it didn't work, I've also tried CleanNav as I previously stated, but to no avail. All I need is a vertical menu with rollovers or 'drop downs'.

Posted by Community Admin on 22-May-2012 00:00

It appears you are right...

You might just have to make a quick new control with a RadMenu on it, and bind it to a SitefinitySiteMapDataSource object

Boyan has a sample here (about 5 posts from the top)....3 lines of code in the markup, no codebehind...not that bad :)

So you want to use the RadMenu and set the Flow to Vertical.



Posted by Community Admin on 22-May-2012 00:00

Thanks for the response Steve.

I still think it's silly that a PAID CMS doesn't give you the ability to do this naturally. I was talking with one of my coworkers, he said that the functionality of this 'Vertical Nav with Roll Over' was in V3 of Sitefinity...any idea why the removed it? This is becoming quite a headache for something so trivial.

I won't get a chance to try the method in the post that you had pointed me to until tomorrow, but at a quick glance it LOOKS promising, but I'm not sure if you can apply the same styles to a 'file menu' that you would anything else...

Posted by Community Admin on 22-May-2012 00:00

Here's the kicker :) ...what you want is a RadMenu with vertical orientation

...one of the render modes of the control (default?) is a RadMenu with horizontal orientation.  There's just no way to change it in the UI that I can see! :)

So yes, pain in the ass, perhaps put in a feature request to enhance the current menu or add a new "type" or something...There's a bunch of these small feature request enhancements they need to start plugging away at IMO.

Posted by Community Admin on 22-May-2012 00:00

@Steve

I'm pretty sure that if you are prepared to specify your own template, then you can pretty much change whatever you like, although as you said, a PITA for simple things like this.

Posted by Community Admin on 22-May-2012 00:00

Not only is it a PITA, you lose all design-time editing support, and risk exposing yourself to bugs on new releases.

@MB I'm not talking own template though, I'm talking separate control with a RadMenu and a SitefinitySiteMap control.  However yeah, go crazy and tweak the crap out of it if you want to do something custom at this point.

If you can avoid it, NEVER map external templates.  If they add something new to that template, or change the id of one of the required controls your page crashes.

I await the day where everything I want to do is UI driven :)

Posted by Community Admin on 22-May-2012 00:00

Yeah, it's a bit of a hassle, although in this particular case, I think you are more overriding than remapping.

If you use the standard navigation control and select a horizontal+dropdowns... and then specify a Custom Template Path, in the Design Settings... you effectively get to override the default behaviour with whatever your heart desires.

e.g. I *think* that this should be enough to change the default horizontal menu to a vertical layout.

<%@ Control Language="C#" %>
  
<%@ Register tagprefix="sf" namespace="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMapNavigations" assembly="Telerik.Sitefinity" %>
  
<sf:SiteMapNavigationMenu id="SiteMapNavigationMenu1" runat="server" flow="Vertical" />

Posted by Community Admin on 22-May-2012 00:00

Oh you know what, you're right!  It inherits from the RadMenu, I didn't even see that.  I assumed it was created internally in the control.

Nice catch :)  That should in theory work fine....still don't like templates (been burned more times than I can count)

@telerik, this needs to be removed from the default template

<script type="text/javascript">
     
 
    function radMenuOnClick(sender, args)
 
        var state = args.get_item().get_attributes().getAttribute("ExpandOnClick");
        args.get_item().get_attributes().setAttribute("ExpandOnClick", "true")
        args.get_item().open();
    
 
    function radMenuOnOpening(sender, args)
        var state = args.get_item().get_attributes().getAttribute("ExpandOnClick");
        if(state != "true")
            args.set_cancel(true);
        args.get_item().get_attributes().setAttribute("ExpandOnClick", "false")
    
</script>

Please don't give me inline scripts.

Posted by Community Admin on 23-May-2012 00:00

@Steve " I await the day where everything I want to do is UI driven :) "

I think I sense a bit of sarcasm here? :P

@MB

"If you use the standard navigation control and select a horizontal+dropdowns... and then specify a Custom Template Path, in the Design Settings... "

Am I downloading RadMenu, uploading it and specifying THAT file as a template file? 

Also, which file would I want to edit the following code in? As I said before I'm a complete sitefinity noob, and the site we are working off of is live save for my test page. I don't want to
break anything, better safe than sorry :)

PS: Thanks for all the information guys, I'm glad the forum is so responsive.
<%@ Control Language="C#" %>
  
<%@ Register tagprefix="sf" namespace="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMapNavigations" assembly="Telerik.Sitefinity" %>
  
<sf:SiteMapNavigationMenu id="SiteMapNavigationMenu1" runat="server" flow="Vertical" />

Posted by Community Admin on 23-May-2012 00:00

@James
  You just want to make a .ascx file somewhere on your webroot with that code, then specify the templatepath.  Doesn't need an ascx.cs...no code behind, just a .ascx file which contains the template markup.

Try this blog post

Posted by Community Admin on 23-May-2012 00:00

SHE LIVES! 

Thank you all very much for your help, hopefully this post serves as both good instructions for other users, and as a lesson to Telerik...this shouldn't have been such an ordeal to accomplish something so basic. If Telerik can get their act together, I just may recommend this to a few other clients that I know of. For now though, I am at ease. Thanks for all the help guys! :)

Posted by Community Admin on 23-May-2012 00:00

Dear James
A simple vertical navigation option with flyout has been on my wish list since. I have been using RadMenuControls for some time now. This post might give you an idea
http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/submenu-navigation-2-levels.aspx look for Oct. 13. 2011 and the attached screenshots.

Markus 

Posted by Community Admin on 23-May-2012 00:00

@Markus

As per above, you don't need to mess about with RadMenuControls for fairly straight-forward mods to the standard Sitefinity Navigation controls. As per this example, you just create a simple template to provide your changes, and supply the custom template path in the Design Settings option, using the standard Navigation Control's designer. You can also go further if needs be, and add code-behind to subscribe to events etc... I use this approach to build mega-template menus.

This thread is closed