20 Replies Latest reply on Nov 19, 2014 6:10 AM by Dennis Pearce

    Can you create fly-out menus in an HTML widget?

    Ted Hopton

      I've found some tips about modifying the nav bar and I found one discussion about creating a drop-down menu using HTML in an HTML widget (but problems encountered were never resolved). What I'd like to create is a way to add localized navigation to any place overview page by dropping an HTML widget on it. If this widget were designed to capture attention in a consistent way, then people coming to any place in our Jive community would learn to use it for secondary and tertiary navigation from that place, and that could go a long way toward helping them find what they need.

       

      any ideas?

        • Re: Can you create fly-out menus in an HTML widget?

          Ted,

          Why not create an app that provides an action link on the group page? The app can then open up a dialog with any navigation you want in it.

          • Re: Can you create fly-out menus in an HTML widget?
            Dennis Pearce

            This doesn't specifically answer your fly-out question Ted, but if you just want a standard menu one low-budget technique many of our space owners use is to create the menu in a Jive document as a set of images with links.  Then display it on the overview page using a View Document widget.  If you don't have so many choices that you need a fly-out, it has a couple of nice advantages.  One is that you can give people edit rights to modify the document without having to give them admin rights to the space.  The second is that if you want to deploy this as a consistent menu across multiple subspaces, you only have one source when you need to make changes rather than having to go to every space where it exists.  The example below is one of these -- it's taken from our North America Sales space for industry teams.

             

            Capture.JPG.jpg

            1 person found this helpful
            • Re: Can you create fly-out menus in an HTML widget?
              deesteel

              One thing you can do is create two HTML widgets. I haven't tried this, but in theory it should work.

               

              The first widget near the top of the page where you want your navigiation to be, with a div in it.

               

              The other at the bottom of the page with your javascript for the drop down menus. Within that javascript you create all the HTML, css, and javascript you need for the drop down menu, and then just put the results into the top div via the parent. Javascript syntax. The javascript will be rendered in an iframe, but the top div will not and should be able to act normally on the page.

               

              Hope that helps

              1 person found this helpful
                • Re: Can you create fly-out menus in an HTML widget?
                  Ryan Rutan

                  Dave'a solution will be the best solution, IMO.  As a twist, you could use Jquery to load the contents of a specific document that has links listed in it, broken up into sections with a marker for each section. 

                   

                  When you deploy the HTML widget, simply put an id on the div, ie ABC, and pass that to your JavaScript.  Your JS can call the /contents API service to get the contents for your nav document, and scan it for the code ABC.  When found it will, render all links found in that section.

                   

                  rollout would be a single HTML widget with your JS and CSS managed files (it doesn't hVe to have any visible elements and can be out of site at the bottom of a page). For global things like this, I usualily put them on the overview page...but you can also do it in a secret group if you'd like.  the managed files on the widget are not protected in the same way content is inaide the group.

                   

                  from there, subsequent groups where you want this nav would be a single HTML widget where you have your div with its id marker, and references to your managed files (JS/CSS)

                   

                  does that help?

                  1 person found this helpful
                    • Re: Can you create fly-out menus in an HTML widget?
                      Ted Hopton

                      Much of that went over my head, Ryan... but I'll share it with folks who hopefully can interpret it for me. Thanks for all the details!

                       

                      We already have deployed a version of Dave's solution on our site's Overview page, thanks to generous sharing of code by our friends at Lexmark, ( Dennis Pearce introduced us to the talented Creighton Medley). It's a simple list of links, however, not anything that moves or flies out when you hover over it. That was what gave me the idea to try to do something more eye-catching. We already have loads of text and links on our overview pages. If something popped out when you hovered over it or clicked on it, that might help people to notice it.

                       

                      I really like the idea of displaying the contents of a document, as that would be a huge win in terms of maintaining the links. That's a great suggestion.

                       

                      But the key idea, at least in my initial thinking about it, was that each group or space could have navigation tailored to the needs of the people who land there. So it would not be the same set of navigation links in every place.

                  • Re: Can you create fly-out menus in an HTML widget?
                    it2000

                    "people coming to any place in our Jive community would learn to use it for secondary and tertiary navigation from that place, and that could go a long way toward helping them find what they need."

                    Hopefully search does help then to find what they need.

                     

                    Ryan Rutan is it possible to modify the page footer template in the could? Adding a javascript there should affect all pages and the script can add divs and content anywhere on the page. It can also check whether it is loaded by an overview page (<li id="jive-place-link-overview-tab" class="j-tab-selected active j-ui-elem">).

                      • Re: Can you create fly-out menus in an HTML widget?
                        Ryan Rutan

                        I know you can add custom HTML to the footer (using the Theme Editor)...so assuming this can be done, but haven't done it 1st hand to see where and how JS impacts this.

                          • Re: Can you create fly-out menus in an HTML widget?
                            Ryan Rutan

                            Here's an example to round out this thread that shows how you can use the Core REST API

                            var navLinks = {};

                            navLinks.load = function(section) {

                            var documentID=1234;

                              $.ajax({

                                    type: "GET",

                                    url: "/api/core/v3/contents?filter=entityDescriptor(102,documentID)

                                    dataType: "text"

                                }).success(function(data) {

                                    //NOTE:  substring needed to parse exception headers out for easy JSON parsing

                                    navLinks.show(JSON.parse(data.substring(data.indexOf("{"))),section);

                                });

                            }; // end function

                             

                            navLinks.show = function (data,section) {

                              //*** THIS jQUERY SELECTOR ASSUMES YOU ARE USING A <ul id="sectioncode"> WITH CHILDREN <LI> tags containing <A> ***

                              //**** YOU CAN STORE LINKS ANY WAY YOU CAN IN THE DOCUMENT

                              $(data.list[0].content.text).find("#"+section+" li a").each(function() {

                                  // DO WHATEVER WITH EACH LINK TO RENDER IN NAV

                                  alert(this.html());

                              });

                            }; // end function


                            Hope this helps someone =)

                            1 person found this helpful