Как мне центрировать div в ТЕЛЕ, а не в родительском

#html #css #drop-down-menu

#HTML #css #выпадающее меню

Вопрос:

У меня есть липкое главное меню с вкладкой «категории», которая раскрывается в меню «categoriesDropdown» при наведении на него курсора мыши.

Мне нужно, чтобы выпадающее меню имело ширину экрана и было центрировано на экране.
Мне нужно, чтобы выпадающее меню было в нижней части главного меню.

Единственная проблема заключается в том, что я не могу центрировать выпадающее меню в теле. Я могу разместить его только относительно родительского div (категории) Код, который я использую, показан ниже.

 <div class="categories">
   <a>Categories</a>
   <div id="categoriesDropdown"></div>
</div>

css

 .categories {
    padding-left: 20px;
    padding-right: 20px;
    height: 45px;
    display: inline-block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#categoriesDropdown {
    position: absolute;
    background: #1d1d1d;
    width: 100vw;
    height: 0px;
    z-index: -1;
    overflow: auto;
}

#categoriesDropdown.show {
    height: 500px;
}

Редактировать: это происходит, когда я пытаюсь влево: 0; вправо: 0; серый квадрат является выпадающим меню

1. Если я правильно понимаю, все, что вам нужно сделать, это поместить left:0 и right:0 в свой #categoriesDropdown, чтобы правильно его центрировать, и вы можете использовать top:0 и bottom: 0 для центрирования по вертикали, если это необходимо

2. Это центрирует его в середине категории div. Мой вопрос в том, как я могу центрировать его в середине тела.

Ответ №1:

Это сложно только с CSS, но здесь возможно решение с помощью jQuery и css. Я не уверен, поможет это вам или нет.

Тело

 <div class="categories">
  <a>Categories</a>
  <div id="categoriesDropdown" class="categoriesDropdown">  </div>

Css

 body{
  margin : 0px;
  padding : 0px;
  }
  .categories {
  padding-left: 20px;
  padding-right: 20px;
  height: 20px;
  display: inline-block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  cursor : pointer;
  top: 50px;
  position: absolute;
  }
  .categoriesDropdown {
  position: relative;
  background: #1d1d1d;
  width: 98vw;
  height: 0px;
  z-index:-1;
  overflow:auto;
  margin:0 auto;
  color:#fff;
  }
  .categoriesDropdown_show {
  height: 100px;
  }

Скрипт

 $(document).ready(function(){

  var c = $(".categories");
  var position = c.position();

     $(".categories").mouseenter(function(){
        $("#categoriesDropdown").appendTo('body');
         $(".categoriesDropdown").addClass("categoriesDropdown_show");
         $('#categoriesDropdown').css({'top':'calc(' position.top  'px   20px)'});
     });
     $(".categories").mouseleave(function(){
         $(".categoriesDropdown").removeClass("categoriesDropdown_show");
         $("#categoriesDropdown").appendTo('categories');
     });
  });

1. Вы также можете объявить var для класса ‘categories’ вместо высоты ’20 пикселей’. //$(‘#categoriesDropdown’).css({‘top’:’calc(‘ position.top ‘px 20px)’}); var h = c.height(); $(‘#categoriesDropdown’).css({‘top’:’calc(‘ position.top ‘px ‘ h ‘px)’});