文章/答案/技术大牛

发布

社区首页 >问答首页 >做一个从屏幕右边弹出的菜单

问做一个从屏幕右边弹出的菜单
EN

Stack Overflow用户

提问于 2016-01-02 21:16:14

回答 2查看 2.3K关注 0票数 1

我正在编写一个引导网站，并希望使一种弹出菜单从右边的屏幕。这个菜单需要隐藏‘，当一个按钮“菜单”被点击，它弹出屏幕右，涵盖的任何在屏幕上的权利。它并不是把的内容推开的。有点像当你从屏幕右边滑动你的手指时的windows 8菜单。

我想做一个下拉菜单，因为它的行为几乎是我想要的，除了它的位置。但是我需要改变下拉菜单的行为，这样下拉菜单就不会弹出到下拉按钮上，而是从屏幕右边弹出，但是我找不出如何做到这一点。

<head>
    ...
    <link href ="CSS/Bootstrap.min.css" rel ="stylesheet"/>        
</head> 
<div class="col-xs-3">
    <!--some side content-->
</div>
<div class="col-xs-9">
    <!--some side content-->
</div>
<div class="col-xs-12">
    <nav class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container-fluid">
            <li class="dropup">
                <a class="dropdown-toggle" data-toggle="dropdown">Menu
                    <ul> class="dropdown-menu">
                        <li>
                        </li>
                        <li>
                        </li>
                    </ul>
                </a>
            </li>
        </div>
    </nav>
</div>
<script src="JS/jquery-1.11.3.min.js"></script>
<script src="JS/bootstrap.min.js"></script>

我的项目中有三个文件夹：

带有引导Css文件的css (引导主题，引导主题，引导，引导)
字体
带有bootstrap.js和bootstrap.min.js的JS

请教我怎么做。

如果你知道一种不同的方式来制作我想要的自举菜单，我也很想听听。

twitter-bootstrap

javascript

jquery

html

css

回答 2

Stack Overflow用户

发布于 2016-01-02 21:26:36

如果希望菜单覆盖内容，请确保添加

position: absolute;

或

position: fixed;

然后再给它

right: 500px;

但是不要使用500 it，而要使用菜单的宽度并使其弹出，只需覆盖

right: 0;

使其为0将使它坚持到右方回到原来的位置。

票数 2

Stack Overflow用户

发布于 2016-01-02 22:05:40

你想要的不仅仅是几行css，但我认为这会给你一个好的开始。只需根据你的主题风格：

HTML

<div id="oneout">
  <span class="onetitle">
    menu
</span>
  <div id="oneout_inner">
    <center>
      menu info here
      <br>
    </center>
  </div>
</div>

CSS

 #oneout {
    z-index: 1000;
    position: fixed;
    top: 64px;
    right: 1px;
    width: 18px;
    padding: 40px 0;
    text-align: center;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }

  #oneout_inner {
    top: 60px;
    right: -250px;
    position: fixed;
    width: 230px;
    padding: 10px;
    background: #FFFFFF;
    height: auto;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    text-align: left;
    border:1px solid #333;
  }

  #oneout:hover {
    z-index: 1000;
    right: 250px;
  }

  #oneout:hover #oneout_inner {
    z-index: 1000;
    right: 0px;
  }

  .onetitle {
    display: block;
    writing-mode: lr-tb;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: absolute;
    right: -11px;
    top: 3px;
    font-family: Lucida Sans;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -1px;
  }

这是一个工作的DEMO

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34570820

复制

相似问题

问做一个从屏幕右边弹出的菜单
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问做一个从屏幕右边弹出的菜单EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问做一个从屏幕右边弹出的菜单
EN