как переместить последний div вниз, когда появляется подменю - PullRequest
Новая
       2

как переместить последний div вниз, когда появляется подменю

0 голосов
/ 07 октября 2019

Я изменил код ниже из W3, чтобы сделать его отзывчивым. Любые предложения, чтобы сделать его лучше оцененным.

Вот основная проблема: как заставить последний div (с классом "down-down") двигаться вниз по странице, когда появляется красное подменю? 

p:empty{
   display:none;
   margin:0;
}

.entry-content p{
  margin:0;
}

.subnavbtn button{
  border:0!important;
  box-sizing:unset!important;
  font-family: "Open Sans", Helvetica, Arial, sans-serif!important;
}

/* The navigation menu */
.navbar {
  overflow: hidden;
  background-color: #333; 
  line-height:1;  
}

.navbar p{
  line-height:1;  
 }


/* Navigation links */
.navbar a {
  float: left;
  font-size: 3vw;
  color: white;
  text-align: center;
  padding: 2vw 1.5vw;
  text-decoration: none;
}

.navbar a:visited{
  color:white;  
}

/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;  
}

.subnav{
  font-size:3vw;
}

/* Subnav button */
.subnav .subnavbtn {
 
  border: none;
  box-sizing:unset!important;
  outline: none;
  color: white;
  padding:  2vw 1.5vw;
  background-color: inherit;
  font:inherit;
  font-family: "Open Sans", Helvetica, Arial, sans-serif!important;  
  margin: 0;
}

/* Add a red background color to navigation links on hover */
.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: red;
}

/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  left: 2.5%;
  background-color: red;
  width:  95%;
  z-index: 1;
}

/* Style the subnav links */
.subnav-content a {
  float: left;
  color: white;
  text-decoration: none;
}

/* Add a grey background color on hover */
.subnav-content a:hover {
  background-color: #eee;
  color: black;
}

/* When you move the mouse over the subnav container, open the subnav content */
.subnav:hover .subnav-content {
  display: block;
}

.move-down{
   width:100%;
   height:200px;
   background-color:purple;
}
<div class="entry-content">   
   <!-- The navigation menu -->
   <div class="navbar">
      <a href="#home">Home</a>
      <div class="subnav">
         <button class="subnavbtn">About</button>
         <div class="subnav-content">
            <a href="#company">Company</a>
            <a href="#team">Team</a>
            <a href="#careers">Careers</a>
         </div>
      </div>
      <div class="subnav">
         <button class="subnavbtn">Services</button>
         <div class="subnav-content">
            <a href="#bring">Bring</a>
            <a href="#deliver">Deliver</a>
            <a href="#package">Package</a>
            <a href="#express">Express</a>
         </div>
      </div>
      <div class="subnav">
         <button class="subnavbtn">Partners</button>
         <div class="subnav-content">
            <a href="#link1">Link 1</a>
            <a href="#link2">Link 2</a>
            <a href="#link3">Link 3</a>
            <a href="#link4">Link 4</a>
         </div>
      </div>
      <a href="#contact">Contact</a>
   </div>
</div>
<div class="move-down"></div>

1 Ответ

3 голосов
/ 07 октября 2019

пурпурный div находится вне контейнера навигации, поэтому вы не можете манипулировать им, используя grid или flexbox, также вы не можете переместить его вниз, когда навигация находится, так как нет селектора, который бы выполнял работу, однако выможно использовать небольшой JavaScript для достижения желаемого результата: 

const navbar = document.getElementsByClassName('navbar')[0]
const subnavs = document.getElementsByClassName('subnav')
const purpleDiv = document.getElementsByClassName('move-down')[0]
const subnavHeight = document.getElementsByClassName('subnav')[1].getBoundingClientRect().height

for ( let i =0 ; i <subnavs.length ; i++ ) {
subnavs[i].addEventListener('mouseover', function() {
  purpleDiv.style.marginTop = subnavHeight + 'px'
  
})
subnavs[i].addEventListener('mouseleave', function() {
  purpleDiv.style.marginTop = 0 + 'px'
})
}
p:empty {
  display: none;
  margin: 0;
}

.entry-content p {
  margin: 0;
}

.subnavbtn button {
  border: 0!important;
  box-sizing: unset!important;
  font-family: "Open Sans", Helvetica, Arial, sans-serif!important;
}


/* The navigation menu */

.navbar {
  overflow: hidden;
  background-color: #333;
  line-height: 1;
}

.navbar p {
  line-height: 1;
}


/* Navigation links */

.navbar a {
  float: left;
  font-size: 3vw;
  color: white;
  text-align: center;
  padding: 2vw 1.5vw;
  text-decoration: none;
}

.navbar a:visited {
  color: white;
}


/* The subnavigation menu */

.subnav {
  float: left;
  overflow: hidden;
}

.subnav {
  font-size: 3vw;
}


/* Subnav button */

.subnav .subnavbtn {
  border: none;
  box-sizing: unset!important;
  outline: none;
  color: white;
  padding: 2vw 1.5vw;
  background-color: inherit;
  font: inherit;
  font-family: "Open Sans", Helvetica, Arial, sans-serif!important;
  margin: 0;
}


/* Add a red background color to navigation links on hover */

.navbar a:hover,
.subnav:hover .subnavbtn {
  background-color: red;
}


/* Style the subnav content - positioned absolute */

.subnav-content {
  display: none;
  position: absolute;
  left: 2.5%;
  background-color: red;
  width: 95%;
  z-index: 1;
}


/* Style the subnav links */

.subnav-content a {
  float: left;
  color: white;
  text-decoration: none;
}


/* Add a grey background color on hover */

.subnav-content a:hover {
  background-color: #eee;
  color: black;
}


/* When you move the mouse over the subnav container, open the subnav content */

.subnav:hover .subnav-content {
  display: block;
}

.move-down {
  width: 100%;
  height: 200px;
  background-color: purple;
}
<div class="entry-content">
  <!-- The navigation menu -->
  <div class="navbar">
    <a href="#home">Home</a>
    <div class="subnav">
      <button class="subnavbtn">About</button>
      <div class="subnav-content">
        <a href="#company">Company</a>
        <a href="#team">Team</a>
        <a href="#careers">Careers</a>
      </div>
    </div>
    <div class="subnav">
      <button class="subnavbtn">Services</button>
      <div class="subnav-content">
        <a href="#bring">Bring</a>
        <a href="#deliver">Deliver</a>
        <a href="#package">Package</a>
        <a href="#express">Express</a>
      </div>
    </div>
    <div class="subnav">
      <button class="subnavbtn">Partners</button>
      <div class="subnav-content">
        <a href="#link1">Link 1</a>
        <a href="#link2">Link 2</a>
        <a href="#link3">Link 3</a>
        <a href="#link4">Link 4</a>
      </div>
    </div>
    <a href="#contact">Contact</a>
  </div>
</div>
<div class="move-down"></div>
...