Выравнивание выпадающего меню CSS с контентом - PullRequest
Новая
       7

Выравнивание выпадающего меню CSS с контентом

0 голосов
/ 29 августа 2018

В настоящее время я пытаюсь создать (отзывчивую) панель навигации, и хотя я уже много раз с ней справлялся, я не могу найти свой путь через нее. :(

У меня 2 вопроса на данный момент. 1) На широком экране я хочу расположить раскрывающийся список под заголовком «кнопки». 2) На экране смартфона / планшета хочу сделать выпадающее меню, при появлении нажать на остальные «кнопки» заголовков и не закрывать их.

Около 1, я попытался изменить атрибуты right и left в раскрывающемся списке, но это приводит к появлению боковых сторон экрана независимо от того, какие изменения я вносил в раскрывающийся список и родительский элемент position.

Около 2, я запутался с position, но все равно не могу заставить его работать так, как если бы он был статичным.

В идеале я хотел бы использовать только HTML и CSS.

Вот демоверсия: https://jsfiddle.net/SteliosKts/01o6cem5/10/

PS. Извините, если это репост, просто я не могу решить свой пролбем, хотя проверил большинство относительных тем

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Просто удалите абсолютное значение отсюда, и вы увидите выпадающий список на большом экране под вашей кнопкой, а на маленьком экране - под кнопкой: 

.dropdownItem:hover .dropdownList {display: block;/*   position: absolute; */}
0 голосов
/ 29 августа 2018

Вам необходимо:

  1. удалить position:absolute; из .dropdownItem:hover .dropdownList.
  2. изменить display: block; на display: inline-block; в .dropdownList.
  3. удалить max-height: 55px in li:nth-child(n + 2)
  4. Добавить flex-basis: 30px; для мобильного просмотра. 

html,
body {
  font-size: 100%;
  margin: 0px;
  padding: 0px;
  height: 100vh;
  width: 100vw;
  align-content: center;
  text-align: center;
  overflow-y: auto;
}

* {
  box-sizing: border-box;
}

/*------------Top Header & Logo------------*/

#background_Header {
  display: inline-block;
  background-color: #9a999b;
  width: 350px;
  height: 100px;
}

#vertical_top_header_placeHolder {
  float: left;
  background-color: #9a999b;
  width: 100%;
  height: 45px;
  position: absolute;
}

/*------------------------------------------*/

/*-------------------Navgiation Bar---------------*/

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  /*border: 1px solid black;*/
  padding-left: 0px;
}

li {
  /* required for logo positioned in center */
  flex-basis: 90px;
  padding-top: 10px;
  padding-right: 0px;
  /*border: 1px solid black;*/
}

li a:hover {
  background-color: #f1f1f1
}

li:first-child,
li:nth-child(n + 5) {
  order: 3;
}

li:first-child {
  flex-basis: auto;
  z-index: 1;
}

li:nth-child(n + 2) {
  padding-top: 65px;
}

li:nth-child(6) {
  padding-top: 55px;
}

.dropdownItem:hover .dropdownList {
  display: inline-block;
}

.dropdownButton {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: black;
}

.dropdownList {
  display: none;
  position: relative;
  background-color: #d6d6d6;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdownList a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/*---------------------------------------------------*/

/*---------------Smartphone Header Style---------------*/

@media only screen and (max-width: 600px) {
  li:first-child {
    background-color: #9a999b;
  }
  li {
    flex-basis: 30px;
  }
  #vertical_top_header_placeHolder {
    display: none;
  }
}

/*-----------------------------------------------------*/

/*---------------Vertical Navigation Style---------------*/

@media only screen and (max-width: 900px) {
  ul {
    flex-direction: column;
  }
  .dropdownItem {}
  .dropdownButton {}
  .dropdownList {
    margin: 0 auto;
    width: 100%;
  }
  li {
    flex-basis: 30px;
  }
  li:first-child,
  li:nth-child(n + 5) {
    order: 0;
  }
  li:nth-child(n + 2) {
    padding-top: 10px;
  }
}

/*--------------------------------------------------------*/
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&subset=latin,greek" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,greek-ext,greek" rel="stylesheet" type="text/css" />

  </head>

  <body>
    <!--<div id="vertical_Conteiner">-->
    <div id="vertical_top_header_placeHolder"></div>
    <nav>
      <ul>
        <li>
          <div id="background_Header">

          </div>
        </li>
        <li class="dropdownItem">
          <a class="dropdownButton" href="javascript:void(0)">
                    Team 1
                </a>
          <div class="dropdownList">
            <a href="#">T1I1</a>
            <a href="#">T1I2</a>
            <a href="#">T1I3</a>
            <a href="#">T1I4</a>
          </div>
        </li>
        <li class="dropdownItem">
          <a class="dropdownButton" href="javascript:void(0)">
                    Team 2
                </a>
          <div class="dropdownList">
            <a href="#">T2I1</a>
            <a href="#">T2I2</a>
            <a href="#">T2I3</a>
            <a href="#">T2I4</a>
            <a href="#">T2I5</a>
          </div>
        </li>
        <li class="dropdownItem">
          <a class="dropdownButton" href="javascript:void(0)">
                    Team 3
                </a>
          <div class="dropdownList">
            <a href="#">T3I1</a>
            <a href="#">T3I2</a>
            <a href="#">T3I3</a>
            <a href="#">T3I4</a>
          </div>
        </li>
        <li class="dropdownItem">
          <a class="dropdownButton" href="javascript:void(0)">
                    Team 4
                </a>
          <div class="dropdownList">
            <a href="#">T4I1</a>
            <a href="#">T4I2</a>
          </div>
        </li>
        <li class="dropdownItem">
          <a class="dropdownButton" href="javascript:void(0)">
                    Team 5 BigWord
                </a>
          <div class="dropdownList">
            <a href="#">T5I1</a>
            <a href="#">T5I2</a>
          </div>
        </li>
        <li class="dropdownItem">
          <a class="dropdownButton" href="javascript:void(0)">
                    Team 6
                </a>
          <div class="dropdownList">
            <a href="#">T6I1</a>
            <a href="#">Team6_BigItem2</a>
            <a href="#">T6I3</a>
            <a href="#">T6I4</a>
            <a href="#">T6I5</a>
          </div>
        </li>
      </ul>
    </nav>
    <article>
      <div>

      </div>
    </article>
  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...