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

Question

我有这个导航，我想让自适应导航支持不同的设备，如手机，标签和桌面。

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

问题是如何制作它以便移动侧边栏的样式仅保留在移动设备上，并仅为桌面添加我的第二种样式。

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

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

我需要的两种风格都已包含在主题资源中。

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

theano

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

   <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>

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

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}"

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