通过编辑CSS强制WordPress中的浮动菜单保持打开状态

时间:2016-06-16 08:44:28

标签: css wordpress menu floating

我安装了Codeflavors浮动菜单并安装了它。问题是它保持“关闭”(看起来像一个小黑箭头),直到你用鼠标悬停它。我希望它保持开放并始终显示第一层链接。如果你愿意,你可以在vitasino.com看到它,左侧的小黑箭头。

编辑:收到有关jquery的评论后,以下是cfm_menu.js中的信息:

/**
 * @author: CodeFlavors [www.codeflavors.com]
 * @version: 1.0.1
 * @framework: jQuery
 */

(function($){

    $(document).ready(function(){

        if (typeof CFM_MENU_PARAMS == 'undefined') {
            if( typeof console !== 'undefined' ){
                console.log( 'CodeFlavors floating menu warning: Floating menu params not defined. Script stopped.' );
            }
            return;
        }

        var menu = $('#cfn_floating_menu').find('ul').first(),
            items = menu.children('li'),
            options = $.parseJSON(CFM_MENU_PARAMS);

        $('#cfn_floating_menu').css({'top':options.top_distance});

        if( 1 == options.animate ){
            $(window).scroll(function(e){
                var st = $(window).scrollTop();
                if( st > options.top_distance + 20 ){
                    $('#cfn_floating_menu').animate({'top':st+options.top_distance},{'queue':false, 'duration':500});
                }else{
                    $('#cfn_floating_menu').animate({'top':options.top_distance},{'queue':false, 'duration':500});  
                }
            });     
        }

        // show submenus
        $(menu).find('li').mouseenter(function(){
            $(this).children('ul').show(100);           
        }).mouseleave(function(){
            $(this).children('ul').hide(200);
        }).each( function(i, e){
            // for menus having children, add class has-children
            var submenu = $(e).children('ul.sub-menu');
            if( submenu.length > 0 ){
                $(this).addClass('has-children');
            }
        });



        // highlight current item from menu
        $(menu).find('li.current-menu-item').children('a').addClass('currentItem');

        // if first item is the trigger, show the menu only when hovering that item
        if( $(items[0]).attr('id') == 'cfm_menu_title_li' ){            
            var main = items.splice(0,1),
                menuWidth = menu.width();
            $(main).find('a').click(function(e){
                e.preventDefault();
            })

            $(items).hide();

            $(menu).mouseenter(function(){
                $(items).show(100);
                $(main).animate({'width':menuWidth}, 100).removeClass('closed');
                $(menu).css('width', menuWidth);
            }).mouseleave(function(){
                $(items).hide(200);
                $(main).css('width', 'auto').addClass('closed');
                $(menu).css('width', 'auto');
            })          
        }
    })
})(jQuery);

这就是deisgn文档的样子,我应该改变什么?

1/**
2 * MENU DESIGN - do all design changes below
3 */
4 
5/**
6 * Menu container
7 */    
8#cfn_floating_menu ul{
9    -moz-box-shadow:2px 2px 2px #CCC;
10    -webkit-box-shadow:2px 2px 2px #CCC;
11     box-shadow:2px -1px 4px #CCC;
12}
13    /**
14     * Menu anchor container
15     */
16    #cfn_floating_menu ul li{
17        font-size:12px;
18        border-bottom:1px #2B2B2B solid;
19    }
20        /**
21         * Menu anchor
22         */
23        #cfn_floating_menu ul li a{
24            background:#000;
25            color:#FFF;
26            text-decoration:none;
27        }
28        /**
29         * Hovered and active anchor design
30         */
31        #cfn_floating_menu ul li a:HOVER,
32        #cfn_floating_menu ul li a.currentItem{
33            color:#FFF;
34            background:#999;                   
35   }

2 个答案:

答案 0 :(得分:0)

尝试使用

display:block !important;

其中一个" #cfn_floating_menu ul li a {}"或" #cfn_floating_menu ul li {}"

完成编辑后

删除css

答案 1 :(得分:0)

简单的Bro,从外观中选择CodeFlavors浮动菜单。 会有选项“菜单动画” 选择菜单动画:修复无动画。 并完成