Question

我想知道如何在CSS（SASS）中使用箭头指针实现下拉菜单。这个想法很简单：

1）按下左或右按钮

时的菜单下拉菜单

2）下拉列总是居中并占据屏幕宽度的85％（请参阅屏幕截图http://joxi.ru/12MpgxpI4y8olm）。

3）单击相应按钮时，只有箭头指向1或2。

以下是问题所在：

1）我使用绝对定位的下拉窗口（因此也是箭头）并且他的所有父母直到动作按钮本身都有位置：静态（这需要有一个下拉窗口始终与屏幕的左侧对齐）占据屏幕宽度的百分比）

2）箭头开始与屏幕尺寸对齐 - 而不是与祖父母 - 动作按钮对齐。只有当我从按钮移除位置：静态时，箭头才开始对按钮构图，但在这种情况下，我丢失了全屏显示的下拉菜单并且与屏幕的左边对齐（它开始显示在按钮上）。

我尝试使用flexbox / clearfix进行一些实现，但它似乎不适用于静态元素。或者我误解了这个想法。

所以，我的问题是：

1）如何正确构建带有箭头指针的下拉列表，如上所述并在屏幕截图中显示？（http://joxi.ru/12MpgxpI4y8olm）有什么想法吗？

2）如何在CSS（SASS / SCSS）中获得祖父母的位置（左，左边距，左边填充 - 类似的东西）？祖父母=父母的父母：）

我只需要支持现代浏览器，例如版本9之前的IE对我来说并不重要。

当前样式如下所示：

.listing-action-button
  position: static
  display: flex
  flex-direction: row
  justify-content: flex-start

  .dropdown-menu
    left: 5% !important
    margin-top: 1.5%
    width: 80% !important
    float: left !important
    position: absolute !important

    &:before
      flex-grow: 1
      align-self: flex-start

      position: absolute
      top: -7px
      left: 9px
      display: inline-block
      border-right: 7px solid transparent
      border-bottom: 7px solid #ccc
      border-left: 7px solid transparent
      border-bottom-color: rgba(0, 0, 0, 0.2)
      content: ''
    &:after
      position: absolute
      top: -6px
      left: 10px
      display: inline-block
    border-right: 6px solid transparent
    border-bottom: 6px solid #ffffff
    border-left: 6px solid transparent
    content: ''

它基于标准bootstrap的下拉菜单。 flex- * stuff不起作用，你可以省略它。

按钮组和下拉列表的HAML代码：

＆LT; ...＆GT;

  .col-sm-6.col-xs-12.col-sm-pull-3
    .user-listing__main{ style: "margin-top: -12px;" }
      .user-listing__buttons.user-listing__buttons-tablet.btn-group.btn-group-justified
        .btn-group.listing-action-button.left-button{:role => "group"}
          %button.btn.btn-lg.btn-default.dropdown-toggle{ type: "button",  :style => "width: 100%;", data: { toggle: "dropdown" }  }
            Preview
            %span.caret
          %ul.dropdown-menu.dropdown-menu-no-border{ role: "menu" }
            .menu-arrow
            %li{ class: ("disabled" if disable_edit) }
              %a#user-listings__make-featured{ href: edit_listing_path(token: listing.token), role: "group", type: "button", style: "width: 100%;" }
                %span.glyphicon.glyphicon-pencil
                = t 'user.listings.edit'
            %li
              %a#user-listings__launch-facebook-campaign{ href: listing_preview_path(token: listing.token), role: 'button', target: '_blank', type: 'button', style: "width: 100%;" }
                %span.glyphicon.glyphicon-eye-open
                = t 'user.listings.preview'

        .btn-group.listing-action-button.right-button{:role => "group"}
          %button.btn.btn-lg.btn-primary.btn-inverted.dropdown-toggle{ type: "button",  :style => "width: 100%;", data: { toggle: "dropdown" }  }
            Promote
            %span.caret
          %ul.dropdown-menu.dropdown-menu-no-border{ role: "menu" }
            .menu-arrow
            %li.mark-featured{ data: {"listing-id" => listing.id} }
              %a#user-listings__make-featured{ href: "#" }
                %span.glyphicon.glyphicon-star{ class: ("active" if is_featured?(listing)) }
                = t 'user.listings.make_featured'
            %li.disabled
              %a#user-listings__launch-facebook-campaign{ href: "#" }
                %span.glyphicon.glyphicon-thumbs-up
                Launch Facebook Campaign

＆LT; ...＆GT;

在SASS中创建带箭头指针的下拉菜单

0 个答案: