Шаблон новостей, как макет меню - PullRequest
Новая
       13

Шаблон новостей, как макет меню

0 голосов
/ 10 мая 2018

Я пытаюсь создать меню, которое генерируется динамически. Его структура похожа на газетный шаблон. Я провел некоторое исследование и узнал, что с помощью css flexbox мы можем достичь чего-то подобного. Однако я до сих пор не могу этого достичь. Это желаемый вид, который я хочу: - enter image description here

Чтобы повторить проблему: - нажмите на пункт меню «Билар» -> проверьте меню -> 4-й пункт меню, как ожидается, будет немного вверх, но снизится. Ниже приведена ссылка на кодовый блок и мой код. Любая помощь приветствуется.

Нажмите эту ссылку Codepen, чтобы увидеть текущий код 

$font-stack:    OpenSans, Helvetica, sans-serif;

$primary: #e50000;
$primary-hover: #ca0000;
$text-color: #555555; 
$white: #ffffff;

$graphic-grey-color: #e1e1e1;
$background-grey-color: #f5f5f5;
$main-dark-color: #202020;
$form-border-color: #dddddd;
$form-active-border-color: #999999;

$navbar-light-color: $main-dark-color;
$link-hover-color: $white;
$link-hover-decoration: none;
$nav-tabs-link-active-bg: $primary;
$navbar-brand-padding-y: 0rem;
$navbar-nav-link-padding-x: 0.9375rem;
$nav-link-padding-y: 0rem;

.header-navigation {
    height: 80px;
    border-bottom: 2px solid $primary;
    .header-brand{
        margin-right: 1.4375rem;
        height: 100%;
    }
}

.header-menu{
    height: 100%;
}

.header-menu-item{
    font-family: $font-stack;
    height: 100%;
    color: $main-dark-color;
    &:hover { 
        background-color: $primary;
    }
    + .-collapse{
        z-index: 1000;
        display: none;
        position: absolute;
        top: 80px;
        left: 0px;
        // display: none;
        opacity: 0;
        .menu-item-level2 {
            width: 100vw;
            margin: auto;
            .-level2-main-section{
                padding: 0px;
                background-color: $background-grey-color;
                min-height: 280px;
    
                .-level2-main-section-row{
                    max-width: 100%;    
                    text-align: center;
                    margin: 30px 165px 50px 165px;
                    .-level2-menu-column{
                        padding: 0px;
                        text-align: left;
                        // .-level2-menu-container{
                            margin-bottom: 30px;
                            .-heading{
                                margin-bottom: 10px;
                                color: $main-dark-color;
                                font-size: 20px;
                                font-weight: bold;
                                line-height: 1.5;
                            }
                            .-subitems{
                                color: $text-color;
                                font-size: 16px;
                                line-height: 1.88;
                            }
                        // }
                    }
                }
            }
            .-level2-side-section{
                margin: auto;
                padding: 20px;
                background-color: $graphic-grey-color;
                min-height: 280px;
                .-info{
                    margin-bottom: 60px;
                    .-info-text{
                        margin-top: 10px;
                        line-height: 1.5;
                        font-size: 20px;
                        color: $text-color;
                        font-weight: normal;
                    }
                }
            }
        }
    }

}

.header-menu-item.active{
    background-color: $primary;
    color: $white;
    + .-collapse{
        display: block;
        opacity: 1;
        transition: opacity 500ms linear;
    }
}

.header-menu-list {
    height: 100%;
}

.navbar{
    padding: 0px 0px 0px 30px !important;
    color: $text-color;
}

.header-brandname{
    margin: 10px 0px;
}

.header-logo{
    height: 100%;
    padding: 0px 30px;
    border-left: 1px solid $graphic-grey-color;
}

Ответы [ 3 ]

0 голосов
/ 10 мая 2018

Вы можете использовать несколько столбцов для этого макета. Я добавил в последний, пожалуйста, чек 

.header-navigation {
  height: 80px;
  border-bottom: 2px solid #e50000;
}
.header-navigation .header-brand {
  margin-right: 1.4375rem;
  height: 100%;
}

.header-menu {
  height: 100%;
}$font-stack: OpenSans, Helvetica, sans-serif;

$primary: #e50000;
$primary-hover: #ca0000;
$text-color: #555555;
$white: #ffffff;

$graphic-grey-color: #e1e1e1;
$background-grey-color: #f5f5f5;
$main-dark-color: #202020;
$form-border-color: #dddddd;
$form-active-border-color: #999999;

$navbar-light-color: $main-dark-color;
$link-hover-color: $white;
$link-hover-decoration: none;
$nav-tabs-link-active-bg: $primary;
$navbar-brand-padding-y: 0rem;
$navbar-nav-link-padding-x: 0.9375rem;
$nav-link-padding-y: 0rem;

.header-navigation {
  height: 80px;
  border-bottom: 2px solid $primary;
  .header-brand {
    margin-right: 1.4375rem;
    height: 100%;
  }
}

.header-menu {
  height: 100%;
}

.header-menu-item {
  font-family: $font-stack;
  height: 100%;
  color: $main-dark-color;
  &:hover {
    background-color: $primary;
  }
  + .-collapse {
    z-index: 1000;
    display: none;
    position: absolute;
    top: 80px;
    left: 0px;
    // display: none;
    opacity: 0;
    .menu-item-level2 {
      width: 100vw;
      margin: auto;
      .-level2-main-section {
        padding: 0px;
        background-color: $background-grey-color;
        min-height: 280px;

        .-level2-main-section-row {
          max-width: 100%;
          text-align: center;
          margin: 30px 165px 50px 165px;
          .-level2-menu-column {
            padding: 0px;
            text-align: left;
            // .-level2-menu-container{
            margin-bottom: 30px;
            .-heading {
              margin-bottom: 10px;
              color: $main-dark-color;
              font-size: 20px;
              font-weight: bold;
              line-height: 1.5;
            }
            .-subitems {
              color: $text-color;
              font-size: 16px;
              line-height: 1.88;
            }
            // }
          }
        }
      }
      .-level2-side-section {
        margin: auto;
        padding: 20px;
        background-color: $graphic-grey-color;
        min-height: 280px;
        .-info {
          margin-bottom: 60px;
          .-info-text {
            margin-top: 10px;
            line-height: 1.5;
            font-size: 20px;
            color: $text-color;
            font-weight: normal;
          }
        }
      }
    }
  }
}

.header-menu-item.active {
  background-color: $primary;
  color: $white;
  + .-collapse {
    display: block;
    opacity: 1;
    transition: opacity 500ms linear;
  }
}

.header-menu-list {
  height: 100%;
}

.navbar {
  padding: 0px 0px 0px 30px !important;
  color: $text-color;
}

.header-brandname {
  margin: 10px 0px;
}

.header-logo {
  height: 100%;
  padding: 0px 30px;
  border-left: 1px solid $graphic-grey-color;
}

.menu-wrap {
  display: block;
}

.row.-level2-main-section-row {
  display: block;
  column-count: 3;
}
.-level2-menu-column {
  display: block;
}


.header-menu-item {
  font-family: OpenSans, Helvetica, sans-serif;
  height: 100%;
  color: #202020;
}
.header-menu-item:hover {
  background-color: #e50000;
}
.header-menu-item + .-collapse {
  z-index: 1000;
  display: none;
  position: absolute;
  top: 80px;
  left: 0px;
  opacity: 0;
}
.header-menu-item + .-collapse .menu-item-level2 {
  width: 100vw;
  margin: auto;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section {
  padding: 0px;
  background-color: #f5f5f5;
  min-height: 280px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section .-level2-main-section-row {
  max-width: 100%;
  text-align: center;
  margin: 30px 165px 50px 165px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section .-level2-main-section-row .-level2-menu-column {
  padding: 0px;
  text-align: left;
  margin-bottom: 30px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section .-level2-main-section-row .-level2-menu-column .-heading {
  margin-bottom: 10px;
  color: #202020;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section .-level2-main-section-row .-level2-menu-column .-subitems {
  color: #555555;
  font-size: 16px;
  line-height: 1.88;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-side-section {
  margin: auto;
  padding: 20px;
  background-color: #e1e1e1;
  min-height: 280px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-side-section .-info {
  margin-bottom: 60px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-side-section .-info .-info-text {
  margin-top: 10px;
  line-height: 1.5;
  font-size: 20px;
  color: #555555;
  font-weight: normal;
}

.header-menu-item.active {
  background-color: #e50000;
  color: #ffffff;
}
.header-menu-item.active + .-collapse {
  display: block;
  opacity: 1;
  transition: opacity 500ms linear;
}

.header-menu-list {
  height: 100%;
}

.navbar {
  padding: 0px 0px 0px 30px !important;
  color: #555555;
}

.header-brandname {
  margin: 10px 0px;
}

.header-logo {
  height: 100%;
  padding: 0px 30px;
  border-left: 1px solid #e1e1e1;
}

.menu-wrap {
  display: block;
}

.row.-level2-main-section-row {
  display: block;
  column-count: 3;
}

.-level2-menu-column {
  display: block;
}
<header class="header">
    <nav class="header-navigation navbar navbar-expand-lg">
        <a class="header-brand navbar-brand d-flex align-items-center pull-left" href="#">
            <img src="/static/images/fc-logo.svg" alt="brand-logo">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-navigation" aria-controls="header-navigation"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="header-menu collapse navbar-collapse" id="header-navigation">
            <ul class="header-menu-list navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="header-menu-item nav-link d-flex align-items-center" href="#">
                        <span>Bilar</span>
                    </a>
                    <div class="-collapse">
                        <div class="menu-item-level2 row">
                            <div class="-level2-main-section col-lg-10">
                                <div class="menu-wrap">
                                        <div class="-level2-main-section-row row align-items-start">
                                                <div class="-level2-menu-column -level2-menu-container col-lg-4">
                                                    <div class="-heading">Nya bilar</div>
            
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                </div>
                                                <div class="-level2-menu-column -level2-menu-container col-lg-4">
                                                    <div class="-heading">Nya bilar</div>
            
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                </div>
                                                <div class="-level2-menu-column -level2-menu-container col-lg-4">
                                                    <div class="-heading">Nya bilar</div>
            
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                </div>
                                                <div class="-level2-menu-column -level2-menu-container col-lg-4">
                                                    <div class="-heading">Nya bilar</div>
            
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                </div>
                                            </div>
                                </div>
                            </div>
                            <div class="-level2-side-section col-lg-2">
                                <div class="-info">
                                    <a class="-info-img" href="#">
                                        <img src="/static/images/car.png" alt="info-image-1">
                                    </a>
                                    <div class="-info-text">
                                        Vilken Yaris ar du?
                                    </div>
                                </div>
                                <div class="-info">
                                    <a class="-info-img" href="#">
                                        <img src="/static/images/car2.png" alt="info-image-2">
                                    </a>
                                    <div class="-info-text">
                                        Basta familjebilen - 7 sittplatser!
                                    </div>
                                </div>
                            </div>
                        </div>
                </li>
                <li class="nav-item ">
                    <a class="header-menu-item nav-link d-flex align-items-center" href="#">
                        <span>Finansiering</span>
                    </a>
                </li>
                <li class="nav-item ">
                    <a class="header-menu-item nav-link d-flex align-items-center" href="#">
                        <span>Service</span>
                    </a>

                </li>
                <li class="nav-item ">
                    <a class="header-menu-item nav-link d-flex align-items-center" href="#">
                        <span>Om oss</span>
                    </a>

                </li>
                <li class="nav-item ">
                    <a class="header-menu-item nav-link d-flex align-items-center" href="#">
                        <span>Min Toyota</span>
                    </a>
                </li>
            </ul>
            </div>
            <a href="#" class="header-logo pull-right  d-flex align-items-center">
                <img src="/static/images/toyota-logo.jpg" alt="brand-logo">
            </a>
    </nav>
</header>

Ссылка

0 голосов
/ 10 мая 2018

Один способ использует CSS column, но широко не поддерживается. Вы можете проверить его совместимость браузера здесь.

Если вы решили это сделать, помните, что вы не можете комбинировать его с flex. Следовательно, для этой части вашей страницы нет классов Flex Bootstrap.

  1. Используйте column-count: #x для количества столбцов в строке.
  2. Используйте break-inside: avoid;, чтобы избежать разрыва столбца. 

.-level2-main-section-row {
  border: 1px solid;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  column-count: 3;
}

.-level2-menu-column {
  margin-bottom: 10px;
  border: 1px solid red;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
<div class="menu-wrap">
  <div class="-level2-main-section-row  align-items-start">
    <div class="-level2-menu-column -level2-menu-container ">
      <h1 class="-heading">Nya bilar</h1>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
    </div>
    <div class="-level2-menu-column -level2-menu-container ">
      <h1 class="-heading">Nya bilar</h1>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-heading">Nya bilar</div>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-heading">Nya bilar</div>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-heading">Nya bilar</div>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-heading">Nya bilar</div>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
    </div>
    <div class="-level2-menu-column -level2-menu-container ">
      <h1 class="-heading">Nya bilar</h1>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
    </div>
    <div class="-level2-menu-column -level2-menu-container ">
      <h1 class="-heading">Nya bilar</h1>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
    </div>
    <div class="-level2-menu-column -level2-menu-container ">
      <h1 class="-heading">Nya bilar</h1>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
    </div>
    <div class="-level2-menu-column -level2-menu-container">
      <h1 class="-heading">Nya bilar</h1>
      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
    </div>
  </div>
</div>

Проверьте это ручка Вы можете установить разные столбцы для каждой страницы, используя media queries.

Обновление

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

Эта статья является хорошим чтением на эту тему.

0 голосов
/ 10 мая 2018

Ваш класс col-lg-4 использует следующий отзывчивый media query: 

@media (min-width: 992px) {
.col-lg-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 25%;
    max-width: 33.333333%;
}
}

что означает, что когда ширина вашего браузера превышает 992px, эти столбцы занимают 33,33% ширины и должны составлять 25% (если вы хотите 4 столбца)

РЕДАКТИРОВАНИЕ: Только что видел ваш скриншот. css flex не позволит вам делать то, что вы хотите. Если содержимое является фиксированным, вы можете просто добавить свое 4-е меню в первый контейнер, удалив класс col-lg-4, как в этом codepen (обратите внимание, я добавил встроенный маргинальный верх, чтобы он выглядел лучше.)

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

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

Похожие темы

...