Question

我在这个网站上找到了一个question/post，在我第一次看到它之前效果很好，直到我需要它做更多的事情，而且我已经玩了它并且还没有找到一个解决方案来实现它我需要它做什么。

我正在为客户建立一个网站，所以如果客户想改变事物的实际顺序，我需要它很容易操作，所以在主题的后端建立一个ul / li列表是除非有一个简单的方法来修改functions.php并更改菜单选项卡的设置方式，否则不是一个选项。

这是我的javascript编码，菜单是一个实际的wordpress菜单。

jQuery(document).ready(function() {
    jQuery("ul#menu-primary-items").find("li:contains('Home')").hide(); // hides home from navigation
    var position = jQuery("ul#menu-primary-items li").length-1;
    var i = 0;

    jQuery('ul#menu-primary-items li').each(function() {
        if(i == position/2) {
            jQuery(this).after('the img src code is in here');
        }

        i++;
    });
});

在整页宽度上我需要它看起来像

Link | Link | Link | LOGO IMG | Link | Link |Link

在媒体宽度上（主题@media max-width是999px）我需要它是一个带有

的下拉式wordpress框

LOGO IMG
WP "MENU" button
Link
Link
Link
Link
Link
Link

而不是如上所示，它显示为

WP "MENU" button
Link
Link
Link
LOGO IMG
Link
Link
Link

Answer 1

检查JQuery代码中的媒体，设置LOGO位置：

jQuery(document).ready(function() {
    jQuery("ul#menu-primary-items").find("li:contains('Home')").hide(); // hides home from navigation
    var position = jQuery("ul#menu-primary-items li").length-1;
    var i = 0;

/* check media here */
var isMedia999=false;
isMedia999 = (window.width() < 1000); //true if max width is <=999px
/* chek is done */

if( ! isMedia999)
    jQuery('ul#menu-primary-items li').each(function() {
        if(i == position/2) {
            jQuery(this).after('the img src code is in here');
        }
        i++;
    });

else jQuery('ul#menu-primary-items li').each(function() {
        if(i == 0) { // <== first position if max width 999px
            jQuery(this).after('the img src code is in here');
        }
        i++;
    });
});

当然这不会实现。刷新调整大小，所以你可以这样做：

 jQuery(document).ready(function() {
         myfunc();
         windows.resize(myfunc());           

    });

    function myfunc(){
 jQuery("ul#menu-primary-items").find("li:contains('Home')").hide(); 

                var position = jQuery("ul#menu-primary-items li").length-1;
                var i = 0;

            /* check media here */
            var isMedia999=false;
            isMedia999 = (window.width() < 1000); //true if max width is <=999px
            /* chek is done */

            if( ! isMedia999)
                jQuery('ul#menu-primary-items li').each(function() {
                    if(i == position/2) {
                        jQuery(this).after('the img src code is in here');
                    }
                    i++;
                });

            else jQuery('ul#menu-primary-items li').each(function() {
                    if(i == 0) { // <== first position if max width 999px
                        jQuery(this).after('the img src code is in here');
                    }
                    i++;
                });
            });
    }

Answer 2

相当好：使用CSS和2个徽标。

为媒体宽度隐藏1个徽标＆gt; 999px，第二个隐藏为媒体＆lt; = 999px宽度。

@media max-width is 999px {
 .logo#wide { display:none; }
 .logo#tiny { display:inline; }
}
@media min-width is 1000px {
 .logo#wide { display:inline; }
 .logo#tiny { display:none; }
}

编辑：JQuery： jQuery（document）.ready（function（）{ 。jQuery的（＆＃34; UL＃菜单主项目＆＃34;）找到（＆＃34;李：包含（＆＃39;首页＆＃39;）＆＃34;）隐藏（）; //从导航中隐藏

 var position = jQuery("ul#menu-primary-items li").length-1;
    var i = 0;

    jQuery('ul#menu-primary-items li').each(function() {
        if(i ==  0) {
           //put logo tiny here for media maxwidth 999px
        }
        if(i == position/2) {
          //  put logo wide here for media minwidth 1000px
        }

        i++;
    });
});

Answer 3

这样的事情能起作用吗？

@media(max-width:whateveryouwant px)
{
   .logo{
   float:right;
   }
}

另一种方法是移动元素抛出DOM。你可以用jQuery来实现这个目的：

if((window).width() <= sizeYouWant){
   $('.logo').insertBefore('#FirstElement');
}

使用徽标在中心进行响应式Javascript水平导航

3 个答案: