All geek questions in one place

Make a drop down menu; click content down on click

I try to click on my content when a user selects links with a drop down menu. However, when clicked, the drop-down list iterates over the content, rather than pushing it down.

I tried to use position: relatives / position: absolute, etc. To achieve some desired result, but no luck. I saw other similar questions related to this problem, but it still didn't help me.

Any help in solving this problem would be greatly appreciated.

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;
        }

I provided jsfiddle: JSFiddle

+5
source share
2 answers

, , . , position: absolute, .dropdown-menu , - , . position: relative, . , CSS. , javascript, JQuery bootstrap, .

dropdown-menu, .container, , parent/grandparent, dropdown-menu. margin-bottom grandparent, 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 nav .open, .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>
Hide result

, , . codepen.

, .dropdown-menu, , -, .

+11

@ mouseover click bootstarp 4

0

Source: https://habr.com/ru/post/1598550/

More articles:


All Articles