Dropdown On Hover For Bootstrap Navbar

Yii 1.1 Tips, Snippets and Tutorials
1

I was looking for a solution that the items of a bootstrap navbar will dropdown on mouse over.

And the items that opens a submenu should work onClick if the url is not ‘#’.

I have found a lot of discussion/snippets, but only a few worked for me.

The quintessence - maybe it’s useful for one of you:





    /**

     * A script that modifies bootstrap navbar to dropdown on mouse over.

     * And a parent of a submenu will be responsive to onClick if the assigned url is not '#'.

     */

    public static function registerDropDownOnHoverScript($slideDown=300,$slideUp=200,$position=CClientScript::POS_READY)

    {

        $script = <<<EOP

                $('.navbar li.dropdown').hover(

                     function() { $(this).find('.dropdown-menu').first().stop(true, true).slideDown($slideDown); },

                     function() { $(this).find('.dropdown-menu').first().stop(true, true).slideUp($slideUp); }

                     );

                $('.navbar li.dropdown > a').click(function(){ if(this.href) location.href = this.href; });

                $('.navbar li.dropdown-submenu > a').click(function(){ if(this.href) location.href = this.href; });

EOP;


        $css = '.dropdown-menu{margin: 0 2px 0 0;}'; //correction of the bottom margin


        Yii::app()->getClientScript()->registerScript('hover_navbartop',$script,$position);

        Yii::app()->getClientScript()->registerCss('hover_navbartop_css',$css);

    }