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

【问题标题】：jquery mmenu- Can't display navbar in cellphonejquery mmenu-无法在手机中显示导航栏
【发布时间】：2016-04-22 02:17:18
【问题描述】：

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

.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 的链接。

提前致谢

【问题讨论】：

标签： css mmenu

【解决方案1】：

我不能完全得到相同的结果，但这里有一些修复可以帮助

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

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

这些更新应该为移动 320 像素宽度视图修复它。

干杯

【讨论】：

我将这些更改放入媒体查询中，但它还不能正常工作。发生了微妙的变化。我在菜单和地图之间看到了一个白色矩形。比以前更薄了..但仍然存在。徽标与任何值的汉堡包图标重叠。 80、100 等。Somethingg 有所改进：我可以看到底部的导航栏 :) 请问你得到了什么结果？无论如何感谢您的帮助！
徽标重叠已通过 transform: translateX(50%) 解决，其余部分我仍在苦苦挣扎。在这些更改之后，桌面滑动菜单过渡并不柔和。

【解决方案2】：

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

【讨论】：