Как лучше сделать такое меню

371

23 июня 2018, 18:30

Собственно вот макет и в планшетно-мобильном меню элементы с шапки должны появляться в блоке меню, как лучше сделать так, потому что я попробовал позиционировать эти элементы абсолютно указав в пикселях свойство bottom, глянул на мобиле, все съехало, думаю это не лучший вариантю Нормально ли будет в html сверстать эти элементы отдельно в блоке меню и показывать только на маленьких экранах, а старые скрывать? Нормальная ли это практика или костыль? [

<header class="header wrapper">
    <div class="topline">
        <div class="logo">
            <a href="#">
                <img class="logo-img" src="image/-e-logo.png" alt="logo">
            </a>
        </div>
        <nav class="menu" id="menu">
            <ul class="menu-list" >
                <li class="menu-list__item">
                    <a class="menu-list__item-link" href="#">Раздел №1</a>
                </li>
                <li class="menu-list__item">
                    <a class="menu-list__item-link" href="#">Раздел №2</a>
                </li>
                <li class="menu-list__item">
                    <a class="menu-list__item-link" href="#">Раздел №3</a>
                </li>
                <li class="menu-list__item">
                    <a class="menu-list__item-link" href="#">Раздел №4</a>
                </li>
                <li class="menu-list__item">
                    <a class="menu-list__item-link" href="#">Раздел №5</a>
                </li>
            </ul>
        </nav>
        <div class="compare-wrapper">
            <a href="#" class="compare">
                <i class="fa fa-list-ul"></i>
                <span class="compare__text">Сравнение</span>
            </a>
        </div>
        <div class="lk-wrapper">
            <button class="lk">Личный кабинет</button>
        </div>
        <div class="header__phone">
            <a class="header__phone-link" href="tel:+7 000 000-00-00">+7 000 000-00-00</a>
            <div class="phone-btn">
                <a class="fa fa-phone phone-btn__link" aria-hidden="true" href="tel:+70000000000"></a>
            </div>
        </div>
        <div class="menu-btn" id="menu-btn">
            <i class="fa fa-bars" aria-hidden="true"></i>
            <i class="fa fa-times" aria-hidden="true"></i>
        </div>
    </div>
</header>

Answer 1

Вот так адаптируют меню ....

Полностью готово, кроме того что надо скрывать сложенные элементы: вставлять кнопки и подключать js ...

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  text-decoration: none; 
  max-width: 100%; 
} 
 
.element { 
  display: flex; 
  padding-left: 20px; 
  padding-top: 6px; 
  padding-bottom: 6px; 
  align-items: center; 
  border: 1px solid blue; 
} 
 
.top { 
  width: 100%; 
  display: flex; 
  justify-content: space-between; 
  padding-right: 20px; 
  align-items: center; 
} 
 
.menu, 
ul { 
  display: flex; 
  align-items: center; 
} 
 
.menu ul { 
  display: flex; 
} 
 
ul li { 
  margin: 0 20px; 
} 
 
.logo, 
ul li a, 
.user_panel span { 
  font-size: 1.3em; 
  vertical-align: middle; 
  align-items: center; 
} 
 
.logo { 
  font-family: 'Cookie', cursive; 
  font-size: 2.4em; 
  text-transform: capitalize; 
} 
 
.menu { 
  width: 90%; 
  justify-content: space-between 
} 
 
ul li a, 
.user__panel span { 
  font-family: 'Roboto Mono', monospace; 
} 
 
.fa { 
  padding: 0 10px; 
} 
 
.lk { 
  border: 1px solid #ccc; 
  padding: 0 5px; 
  border-radius: 6px; 
} 
 
.fa-sort-desc { 
  font-size: 12px; 
  padding: 3px; 
  transform: translate(0, -3px); 
} 
 
@media (max-width:1300px) { 
  ul li a, 
  .user__panel span { 
    font-size: 1em; 
  } 
  ul li { 
    margin: 0 6px; 
  } 
} 
 
@media (max-width:1044px) { 
  ul li a, 
  .user__panel span { 
    font-size: 12px; 
  } 
} 
 
@media (max-width:850px) { 
  .element { 
    display: flex; 
    position: relative; 
    height: 30px; 
    justify-content: space-between; 
  } 
  .menu { 
    width: 100%; 
    padding-left: 100px; 
  } 
  .user__panel { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    border: 1px solid red; 
    position: absolute; 
    right: 0; 
    top: 100%; 
    padding: 10px; 
  } 
  .user__panel span { 
    display: block; 
    margin-top: 4px; 
  } 
} 
 
@media (max-width:640px) { 
  .element { 
    background: #fbfbfb; 
    border: none; 
  } 
  .menu { 
    padding-left: 0; 
    background: #fff; 
    flex-direction: column; 
    height: auto; 
    width: 320px; 
    position: absolute; 
    top: 100%; 
    right: 0; 
    justify-content: flex-start; 
    background: #fbfbfb; 
  } 
  .menu ul { 
    flex-direction: column; 
    height: auto; 
    justify-content: flex-start; 
    width: 100%; 
    align-content: flex-start; 
    text-align: left; 
  } 
  .menu ul li { 
    width: 95%; 
    padding: 3px 0; 
  } 
  .user__panel { 
    display: block; 
    position: static; 
    border: none; 
    width: calc(100% - 20px); 
  } 
  .tel { 
    float: left; 
  } 
  .lk { 
    border: none; 
  } 
  .lk .fa { 
    display: none; 
  } 
  .user__panel span { 
    padding-left: 0; 
  } 
  .user__panel .fa { 
    padding: 0 2px; 
  } 
  .fa-whatsapp { 
    margin-left: 10px; 
  } 
  ul li a, 
  .user__panel span { 
    font-size: 16px; 
  } 
}

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
<link href="https://fonts.googleapis.com/css?family=Cookie|Courgette|Roboto+Mono" rel="stylesheet"> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
<link rel="stylesheet" href="style.css"> 
</head> 
 
<body> 
  <div class="element"> 
    <div class="top"> 
      <div class="logo"> 
        company 
      </div> 
 
      <div class="menu"> 
        <ul> 
          <li><a href="#">Раздел1</a></li> 
          <li><a href="#">Раздел2</a></li> 
          <li><a href="#">Раздел3</a></li> 
          <li><a href="#">Раздел4</a></li> 
          <li><a href="#">Раздел5</a></li> 
        </ul> 
        <div class="user__panel"> 
          <span><i class="fa fa-list-ul" aria-hidden="true"></i>Сравнение</span> 
          <span class="lk">Личный кабинет <i class="fa fa-sort-desc" aria-hidden="true"></i></span> 
          <span class="tel">+7 000 000-00-00</span> 
          <span><i class="fa fa-whatsapp" aria-hidden="true"></i></span> 
        </div> 
      </div> 
    </div> 
    <div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Автоматическое сворачивание объекта

Есть меню с выпадающим списком, выпадающий список появляется по клику (slideToggle()), как сделать чтобы подменю автоматически сворачивался обратно...

353

jQuery