使用Center中的徽標制作響應式Javascript水平導航

Question

我在此站點上發現了一個問題/帖子 ，在第一次查看它時效果很好，直到我需要它做更多的事情為止，而且我已經玩過它並且還沒有找到解決方案，無法讓它去做我需要做的事情做。

我正在為客戶建立一個站點，因此我需要它易於操作（如果客戶想更改事物的實際順序），因此無法在主題的后端建立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個徽標。

對於寬度大於999像素的媒體，隱藏1個徽標；對於寬度小於等於999像素的媒體，隱藏第二個徽標。

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