Как сделать так, чтобы элементы подменю отображались, пока родители оставались неизменными в полноэкранном оверлейном меню? - PullRequest
Новая
       1

Как сделать так, чтобы элементы подменю отображались, пока родители оставались неизменными в полноэкранном оверлейном меню?

0 голосов
/ 05 апреля 2019 

function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}
.imglogo {
  padding: 5% 15% 5% 10%;
  background-color: rgba(255, 255, 255, 0.72);
  border-radius: 30px 30px 30px 30px;
  box-shadow: -6px -4px 18px 7px #7a77a2;
  background: center center no-repeat:
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.99);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 20%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #7a77a2;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@-webkit-keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes slide-down {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@media screen and (max-height: 450px) {
  .overlay {
    overflow-y: auto;
  }
  .overlay a {
    font-size: 20px
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.submenu1 {
  font-family: gotham-gds;
  font-size: 12px;
  display: none;
}

.submenu2 {
  font-family: gotham-gds;
  font-size: 12px;
  display: none;
}

.submenu3 {
  font-family: gotham-gds;
  font-size: 12px;
  display: none;
}

.submenu4 {
  font-family: gotham-gds;
  font-size: 12px;
  display: none;
}

.submenu5 {
  font-family: gotham-gds;
  font-size: 12px;
  display: none;
}

.small {
  font-size: 16px !important;
}

.overlay-content ul {
  list-style-type: none;
}

.encima li a {
  display: block;
}

.encima li ul {
  position: absolute;
}

.encima li:hover ul,
.encima li:focus ul {
  width: 100%;
  z-index: 5;
}

.encima li ul {
  display: block;
  width: 100%;
}

.encima:hover .submenu1 {
  display: inline-block;
  margin: -7% 0% 0 20%;
  -webkit-animation: slide-down .5s ease-in-out;
  -moz-animation: slide-down .5s ease-out;
  list-style: none;
  text-align: left;
}

.encima:hover .submenu2 {
  display: inline-block;
  margin: -10% 0% 0 30%;
  -webkit-animation: slide-down .5s ease-in-out;
  -moz-animation: slide-down .5s ease-out;
  list-style: none;
  text-align: left;
}

.encima:hover .submenu3 {
  display: inline-block;
  -webkit-animation: slide-down .5s ease-in-out;
  -moz-animation: slide-down .5s ease-out;
  list-style: none;
  margin: -10% 0% 0 30%;
  text-align: left;
}

.encima:hover .submenu4 {
  display: inline-block;
  -webkit-animation: slide-down .5s ease-in-out;
  -moz-animation: slide-down .5s ease-out;
  list-style: none;
  margin: -10% 0% 0 25%;
  text-align: left;
}

.encima:hover .submenu5 {
  display: inline-block;
  -webkit-animation: slide-down .5s ease-in-out;
  -moz-animation: slide-down .5s ease-out;
  list-style: none;
  margin: -10% 0% 0 20%;
  text-align: left;
}
<body>

  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <div class="overlay-content">

      <ul>
        <div class="encima">
          <li> <a href="#">Link1</a></li>
          <ul class="submenu1">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </div>
        <div class="encima">
          <li> <a href="#">link2</a></li>
          <ul class="submenu2">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </div>
        <div class="encima">
          <li> <a href="#">Link3</a></li>
          <ul class="submenu3">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </div>
        <div class="encima">

          <li> <a href="#">Link4</a></li>
          <ul class="submenu4">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </div>

        <div class="encima">
          <li> <a href="#">link5</a></li>
          <ul class="submenu5">
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </div>
      </ul>

    </div>
  </div>

  <span style="font-size:28px;cursor:pointer" onclick="openNav()">
    <div class="elementor-widget-container">
      <a href="#">open menu</a>
    </div>
  </span>

</body>

Спасибо за помощь заранее!Я хотел бы, чтобы ребенок появлялся справа, а родители не двигались, но я не знаю, где я пропустил атрибуты позиционирования.

Я пытаюсь создать вертикальное полноэкранное меню наложения (запускается из изображения логотипа), где родительпункты имеют пункты подменю, но я бы хотел, чтобы они отображались справа от «блока родителей».Проблема заключается в том, что когда дочерние элементы отображаются при наведении, следующие родители перемещаются вниз ...

Ответы [ 2 ]

1 голос
/ 05 апреля 2019

Вы должны добавить свойство position: absolute в ваше "подменю": 

.encima ul {
  position: absolute;
}
0 голосов
/ 05 апреля 2019

Вы делаете ошибку в структуре HTML, используйте подменю ul внутри li и измените один CSS из 

.encima li ul {
    display: none;
    width: 100%;
}


function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}
.imglogo{
        padding: 5% 15% 5% 10%;
    background-color: rgba(255,255,255,0.72);
    border-radius: 30px 30px 30px 30px;
   box-shadow: -6px -4px 18px 7px #7a77a2;
   background: center center no-repeat:
    
}
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.99);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 20%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
 }

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #7a77a2;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }   
    100% { opacity: 1; -moz-transform: translateY(0); }
}
@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
.submenu1{
    font-family: gotham-gds;
    font-size: 12px;
    display: none;
    }
.submenu2{
    font-family: gotham-gds;
    font-size: 12px;
    display: none;
    }
.submenu3{
    font-family: gotham-gds;
    font-size: 12px;
    display: none;
    }
.submenu4{
    font-family: gotham-gds;
    font-size: 12px;
    display: none;
    }
.submenu5{
    font-family: gotham-gds;
    font-size: 12px;
    display: none;
    }
.small{
    font-size:16px !important;
}
	.overlay-content ul {
    list-style-type: none;
	}
	.encima li a {
    display:block;
	}
	.encima li ul{
    position: absolute;
	}

	.encima li:hover ul, .encima li:focus ul{
    width:100%;
    z-index: 5;
	}
	.encima li ul {
    display: none;
    width: 100%;
    
	}
	.encima:hover .submenu1{
    display:inline-block;
    margin: -7% 0% 0 20%;
    -webkit-animation: slide-down .5s ease-in-out;
    -moz-animation: slide-down .5s ease-out;
    list-style: none;
    text-align: left;
	}    
	.encima:hover .submenu2{
    display:inline-block;
     margin: -10% 0% 0 30%;
    -webkit-animation: slide-down .5s ease-in-out;
    -moz-animation: slide-down .5s ease-out;
    list-style: none;
    text-align: left;
    
   }
   .encima:hover .submenu3{
    display:inline-block;
    -webkit-animation: slide-down .5s ease-in-out;
    -moz-animation: slide-down .5s ease-out;
    list-style: none;
     margin: -10% 0% 0 30%;
    text-align: left;
   }
    .encima:hover .submenu4{
    display:inline-block;
    -webkit-animation: slide-down .5s ease-in-out;
    -moz-animation: slide-down .5s ease-out;
    list-style: none;
    margin: -10% 0% 0 25%;
    text-align: left;
    }
    .encima:hover .submenu5{
    display:inline-block;
    -webkit-animation: slide-down .5s ease-in-out;
    -moz-animation: slide-down .5s ease-out;
    list-style: none;
    margin: -10% 0% 0 20%;
    text-align: left;
}
<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content"> 
    <ul>
        <div class="encima"> 
            <li> <a href="#">Link1</a>
                <ul class="submenu1">
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </li>
        </div>
        <div class="encima"> 
            <li> <a href="#">Link2</a>
                <ul class="submenu1">
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </li>
        </div><div class="encima"> 
            <li> <a href="#">Link3</a>
                <ul class="submenu1">
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </li>
        </div><div class="encima"> 
            <li> <a href="#">Link4</a>
                <ul class="submenu1">
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </li>
        </div><div class="encima"> 
            <li> <a href="#">Link5</a>
                <ul class="submenu1">
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </li>
        </div>
    </ul>     
  </div>
</div>

<span style="font-size:28px;cursor:pointer" onclick="openNav()" >
        <div class="elementor-widget-container">
            <a href="#">open menu</a>
        </div>
</span>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...