单击下拉菜单按下内容

时间：2015-07-19 03:10:36

标签： html css

每当用户选择带有下拉菜单的链接时，我都会尝试下载我的内容。但是，单击时，下拉菜单会覆盖内容而不是将其按下。

我尝试使用position：relatives / position：absolute等来实现某种期望的结果，但没有这样的运气。我已经看到了与此问题相关的其他类似问题，但它仍然没有帮助我。

非常感谢您解决此问题的任何帮助。

HTML 

<body>
 <nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">

            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" id="nav">
                <li class="nav-link active"><a href="#">Link</a></li>
                <li class="nav-link"><a href="#">Link</a></li>
                <li class="nav-link"><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="menu-trigger">Drop-Down Menu<i class="fa fa-angle-down flipped"></i></a>
                    <ul class="dropdown-menu" id="menu">
                        <li class="nav-link">
                            <a href="#" class="m-pub"><i class="fa fa-microphone fa-2x"></i>Option</a>

                        </li>
                        <li class="nav-link">
                            <a href="" class="m-pub"><i class="fa fa-newspaper-o fa-2x"></i>Option</a>

                        </li>
                    </ul>
                </li>

                <li class="nav-link"><a href="#">Link</a></li>
                <li class="nav-link"><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</nav>


<div class="container" style="background: red;height:100px; width: 100%;">

</div>

CSS 

   body {
          margin: 0;
          padding: 0;
          font-family: "Helvetica","Arial",sans-serif;
          font-weight: 500;
          font-style: normal;
          font-size: 12px;
          line-height: 1.5;
        }

        .navbar-default {
          background-color: #ffffff;
        }

        .navbar {
          min-height: 65px;
          padding-top: 5px;
          margin-bottom: 0px;
          border-bottom: solid 2px #eee;
        }

        .navbar-header {
          margin-top: -12px;
        }

        .navbar-brand {
          padding-top: 0px !important;
        }

        /* for button placement*/
        .navbar-toggle {
          margin-top: 26px;
        }

        /*for collapsed navbar*/
        .navbar-collapse {
          margin-top: 12px;
        }

        .site-logo {
          max-width: 135px;
          min-width: 120px;
        }

        .navbar-default .navbar-nav > li > a {
          text-transform: uppercase;
          background-color: #ffffff !important;
          color: #333333;
        }

        .navbar-default .navbar-nav > li > a:hover {
          color: #3381d0;
        }

        .navbar-default .navbar-nav>li>a:hover,
        .navbar-default .navbar-nav>.active>a, 
        .navbar-default .navbar-nav>.active>a:focus, 
        .navbar-default .navbar-nav>.active>a:hover {
          background-color: #ffffff;
          border-bottom: 2px solid #ff5d1c;
          color: #ff5d1c;
          bottom: -2px;
        }



        .nav>li {
          position: static !important;
        }

        /* For navbar dropdown*/
        .navbar .dropdown-menu {
          min-width:1349px;
          width: 100%;
          height: 120px;
          margin-top: 51px;
          z-index:1;
          left: 0;
          text-align: center;

          padding-right:10px;
          position: absolute;
          list-style-type:none;

          border-top: 2px solid #ff5d1c;
          border-bottom: 2px solid #333333;
          border-right: #ffffff;
          border-radius: 0;
          box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
          border-left: 0;
          background-color: #337ab7;
        }

        .dropdown-menu {
          padding-left:10px;
          padding-right:10px;
          position:relative;
          list-style-type:none;
        }

        .navbar .dropdown-menu li {
          margin:0;
          padding:0;
          display: inline-block;
        }

        .dropdown-menu > li > a {
          color: #ffffff;
          line-height: 75px;
          padding: 3px;
        }

        .dropdown-menu > li > a:hover {
          color: #333333 !important;
        }

        .dropdown-menu > li > a:hover {
          color: #ffffff;
          background-color: #337ab7;
        }


        .m-pub {
          display: inline-block;
          margin: 3px 40px 0;
          font-size: 13px;
          font-weight: 400;
          text-transform: uppercase;
          letter-spacing: .14em;
          color: white;
          -webkit-transition: none;
          -moz-transition: none;
          -ms-transition: none;
          -o-transition: none;
          transition: none;
           position: relative;
        }

        .m-pub:after,
         .m-pub:focus{
          color: #ffffff;
          background-color: #337ab7;
        }

        .dropdown-menu li .m-pub:hover:after {
          content: '';
          position: absolute;
          left: 50%;
          margin-left: -10px;
          margin-top: 55px;

          border-left: 0;
          border-bottom: 17px solid transparent;
          border-top: 17px solid transparent;
          border-left: 14px solid #333333;
          transform: rotate(-90deg);
          background: none;
        }

我提供了一个jsfiddle： JSFiddle

1 个答案:

答案 0 :(得分：11)

您的问题，正如您所怀疑的那样，是定位。遗憾的是，如果您使用position: absolute，.dropdown-menu将从文档流中移除，请将其放在其下方的任何内容上，而不是将其移开。如果您使用position: relative，则会强制其父级调整菜单的大小。据我所知，纯CSS没有解决这个问题的方法。但是，有一些javascript解决方案，由于JQuery已被bootstrap使用，我们可以使用它。

要在点击dropdown-menu时向下移动内容，您需要更改.container，内容，本身或dropdown-menu相对于的父/祖父素元素。我选择添加margin-bottom祖父母，在这种情况下，是nav元素。您可以轻松地将margin-top添加到.container。无论哪种方式，您都需要将余量设置为.dropdown-menu的高度，该高度设置为120px。我创建了以下规则来实现这一目标：

nav.navbar.open {
  margin-bottom: 120px;
}

单击.open时，JQuery将添加额外的类li.dropdown。我只是用这个快速的JQuery来完成这个：

$("li.dropdown").click(function() {
  $("nav.navbar" ).toggleClass( "open");
});

这就是所需要的。单击li.dropdown后，.open会添加到nav元素，这会将其下边距增加到.dropdown-menu的相同高度。保证金不会影响.dropdown-menu，因为它是绝对定位的，而只是按下.container，就像没有从文档流中删除.dropdown-menu一样。使用li.dropdown而非#menu-trigger（链接本身）的原因是因为如果您使用该链接，然后点击.dropdown-menu菜单将被取消，但保证金仍然存在。通过使用dropdown-menu的父级，只要单击父级的子级，就会注册click事件。如果使用兄弟，那么触发器就不会发生。

$("li.dropdown").click(function() {
  $("nav.navbar").toggleClass("open");
});
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
}
.navbar-default {
  background-color: #ffffff;
}
.navbar {
  min-height: 65px;
  padding-top: 5px;
  margin-bottom: 0px;
  border-bottom: solid 2px #eee;
}
.navbar-header {
  margin-top: -12px;
}
.navbar-brand {
  padding-top: 0px !important;
}
/* for button placement*/

.navbar-toggle {
  margin-top: 26px;
}
/*for collapsed navbar*/

.navbar-collapse {
  margin-top: 12px;
}
.site-logo {
  max-width: 135px;
  min-width: 120px;
}
.navbar-default .navbar-nav > li > a {
  text-transform: uppercase;
  background-color: #ffffff !important;
  color: #333333;
}
.navbar-default .navbar-nav > li > a:hover {
  color: #3381d0;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  background-color: #ffffff;
  border-bottom: 2px solid #ff5d1c;
  color: #ff5d1c;
  bottom: -2px;
}
.nav>li {
  position: static !important;
}
/* For navbar dropdown*/

.navbar .dropdown-menu {
  min-width: 1349px;
  width: 100%;
  height: 120px;
  margin-top: 51px;
  z-index: 1;
  left: 0;
  text-align: center;
  padding-right: 10px;
  position: absolute;
  list-style-type: none;
  border-top: 2px solid #ff5d1c;
  border-bottom: 2px solid #333333;
  border-right: #ffffff;
  border-radius: 0;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  border-left: 0;
  background-color: #337ab7;
}
.dropdown-menu {
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  list-style-type: none;
}
.navbar .dropdown-menu li {
  margin: 0;
  padding: 0;
  display: inline-block;
}
.dropdown-menu > li > a {
  color: #ffffff;
  line-height: 75px;
  padding: 3px;
}
.dropdown-menu > li > a:hover {
  color: #333333 !important;
}
.dropdown-menu > li > a:hover {
  color: #ffffff;
  background-color: #337ab7;
}
.m-pub {
  display: inline-block;
  margin: 3px 40px 0;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: white;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  position: relative;
}
.m-pub:after,
.m-pub:focus {
  color: #ffffff;
  background-color: #337ab7;
}
.dropdown-menu li .m-pub:hover:after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -10px;
  margin-top: 55px;
  border-left: 0;
  border-bottom: 17px solid transparent;
  border-top: 17px solid transparent;
  border-left: 14px solid #333333;
  transform: rotate(-90deg);
  background: none;
}
nav.navbar.open {
  margin-bottom: 120px;
}
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"></a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav" id="nav">
          <li class="nav-link active"><a href="#">Link</a>
          </li>
          <li class="nav-link"><a href="#">Link</a>
          </li>
          <li class="nav-link"><a href="#">Link</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="menu-trigger">Drop-Down Menu<i class="fa fa-angle-down flipped"></i></a>
            <ul class="dropdown-menu" id="menu">
              <li class="nav-link">
                <a href="#" class="m-pub"><i class="fa fa-microphone fa-2x"></i>Option</a>
              </li>
              <li class="nav-link">
                <a href="" class="m-pub"><i class="fa fa-newspaper-o fa-2x"></i>Option</a>
              </li>
            </ul>
          </li>
          <li class="nav-link"><a href="#">Link</a>
          </li>
          <li class="nav-link"><a href="#">Link</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container" style="background: red;height:100px; width: 100%;">
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

该代码段足够小，可以与移动视图相关联，因此您需要全屏查看。或者您可以查看codepen。

请注意，您为.dropdown-menu添加的某些样式会破坏移动版本，因此您可能需要查看它们，或添加一些媒体查询来修复它们。

相关问题
最新问题