Responsive navigation using SiteFinity OOTB functionality - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Responsive navigation using SiteFinity OOTB functionality

  • Responsive navigation using SiteFinity OOTB functionality
  • Thanks for your time.

    I'm using SiteFinity 5.2 and the OOTB RadMenu to display a very typical horizontal rollout DHTML navigation menu that is three layers deep.

    I am trying to think of a way to preserve this menu on desktop browsers but when resized smaller have the CSS respond with a scaled-back, display appropriate rendered version of the navigation that includes only the 0-level menu and omits all the children.

    My constraints are the following:

    1.) I don't want to build a completely different version of the site for this, I am looking for a responsive solution I can test in real time without a page reload
    2.) I would prefer not to have duplicate the navigation (once for desktop+ sizes, then again with a simpler version for everything < desktop size) and control their visibility with media queries because that sounds inefficient.

     If possible I want to avoid coding customization because (A.) I'm a CMS user, not a bona fide developer and (B.) future SiteFinity upgrades may affect those customizations (what little ASP.NET work I've been involved has always had that customize->update version->regress->start over motif.)

    To provide an example, Twitter Bootstrap's responsive CSS takes their horizontal nav LI-based menu and stuffs it away for toggle show/hide as block level nav items. This pattern provides a simple solution for me to model my navigation on, I just don't know to pull it off with SiteFinity's nested RadMenu.

    Any suggestions are very much appreciated!
  • I'd be interested to find a solution for this as well - looking at rebuilding one of the sites I look after to allow for complete responsive design as we have found more and more people are using mobile devices to access our site.