温馨提示×

用bootstrap定义上弹菜单的方法

发布时间:2020-08-21 14:49:27 来源:亿速云 阅读:124 作者:小新 栏目:web开发

小编给大家分享一下用bootstrap定义上弹菜单的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。使用方法正如前面所示,只需要在“btn-group”上添加这个类名(当然,如果是普通向上弹出下拉菜单,你只需要在“dropdown”类名基础上追加“dropup”类名即可)。

用bootstrap定义上弹菜单的方法

bootstrap下拉菜单智能向上下弹出

1、需求:

通过给bootstrap下拉菜单添加 dropdown 或 dropup 样式类,可以实现菜单向下或向上弹出。在动态页面中,表格元素一般是动态生成的,而且下拉菜单通常是向下弹出。当向下弹出菜单下方被遮挡(不能完全显示)时,如何实现向上弹出?

2、实现思路:

获取点击按钮距离屏幕下方的高度和弹出菜单的高度,如果弹出菜单不能完全显示,就让其向上弹出。

3、实现过程:

通过修改bootstrap.js中的toggle属性,实现点击的时候,根据实际情况智能向下或向上弹出。实现如下:        

4、测试页面部分代码:

①:引入js:

<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>

②:下拉菜单布局:

 <div class="btn-group" style="margin:10px auto;">
    <button type="button " class="btn btn-default btn-xs dropdown-toggle" data- 
         toggle="dropdown">
        <i class="glyphicon glyphicon-cog"></i> 
        <span class="glyphicon glyphicon-menu-down"></span>
    </button>
    <ul class="dropdown-menu  pull-right" role="menu">
        <li><a href="#">基本信息</a></li>
        <li><a href="#">查看权限</a></li>
        <li class="divider"></li>
        <li><a href="javascript:;" οnclick="edit();">修改信息</a></li>
        <li><a href="#">密码重置</a></li>
        <li class="divider"></li>
        <li><a href="#">删除</a></li>
        <li class="divider"></li>
        <li><a href="#">禁用</a></li>
    </ul>
 </div>

5、效果

①: 默认向下弹出:

用bootstrap定义上弹菜单的方法

②:当底部被遮挡时,向上弹出

用bootstrap定义上弹菜单的方法

<div class="btn-group dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"
    >按钮下拉菜单<span class="caret"></span></button>
    <ul class="dropdown-menu">
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
    </ul>
</div>

看完了这篇文章,相信你对用bootstrap定义上弹菜单的方法有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

免费拨打  400 100 2938 免费拨打 400 100 2938
24小时售后技术支持 24小时售后技术支持
返回顶部 返回顶部