Question

我正在编写一个引导程序站点，并希望从屏幕右侧创建一种弹出菜单。此菜单需要隐藏＆＃39;当一个按钮＆＃34;菜单＆＃34;单击它会弹出屏幕右侧，覆盖屏幕右侧的任何内容。它不会推送内容。当你从右边的屏幕上滑动手指时，有点像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>

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

带有bootstrap css文件的Css（bootstrap-theme，bootstrap-theme min，bootstrap，bootstrap min）
字体
JS with bootstrap.js and bootstrap.min.js

请告诉我该怎么做。

如果您知道在引导程序中制作我想要的菜单的不同方式，我也很乐意听到它。

Answer 1

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

position: absolute;

或者

position: fixed;

之后再给它

right: 500px;

但不是500px而是使用菜单的宽度并使其弹出只是覆盖

right: 0;

将其设为0会使其向右移动到原始位置

Answer 2

以下是一个简单的示例：

jsFiddle Demo

请注意，id标记中添加了a，可以让jQuery捕获该元素上的click事件。

在jQuery中，我们使用变量mnuOut来跟踪菜单是IN还是OUT（可见或隐藏）。

此外，我们使用.animate()方法从右侧为幻灯片设置动画。这可以通过更改css属性right：

来实现

FROM right:-80px（滑动超出屏幕右侧80px）

至right:0，其中myMenu DIV的最右边与屏幕右侧齐平。

<强> HTML：

<div id="myMenu">
  <div id="item1" class="submenu">Item 1</div>
  <div id="item2" class="submenu">Item 2</div>
  <div id="item3" class="submenu">Item 3</div>
</div>

<a id="menuTrigger" class="dropdown-toggle" data-toggle="dropdown">Menu

<强> CSS：

#myMenu{position:fixed;top:20px;right:-80px;width:80px;height:300px;background:palegreen;}
.submenu{width:100%;height:20px;padding:20px 5px;border:1px solid green;}
#menuTrigger:hover{cursor:pointer;}

<强> jQuery的：

mnuOut=false;

$('#menuTrigger').click(function(){
  if (mnuOut){
        //Menu is visible, so HIDE menu
      $('#myMenu').animate({
        right: '-80px'
      },800);
      mnuOut = false;
  }else{
        //Menu is hidden, so SHOW menu
      $('#myMenu').animate({
        right: 0
      },800);
      mnuOut = true;
  }
})

Answer 3

你想要的只需要几行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

制作一个弹出屏幕右侧的菜单

3 个答案: