当前位置: 首页 > 面试题库 >

带Bootstrap的可滚动菜单-菜单在不应该扩展其容器的情况下

姬锐
2023-03-14
问题内容

我尝试使用此方法()来通过Bootstrap启用可滚动菜单,但是通过这种方法,可滚动菜单扩展了它的容器-
-不可滚动菜单正确地做到了这一点。

我怎样才能解决这个问题?也欢迎其他与Bootstrap兼容的方法的建议!

作为参考,以下是第一种方法的提琴形式的HTML:

<ul class="nav">
    <li class="dropdown">
        <a class="icon-key icon-white" data-toggle="dropdown" href="#" style=
        "font-weight: bold"></a>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <!-- static non-scrollable menu header 1 -->
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <li class="disabled">
                    <a href="#"><i class="icon-group"></i> <b>My Groups</b></a>
                </li>

                <li>
                    <div class="dropdown-menu scroll-menu scroll-menu-2x"
                    style="margin-left: 2em">
                        <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                            <li>
                                <a href="#">User</a>
                            </li>

                            <li>
                                <a href="#">Administrators</a>
                            </li>

                            <li>
                                <a href="#">Some Other Group</a>
                            </li>
                        </ul>
                    </div>

                    <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                        <!-- Additional menu items omitted for brevity -->
                    </ul>
                </li>
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <!-- static non-scrollable menu header 2 -->
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <li class="disabled">
                    <a href="#"><i class="icon-user"></i> <b>My Roles</b></a>
                </li>

                <li>
                    <div class="dropdown-menu scroll-menu scroll-menu-2x"
                    style="margin-left: 2em">
                        <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                            <li>
                                <a href="#">Core Users</a>
                            </li>

                            <li>
                                <a href="#">Admin</a>
                            </li>

                            <li>
                                <a href="#">Some Other Role</a>
                            </li>
                        </ul>
                    </div>

                    <ul class="dropdown-menu scroll-menu scroll-menu-2x">
                        <!-- Additional menu items omitted for brevity -->
                    </ul>
                </li>
            </ul>
        </div>

        <div class="dropdown-menu" style="margin-left: 2em">
            <ul class="dropdown-menu">
                <!-- static non-scrollable menu footer -->
            </ul>
        </div>

        <ul class="dropdown-menu">
            <li class="disabled">
                <a href="#"><i class="icon-chevron-up pull-left"></i> <i class="icon-chevron-up pull-right"></i></a>
            </li>
        </ul>
    </li>
</ul>

和CSS:

/* So we wont impact the original bootstrap menu or it's pseudo call-out
arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */
ul.scroll-menu {
    position:relative;
    display:inherit!important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    -moz-overflow-scrolling:touch;
    -ms-overflow-scrolling:touch;
    -o-overflow-scrolling:touch;
    overflow-scrolling:touch;
    top:0!important;
    left:0!important;
    width:100%;
    height:auto;
    max-height:500px;
    margin:0;
    border-left:none;
    border-right:none;
    -webkit-border-radius:0!important;
    -moz-border-radius:0!important;
    -ms-border-radius:0!important;
    -o-border-radius:0!important;
    border-radius:0!important;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none
}

问题答案:

我认为您可以通过将必要的CSS属性添加到特殊的可滚动菜单类中来简化此操作。

CSS:

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

HTML

       <ul class="dropdown-menu scrollable-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Action</a></li>
            ..
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
       </ul>


 类似资料:
  • 模仿Foodspotting的滚动菜单,可以实现滚动选择,可以放置多个菜单项目。 [Code4App.com]

  • Cocos Creator 的主菜单是可以自由扩展的。扩展方法是在 package.json 文件中的 main-menu 字段里,加入自己的菜单路径和菜单设置选项。下面是一份主菜单的配置样例: { "main-menu": { "Examples/FooBar/Foo": { "message": "my-package:foo" }, "Examples

  • 在本章中,我们将研究Joomla的“帮助”菜单中的菜单。 点击“ Help ,将显示如下所示的下拉菜单 - Joomla帮助 此帮助页面指导用户创建Joomla网站。 单击Help → Joomla Help ,将显示如下所示的屏幕。 官方支持论坛 官方支持论坛有助于支持Joomla正式交换意见和观点。 单击Help → Official Support Forum ,将显示如下所示的屏幕。 文档

  • 在本章中,我们将研究Joomla中的扩展菜单。 点击Extensions ,将显示如下所示的下拉菜单 - 扩展经理 Extension Manager用于扩展Joomla网站的功能。 单击Extensions → Extension Manager ,将显示如下所示的屏幕。 您可以在Joomla - Extension Manager一章中学习有关Extension Manager更多信息。 模块

  • 编辑器顶部有一栏主菜单,在扩展内可以方便的拓展这一个菜单栏。 注册菜单 当扩展插件需要添加菜单的时候,只需要填写 contributions.menu 对象。 例如我们在 "扩展" 菜单里增加一个菜单项: { "name": "hello-world", "contributions": { "message": { "open-panel"

  • 问题内容: 好的,所以我需要的很简单。 我已经在导航栏中设置了一些下拉菜单(使用),并且工作正常。 问题是它可以工作“ ”,而我希望它可以工作“ ”。 有内置的方法吗? 问题答案: 最简单的解决方案是使用CSS。添加类似…