We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 17412
    • 270 Posts
    Hi guys. I've made a start with re-constructing the Goldman Sachs mega menu ( http://www.goldmansachs.com/ ). I've taken it about as far as I can alone.



    Files attached to this post. ( including Wayfinder config, javascript and css - jQuery also required )

    Anyone care to take this further?
      • 30672
      • 180 Posts
      hi lokust !
      i will install it for a site, and tell you what we can do together ! thanks !
        • 30672
        • 180 Posts
        And do you have a live example?
        How is your wayfinder call ?
          • 17412
          • 270 Posts
          I'm attaching a set of working files for anyone interested in implementing this.
            • 30672
            • 180 Posts
            thanks lokust!

            i just tried it but with no result...

            here is my code, do you see something wrong ?

            <!DOCTYPE html>
            <head>
              
            <link rel="stylesheet" href="assets/templates/main/menu/kuro.menu.css">
            <script src=" assets/templates/main/menu/jquery.js"></script>
            <script src="assets/templates/main/menu/kuro.menu.js"></script>
            
            
            </head>
            
            <body>
            
            [[!Wayfinder? &config=`kuro`]]
            
              
            <script type="text/javascript">
            $(document).ready(function() {
                function megaHoverOver(){
                    $(this).find(".sub").stop().fadeTo('fast', 1).show();          
                    //Calculate width of all ul's
                    (function($) {
                        jQuery.fn.calcSubWidth = function() {
                            rowWidth = 0;
                            noColumns = 3;
                            //Calculate row
                            $(this).find("ul").each(function() {   
                                maxWidth = ($(this).width() * noColumns);           
                                rowWidth += $(this).width();
                                                  if(rowWidth > maxWidth) {
                                                 rowWidth = maxWidth;
                                                 }
                            });   
                        };
                    })(jQuery);       
                    if ( $(this).find(".row").length > 0 ) { //If row exists...
                        var biggestRow = 0;   
                        //Calculate each row
                        $(this).find(".row").each(function() {                              
                            $(this).calcSubWidth();
                            //Find biggest row
                            if(rowWidth > biggestRow) {
                                biggestRow = rowWidth;
                            }
                        });
                        //Set width
                        $(this).find(".sub").css({'width' :biggestRow});
                        $(this).find(".row:last").css({'margin':'0'});         
                    } else { //If row does not exist...        
                        $(this).calcSubWidth();
                        //Set Width
                        $(this).find(".sub").css({'width' : rowWidth});    
                    }
                }
              
                function megaHoverOut(){
                  $(this).find(".sub").stop().fadeTo('fast', 0, function() {
                      $(this).hide();
                  });
                }
                var config = {   
                     sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)   
                     interval: 100, // number = milliseconds for onMouseOver polling interval   
                     over: megaHoverOver, // function = onMouseOver callback (REQUIRED)   
                     timeout: 600, // number = milliseconds delay before onMouseOut   
                     out: megaHoverOut // function = onMouseOut callback (REQUIRED)   
                };
                $("ul#topnav li .sub").css({'opacity':'0'});
                $("ul#topnav li").hoverIntent(config);
            });
            
            </script>
            
            </body> 
            </html>


            thanks !
            i'm using jquery 1.7.2 [ed. note: troubadour last edited this post 14 years, 5 months ago.]
              • 30672
              • 180 Posts
              and i also adapted the kuro.config.php for Revo:

              <?php
              $startId = 0;
              $level = 4;
              $selfClass = '';
              $firstClass = '';
              $hereClass = 'current';
              $lastClass = 'last';
              $parentClass = 'parent';
              
              $outerTpl = '@CODE:<ul class="kuro-menu[[+wf.classnames]]">[[+wf.wrapper]]</ul>';
              
              $innerTpl = '@CODE:<ul[[+wf.classes]]>[[+wf.wrapper]]</ul>';
              
              $rowTpl = '@CODE:<li[[+wf.id]][[+wf.classes]]><a href="[[+wf.link]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>';
              
              $innerRowTpl = '@CODE:<li[[+wf.id]][[+wf.classes]]><a href="[[+wf.link]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]<div class="pullquote"><h2>[[+wf.linktext]]</h2><p>[[+wf.title]]</p></div></li>';
              
              ?>
                • 30672
                • 180 Posts
                ho,

                i changed the wayfinder call to this (but let also startid in config.kuro.php)

                [[!Wayfinder? &startId=`0` &config=`kuro`]]




                and it's now working !

                don't know why?
                thanks a lot Lokust !
                  • 17412
                  • 270 Posts
                  Glad to hear it wink
                    • 30672
                    • 180 Posts
                    Hi Lokust !

                    i figured many things for my application, changed some position:absolute to relative. Works fine.

                    one thing that i would like to know is how i can do to only have the pullquote for the second level items.
                    I don't like the pullquote for the third level items.

                    is that possible ?

                    thanks !
                      • 45769
                      • 2 Posts
                      Could any one please attach the complete code for this mega men(with working HTML markup), i need this for my project.

                      I would really appreciate if any help .