Question

我正在使用mmenu，但我无法在手机上正常使用它。虽然它在横向模式下显示得很好，但如果我出现一个白色条带，它就不会渲染底部导航栏的一部分。但是，如果我在有图标的地方点击白色矩形，它会正确响应菜单，就好像它们被看到一样。顶部导航栏正确显示。如果我将两个导航栏放在最顶部位置，它们也可以正确显示。但我喜欢在底部有一个。

.mm-menu {  
  width: 77% !important;  
  background: #0A7A26 !important;   

}

html.mm-opening .mm-slideout {
  -webkit-transform: translate(82%, 0) ;
  -moz-transform: translate(82%, 0) ;
  -ms-transform: translate(82%, 0) ;
  -o-transform: translate(82%, 0) ;
  transform: translate(82%, 0) }

@media all and (max-width: 175px) {

  html.mm-opening .mm-slideout {
    -webkit-transform: translate(120x, 0) ;
    -moz-transform: translate(120px, 0) ;
    -ms-transform: translate(120px, 0) ;
    -o-transform: translate(120px, 0) ;
    transform: translate(120px, 0) } 
   }


@media all and (min-width: 550px) {

  html.mm-opening .mm-slideout {
    -webkit-transform: translate(500px, 0);
    -moz-transform: translate(500px, 0) ;
    -ms-transform: translate(500px, 0) ;
    -o-transform: translate(500px, 0) ;
    transform: translate(500px, 0)}
}  


.header{  /* antes tb iba en #page */
    background: #056E20 !important;
    position: relative;
    //z-index: 15;
}

menu =  $('nav#menu').mmenu(

                {   
                    navbars     : [{
                        position: "top",    
                        height  : 1,
                        content : [ 

                            '<a class="fa fa-info-circle fa-2x"></a>'

                        ]
                    },
                    {
                        position: "bottom"
                        content: [                              
                            '<a href="mailto:bicimapuy@gmail.com" class="fa fa-envelope"></a>',                         
                            '<a class="fa fa-twitter"></a>',                            
                            '<a href="https://www.facebook.com/" target="_blank"class="fa fa-facebook"></a>'
                        ]
                    }
                    ],                  
                    extensions: ["multiline"],  
                     onClick: {
                        close: false
                     },
                    navbar:{
                        title: "Inicio"                     
                    },
                    /* offCanvas: {
                          zposition : "next"
                    }, */
                    clone: true

            });

如果我将第二个导航栏放在顶部，我可以看到它，而不是在底部。

指向网站bicimapuy.herokuapp.com的链接。

提前致谢

Answer 1

我无法得到相同的结果，但这里有一些帮助

的修复

.logo10向左更改：为80px而不是-80px

.mm-menu将min-width更改为256px

这些更新应修复移动320px宽度视图。

干杯

Answer 2

似乎通过改变mmenu大小解决了问题。但是，我想了解它的工作方式。如何根据宽度/高度的关系得到正确的最小值？谢谢！

jquery mmenu-无法在手机中显示导航栏

2 个答案: