制作一个带有中心标志的响应式 Javascript 水平导航

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 个徽标对于媒体宽度 > 999 像素隐藏，第 2 个对于媒体

@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(文档).ready(函数() { jQuery("ul#menu-primary-items").find("li:contains('Home')").hide(); // 从导航中隐藏主页

 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');
}