отображение div в разных слоях? - PullRequest
Новая
       28

отображение div в разных слоях?

0 голосов
/ 02 июля 2019

Я создал меню навигации для моего сайта в javascript. Когда я нажимаю на элемент div, например «О программе», ниже отображаются другие элементы, например «Об этом сайте», «Свяжитесь со мной».

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

Я хочу поместить расширенное меню во второй слой и сделать его прозрачным. Таким образом, тексты ниже не изменят свою позицию, а расширенное меню переместится на содержание ниже. enter image description here после многих попыток заставить это меню даже работать, я в конечном итоге использовал простой структура, содержащая элементы div и сетки. 

<main>
  <div class=navGrid>
    //Example of one Menu containing links
    <div class=navMenuX onclick="clickNavMenu(1)">
      <div>Example Title</div>
      <div id=1>
        <div class=navLink>Link 0</div>
        <div class=navLink>Link 1</div>
        <div class=navLink>Link 2</div>
      </div>
    </div>
 </main>




 <style>
  //horizontalMenu (columns)
  .navMenuGrid{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    display: grid;
  }
  .navMenuX{  
    //verticalMenu (rows)
    grid-template-rows: 0.1fr 0.1fr;
    display: grid;
  }
<style>



<script>
    function loadNav(){
      console.log("loaded navigation menu.");
      for(i=0; i<5; i++){
        document.getElementById(i).style.display = "none";
      }
    }
    clicks=0;
    lastparam = "none";
    function clickNavMenu(param){
      if(lastparam != param) clicks=0;
      if(clicks==2) clicks=0;
      console.log("clicked item"+param+" in navMenu.");
      for(i=0; i<5; i++)
        document.getElementById(i).style.display = "none";
      if(clicks == 0)
        document.getElementById(param).style.display = "inline-block";
      clicks++;
      lastparam = param;
    }
  </script>

Можно ли добавить слои в div для всего документа?

Я хочу, чтобы div: 

  <div id=i>
    <div class=navLink>Link 0</div>
    <div class=navLink>Link 1</div>
    <div class=navLink>Link 2</div>
  </div>

находиться во втором слое документа, Таким образом, все, кроме этих div, находятся на первом уровне.

Тогда, наконец, я хочу, чтобы все элементы второго слоя были выше всех элементов первого слоя.

Кто-нибудь делал подобные попытки и знает, где искать?

1 Ответ

0 голосов
/ 02 июля 2019

Я добавил класс для этого div. 

  <div class=navGroup id=i> // < < < < < fix
    <div class=navLink>Link 0</div>
    <div class=navLink>Link 1</div>
    <div class=navLink>Link 2</div>
  </div>

Этот класс имеет абсолютную позицию 

  .navGroup {
    padding: 5px;
    background-color: rgba(245,245,245, 0.6);
    border-left: 2px solid rgba(130,180,220, 0.5);
    border-right: 2px solid rgba(130,180,220, 0.5);
    border-bottom: 2px solid rgba(130,180,220, 0.5);
    position: absolute; // < < < < < fix
    width: 20%;
  }

Текст ниже (основной) теперь имеет относительную позицию 

main {
  padding-top: 10px;
  position: relative; // < < < < < fix
}

это решило проблему полностью.

...