Question

我试图调整css分辨率为603x966（即Nexus 7）的平板电脑，在横向模式下导航菜单进入这种荒谬的模式＆＃34;更多导航选项＆＃34; （不是我写的，我无法找到解决它的问题）。它应该进入移动菜单，或者，因为屏幕仍然足够宽，导航栏应该仍然适合。请参阅下面的模拟。

MobileTest.me

您必须点击左上方的选项并将方向设置为横向，才能看到我正在谈论的内容。在肖像中，页面看起来很好，它的景观效果不佳。（尽管对ipad很有用）

这是＆＃34;更多导航选项的HTML＆＃34; （如果我删除，导航就不见了）：

<a id="responsive-nav" class="showMenu" href="#" title="Navigation Menu">more navigational options</a>

Responsive-nav是我找不到的，这是ShowMenu CSS代码：

.showMenu {
        display: block;
        background: url(http://convio.cancer.ca/mResponsive/images/icons/BT_menu_64.png) no-repeat center;
        background-size: 48px 48px;
        height: 80px;
        right: 0;
        top: 0;
        text-indent: -999999px;
        font-size: 0;
        position: absolute;
        z-index:11;
        border-left: 1px solid #DDDDDD;

    }


    .showMenu2 {

        display: block;
        width: 60px;
        height: 80px;
        right: 0;
        top: 0;
        font-size: 0;
        position: absolute;
        z-index:11;
        border-left: 1px solid #DDDDDD;
    }

我在考虑使用

@media only screen and (min-width:603px) and (max-width:966px) and (orientation:landscape){ 


}

但我甚至不确定如何去做，因为我无法弄清楚导致导航器首先消失的原因。

所有建议表示赞赏！谢谢你的时间！

Answer 1

CSS是否从外部文件加载？必须从某处加载ID。

或者，'responsive-nav'ID可能没有任何相关的样式，可以简单地用作某些javascript的某种参考？

需要查看正在加载的样式，脚本以及如何

如何让移动导航菜单以横向模式显示？

1 个答案: