vue左侧菜单栏第一个和最后一个同时打开

Posted 2023-05-17

参考技术A vue左侧菜单栏第一个和最后一个同时打开修改图标 两处文件,直接修改成同名文件覆盖。
1、修改标题。
2、左侧菜单栏允许同时展开。

如何让 twitter 引导子菜单在左侧打开？

【中文标题】如何让 twitter 引导子菜单在左侧打开？

【英文标题】：how to make twitter bootstrap submenu to open on the left side?

【发布时间】：2012-08-24 15:08:53

【问题描述】：

我试图在下拉菜单中创建 twitter 引导子菜单，但我遇到了一个问题：我在页面右上角有下拉菜单，而该菜单还有一个子菜单。但是，当子菜单打开时 - 它不适合窗口并且向右移动太多，因此用户只能看到第一个字母。如何使该子菜单不向右打开，而是向左打开？

【问题讨论】：

发布sn-p代码。

在 Bootstrap 4 中，在 .dropdown 容器上添加 .pull-right。

【参考方案1】：

如果我理解正确的话，bootstrap 为这种情况提供了一个 CSS 类。将“pull-right”添加到菜单“ul”中：

<ul class="dropdown-menu pull-right">

..最终结果是菜单选项显示为右对齐，与它们下拉的按钮一致。

【讨论】：

在 UL 级别上添加了 Matt。

绝对，我需要主菜单，而不是子菜单来移动。所以我需要定位 元素。这很令人困惑，因为您想将其移动到左侧，但是您使用 pull-right 类来实现这一点。

此答案对 Bootstrap 3.x 有效，因此，目前看来它是最正确的答案。

接受的答案对我和 Bootstrap 3 不起作用，但这个可以！

这是正确的。添加 .pull-right 并且您的下拉菜单不会离开屏幕的右侧！

【参考方案2】：

最简单的方法是将pull-left 类添加到您的dropdown-submenu

<li class="dropdown-submenu pull-left">

jsfiddle：DEMO

【讨论】：

这个答案以及 Matt for 在 UL 级别的答案是使用引导程序时实现此目的的正确方法。

OP 的问题和我的回答来自 2012 年 8 月。同时，Bootstrap 发生了变化，所以现在你有了 .pull-left 类。那时，我的回答是正确的。现在你不必手动设置 css，你有那个 .pull-left 类。

这在某些情况下效果很好，但是如果主菜单中的项目太长就会中断，就像在这个小提琴中一样：jsfiddle.net/szx4Y/446 任何人有一个快速修复的想法？

@AaronLifshin .dropdown-submenu.pull-left>.dropdown-menu width: 100%; 不是一个优雅的解决方案，但似乎工作jsfiddle.net/r1v90tas

@Schmalzy 进一步观察， width:100% 会导致子菜单 jsfiddle.net/r1v90tas/1 中的长项目出现不同的问题，并且可以通过使用 min-width:100% 来解决，如下所示： jsfiddle.net/r1v90tas/2

【参考方案3】：

当前类.dropdown-submenu > .dropdown-menu 有left: 100%;。因此，如果您想在左侧打开子菜单，请将这些设置覆盖到负左位置。例如left: -95%;。现在您将在左侧获得子菜单，您可以调整其他设置以获得完美的预览。

这里是DEMO

编辑：OP 的问题和我的回答来自 2012 年 8 月。与此同时，Bootstrap 发生了变化，所以现在你有了 .pull-left 类。那时，我的回答是正确的。现在你不必手动设置 css，你有那个 .pull-left 类。

编辑 2：演示不起作用，因为 Bootstrap 更改了它们的 URL。只需更改 jsfiddle 中的外部资源并用新资源替换即可。

【讨论】：

谢谢。几乎正是我所需要的，但是应该有left: -90%;（否则我无法将鼠标移动到那个子菜单，因为它会消失）。

就像我说的，这只是你需要做的想法。很高兴我得到了帮助:)

您的示例仅适用于某些情况。看这里：jsfiddle.net/mQnv2/305

这不是正确的答案，因为应该使用 Schmalzy 和 Matt 的帖子中提到的引导类。

这篇文章是一年前的。同时，引导程序发生了变化，因此 Schmalzy 的答案更加优雅。那时候，Bootstrap 还没有 pull-left 类。

【参考方案4】：

如果您使用的是 bootstrap v4，则有一种新方法可以做到这一点。

您应该在.dropdown-menu 元素上使用.dropdown-menu-right。

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

代码链接：https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

【讨论】：

这也适用于 boostrap 版本 >= 3.1...查看***.com/a/19253730/3354228

绝对最简单的答案

这对于版本 4 来说有点正确。语法已更改为 dropleft 和 dropright，但答案的上下文是正确的。谢谢！

【参考方案5】：

完成任务的正确方法是：

/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu  left: auto; right: 100%; 
/* Arrow position */
.dropdown-submenu  position: relative; 
.dropdown-submenu > a:after  position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; 
.dropdown-submenu:hover > a:after  border-right-color: #ffffff; 

【讨论】：

更多偏好.dropdown-submenu position: relative; text-align:right; 当箭头向左时将文本定位在右侧。

【参考方案6】：

我创建了一个 javascript 函数，用于查看他在右侧是否有足够的空间。 如果有，他会显示在右侧，否则他会显示在左侧

测试于：

Firefox (mac) Chorme (mac) Safari (mac)

Javascript：

$(document).ready(function()
    //little fix for the poisition.
    var newPos     = $(".fixed-menuprofile .dropdown-submenu").offset().left - $(this).width();
    $(".fixed-menuprofile .dropdown-submenu").find('ul').offset( "left": newPos );

    $(".fixed-menu .dropdown-submenu").mouseover(function() 
        var submenuPos = $(this).offset().left + 325;
        var windowPos  = $(window).width();
        var oldPos     = $(this).offset().left + $(this).width();
        var newPos     = $(this).offset().left - $(this).width();

        if( submenuPos > windowPos )
            $(this).find('ul').offset( "left": newPos );
         else 
            $(this).find('ul').offset( "left": oldPos );
        
    );
);

因为我不想在每个菜单项上都添加此修复程序，所以我在其上创建了一个新类。 将固定菜单放在 ul:

<ul class="dropdown-menu fixed-menu">

我希望这对你有用。

ps。 safari 和 chrome 中的小错误，第一次悬停会将其放置到左侧，如果我修复它会更新这篇文章。

【讨论】：

+1：我做了一些更改，但这让我找到了一个可行的解决方案。

很棒的解决方案！

【参考方案7】：

如果您只有一个级别并且使用引导程序 3，请将 pull-right 添加到 ul 元素

<ul class="dropdown-menu pull-right" role="menu">

【参考方案8】：

实际上 - 如果您可以浮动 dropdown 包装器 - 我发现它就像将 navbar-right 添加到 dropdown 一样简单。

这看起来像是作弊，因为它不在导航栏中，但对我来说很好。

<div class="dropdown navbar-right">
...
</div>

然后您可以直接在dropdown 中使用pull-left 进一步自定义浮动...

<div class="dropdown pull-left navbar-right">
...
</div>

...或者作为它的包装器...

<div class="pull-left">
  <div class="dropdown navbar-right">
  ...
  </div>
</div>

【参考方案9】：

如果你使用的是 LESS CSS，我写了一个小混入来用连接箭头移动下拉列表：

.dropdown-menu-shift( @num-pixels, @arrow-position: 10px )   // mixin to shift the dropdown menu
    left: @num-pixels;
    &:before  left: -@num-pixels + @arrow-position;         // triangle outline
    &:after   left: -@num-pixels + @arrow-position + 1px;   // triangle internal

然后移动一个 id 为dropdown-menu-x 的.dropdown-menu 例如，你可以这样做：

#dropdown-menu-x 
    .dropdown-menu-shift( -100px );

【参考方案10】：

我创建了一个 javascript 函数，用于查看他在右侧是否有足够的空间。如果有，他将在右侧显示，否则他将在左侧显示。同样，如果右侧有足够的空间，它将显示右侧。这是一个循环......

$(document).ready(function () 

$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');

if (screenWidth > 767) 

    $(".dropdown-submenu").hover(function () 

        var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
        var newPosition = $(this).offset().left - $(this).find('ul').width();
        var windowPosition = $(window).width();

        var oldPosition = $(this).offset().left + $(this).width();
        //document.title = dropdownPosition;
        if (dropdownPosition > windowPosition) 
            $(this).find('ul').offset( "left": newPosition );
         else 
            $(this).find('ul').offset( "left": oldPosition );
        
    );

);

【讨论】：

它有效！但是让我们限制它： var newPosition = Math.max(10,...);

【参考方案11】：

您使用的是最新版本的引导程序吗？我已经改编了来自the Fluid Layout example 的html，如下所示。我添加了一个下拉菜单，并通过添加 pull-right 类将其放置在最右侧。当悬停在下拉菜单上时，它会自动拉到左侧并且没有任何隐藏 - 所有菜单文本都是可见的。我没有使用任何自定义 css。

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown open">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <p class="navbar-text pull-right">
          Logged in as <a href="#" class="navbar-link">Username</a>
        </p>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

【讨论】：

这不是我所需要的。这只是下拉菜单（我也使用 pull-right 或 pull-left）。但是我需要在 SUBMENU 中打开子菜单并使其向左打开（下拉菜单中应该是箭头，指示应该向左打开的子菜单的存在，而不是像标准的那样向右打开）。

【参考方案12】：

你唯一需要做的就是

 <ul style='left:-100%'> 

您要在右侧显示的菜单。