制作**响应式导航**，支持移动设备、标签页和桌面等不同设备

Question

我有这个导航，我想让它响应式导航支持不同的设备，例如移动设备、标签和桌面。

我在我的移动侧边栏中包含一个 menu.html 文件， 我在我的桌面标题中包含了相同的 hmtl 文件。

问题是如何使移动侧边栏的样式仅保留在移动设备上，并为桌面添加我的第二个样式。

这是我用于移动设备的侧边栏： http://pages.revox.io/dashboard/latest/html/index.html 然后我禁用它以显示桌面

我将这个菜单包含在桌面的标题中： http://pages.revox.io/dashboard/latest/html/tabs_accordian.html

我需要的两种样式都已经包含在主题的资源中了。

这是我现在用于侧边栏和标题的结构

   <ul id="menu-lg" class="menu-items text-uppercase list-inline nav-tabs-simple" role="tablist">
        <li class="sm-m-t-20 list-unstyled active" ui-sref-active="open" data-toggle="tab">
            <span class="icon-thumbnail hidden-md hidden-lg"><i class="fa fa-dashboard"></i></span>
            <a class="nav-text" ui-sref="product.dashboard" data-toggle="tab">
                <span class="titl">Dashboard</span>
            </a>
        </li>
        <li class="list-unstyled" ui-sref-active="open">
            <a class="nav-text" ui-sref="product.balance">
                <span class="title">Balance</span>
            </a>
            <span class="icon-thumbnail hidden-md hidden-lg"><i class="fa fa-dollar"></i></span>
        </li>
        <li class="list-unstyled" ui-sref-active="open">
            <a class="nav-text" ui-sref="product.users">
                <span class="title">Users</span>
            </a>
            <span class="icon-thumbnail hidden-md hidden-lg"><i class="fa fa-user"></i></span>
        </li>
    </ul>

这是我需要将样式应用于顶部结构的第二个菜单的结构：

<ul class="nav nav-tabs nav-tabs-simple" role="tablist">
    <li class="active"><a ui-sref="product.dashboard" data-toggle="tab"      role="tab" aria-expanded="false">Hello World</a>
    </li>
    <li class=""><a ui-sref="product.balance" data-toggle="tab" role="tab" aria-expanded="false">Hello Two</a>
    </li>
    <li class=""><a ui-sref="product.users" data-toggle="tab" role="tab" aria-expanded="true">Hello Three</a>
   </li>
</ul>

你可以看到一些类已经被合并了，菜单表现还不错，但是有一些错误，我认为必须有更好的解决方案来解决这个问题。

Answer 1

您正在谈论使导航响应式。

您需要使用断点在不同的设备上实现结果。

这里有几个最常用的断点

@media screen and (max-width:959px){
    /*your css classes*/
}
@media screen and (max-width:640px){
    /*your css classes*/
}
@media screen and (max-width:320px){
    /*your css classes*/
}

Answer 2

您可以通过两种方式做到这一点：

您可以在控制器中声明一个范围值，然后您可以测试代理是移动设备还是桌面设备。例如，Modernizr 有一个 Modernizr.touch 函数来测试移动设备。在不同的情况下，您可能会为范围变量存储不同的值。

if (Modernizr.touch) {
   $scope.isMobile = true;
} else {
   $scope.isMobile = false;
}

（如果您不想包含其他库，您应该自己测试：Detecting a mobile browser）

在您的模板上之后，您可以通过检查存储在范围变量中的值来使用ng-class。

ng-class="{'isMobile': item.isMobile, 'isDesktop' : !item.isMobile}"

另一种方法是使用媒体查询。