Question

前几天我在一个网站上看到它有几个标签A | B | C | D | E | MORE现在，只要您放大桌面浏览器，它就会变为A | B | C | MORE然后进一步缩放更改它缩放到A | MORE，反之亦然。我使用AngularJS填充菜单，所以我想知道如何为此编写指令？

Answer 1

我会使用CSS和Mediaqueries来做到这一点。实际上这只能在CSS中完成。

Mediaqueries

Mediaqueries是＆＃34;激活＆＃34;设备/屏幕属性上的CSS选择器和样式定义。其中：媒体类型，屏幕宽度/高度，设备宽度/高度，分辨率（每英寸像素数），设备像素比，方向，......

详细信息：

我的解决方案

我的解决方案使用flex-box将主要可见按钮的列扩展到完整的可用宽度，其中＆＃34;更多...＆＃34;按钮向右浮动并且是固定宽度。
当宽度减小＆＃34;触发＆＃34;断点，媒体查询将匹配，隐藏主按钮并在子菜单中显示按钮。
子菜单在:hover打开，无需Javascript。

JsFiddle Playground

（应该适用于所有现代浏览器，包括IE 11，仅在Chrome~33，FF~27中测试过）

详细

的Flex

<强> HTML

<div id="menu">
    <ul class="primary">
        ...
    </ul>
    <div class="more">
        ...
    </div>
</div>

<强> CSS

#menu {
    display: flex;
    ...
}

#menu .primary {
    margin: 0 50px 0 0;
    flex: 1;
}

Mediaqueries

/* hide the buttons that are visibile in the primary menu */
#menu .more li:nth-child(1), 
#menu .more li:nth-child(2), 
#menu .more li:nth-child(3) {
    display: none;
}

/* 1st breakpoint: hide primary button, show the correstponding one in the submenu */
@media screen and (max-width: 350px) {
    #menu .primary li:nth-child(3) {
        display: none;
    }
    #menu .more li:nth-child(3) {
        display: block;
    }
}

/* 2nd breakpoint: ... and so on ... */
@media screen and (max-width: 300px) {
    #menu .primary li:nth-child(2) { /* the same procedure ... */ }
    #menu .more li:nth-child(2), 
    #menu .more li:nth-child(3) { /* the same procedure ... */ }
}

完整代码

HTML

<div id="menu">
    <ul class="primary">
        <li>AAA</li>
        <li>BBB</li>
        <li>CCC</li>
    </ul>
    <div class="more">
        More...
        <ul>
            <li>AAA</li>
            <li>BBB</li>
            <li>CCC</li>
            <li>DDD</li>
            <li>EEE</li>
        </ul>
    </div>
</div>

CSS

/* Make the children elements flex */
#menu {
    display: flex;
    height: 30px;
}

#menu ul li {
    list-style: none;
}

/* The button wraper will flex to full remaining width */
#menu .primary {
    margin: 0 50px 0 0;
    padding: 0;
    display: inline-block;
    flex: 1;
}

#menu .primary li {
    padding: 5px 10px;
    min-width: 50px;
    text-align: center;
    display: inline-block;
}

/* Place the "more..." button right */
#menu .more {
    padding: 5px 10px;
    width: 50px;
    display: inline-block;
    float: right;
}

/* Hide hoverable submenu by default */
#menu .more ul {
    display: none;
    padding: 0;
    margin: 0;
}

/* Show on hover */
#menu .more:hover ul {
    display: block;
}


/* Hidden by default, reactivated by the following Mediaqueries */

#menu .more li:nth-child(1), 
#menu .more li:nth-child(2), 
#menu .more li:nth-child(3) {
    display: none;
}

@media screen and (max-width: 350px) {
    #menu .primary li:nth-child(3) {
        display: none;
    }
    #menu .more li:nth-child(3) {
        display: block;
    }
}

@media screen and (max-width: 300px) {
    #menu .primary li:nth-child(2) {
        display: none;
    }
    #menu .more li:nth-child(2), #menu .more li:nth-child(3) {
        display: block;
    }
}

JsFiddle

Answer 2

这可以使用Bootstrap 3轻松完成。只要您不打算主要使用Javascript，Bootstrap3的.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg就足够了。

<div class="container">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Shown 1</a>
        </li>
        <li><a href="#">Shown 2</a>
        </li>
        <li><a href="#">Show 3</a>
        </li>
        <li class="hidden-xs xs"><a href="#">Hidden XS</a>
        </li>
        <li class="hidden-sm sm"><a href="#">Hidden SM</a>
        </li>
        <li class="hidden-md md"><a href="#">Hidden MD</a>
        </li>
        <li class="hidden-lg lg"><a href="#">Hidden LG</a>
        </li>
    </ul>
</div>

http://jsfiddle.net/jLxXz/

Answer 3

好的，通过引入＆＃34; hidden-xs，visible-lg＆＃34;从3.0开始更新Bootstrap 3.1.1。类。现在我所做的就是创建一个新的对象类：＆＃34; hidden-sm hiddem-xs＆＃34;并在AngularJS中询问我的ng-class =＆＃34; {{item.class}}来动态获取和添加类，通过相应地为不同的菜单项设置不同的类来解决问题。

根据屏幕大小从菜单中动态删除元素

3 个答案:

Mediaqueries

我的解决方案

详细

的Flex

Mediaqueries

完整代码

HTML

CSS