做一个响应式的Javascript水平导航，中间有Logo

Make a Responsive Javascript Horizontal Navigation with Logo in Center

本文关键字：导航 水平 Javascript 中间 Logo 响应 一个      更新时间：2023-09-26

我在这个网站上发现了一个问题/帖子，在第一次看它的时候效果很好，直到我需要它做更多的事情，我已经玩了它，还没有找到一个解决方案，让它做我需要它做的事情。

我正在为客户建立一个网站，所以我需要它很容易操作，如果客户想要改变事情的实际顺序，所以在主题的后端建立一个ul/li列表不是一个选项，除非有一个简单的方法让我修改函数。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

在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++;
                });
            });
    }

更好:使用CSS和2个徽标。

第一个标志被隐藏为媒体宽度> 999px，第二个标志被隐藏为媒体<= 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; }
}

EDIT: JQuery:jQuery(文档)时函数(){# menu-primary-items jQuery("ul");("李:包含(‘回家’)")hide ();//在导航栏中隐藏home 

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

这样做可以吗?

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

另一种方法是将元素抛出DOM。你可以用jQuery实现:

if((window).width() <= sizeYouWant){
   $('.logo').insertBefore('#FirstElement');
}
相关文章：