3

Добрый день, уважаемые программисты!
Столкнулся с небольшой проблемой, по ТЗ нужно сделать адаптивное меню в шапке с небольшой тенью: Нормальное состояние

Но когда изменяется ширина окна и элементы списка начинают перескакивать, в освободившемся месте остается тень, как здесь: Не нормальное состояние

Пробовал сделать тень не тегу ul, а тегу li, либо a, но в таком случае получается у каждой кнопки своя тень, падающая в том числе и на соседнюю кнопку. Буду оч рад Вашим советам, как с этим справиться.
Код на jsbin - http://jsbin.com/zebiqaboki/edit?html,css,output
P.S. извиняюсь за такое колхозное объяснение))

1
  • А как по мне тень "налезающая" ну другие кнопки может сойти и за "фичу" =) Ну а если по сабжу - тут нужно оперировать шириной элемента, что достаточно сложно сделать без mediaquery. Хотя можно поиграться с относительной шириной.
    – alexoander
    17 апр 2017 в 11:40

1 ответ 1

4

У Вас 6 пунктов меню, соответственно, ширина должна быть 100%/6 = 16.6%, а вот ссылкам 100% ширины дать:

.top-menu-ul {
    margin: 0;
    padding: 0;
    height: 52px;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.65);
}
.top-menu-li {
    list-style-type: none;
    float: left;
    text-align: center;
    width: 16.6666%;
}
.top-menu-a {
    line-height: 52px;
    display: block;
    width: 100%;
    border-right: 1px solid #df4242;
    border-left: 1px solid #df4242;
    background-image: -moz-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%);
    text-decoration: none;
    font-size: 18px;
    color: white;
}
.top-menu-a:hover {
  background: #df4242;
}
  <div class="header-menu">
    <ul class="top-menu-ul">
      <li class="top-menu-li"><a href='#' class="top-menu-a">Компания</a></li>
      <li class="top-menu-li"><a href='#' class="top-menu-a">Каталог</a></li>
      <li class="top-menu-li"><a href='#' class="top-menu-a">Новости</a></li>
      <li class="top-menu-li"><a href='#' class="top-menu-a">Отзывы</a></li>
      <li class="top-menu-li"><a href='#' class="top-menu-a">Заявка</a></li>
      <li class="top-menu-li"><a href='#' class="top-menu-a">Контакты</a></li>
    </ul>
  </div>

Но нужно понимать, что на экранах в 320px - 768px это будет смотреться не очень красиво. Тогда лучше использовать медиазапросы:

.top-menu-ul {
    margin: 0;
    padding: 0;
    height: 52px;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.65);
}
.top-menu-li {
    list-style-type: none;
    float: left;
    text-align: center;
    width: 16.6666%;
}
.top-menu-a {
    line-height: 52px;
    display: block;
    width: 100%;
    border-right: 1px solid #df4242;
    border-left: 1px solid #df4242;
    background-image: -moz-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%);
    text-decoration: none;
    font-size: 18px;
    color: white;
}
.top-menu-a:hover {
  background: #df4242;
}

@media screen and (max-width:768px){
  .top-menu-li {
    display: block;
    width: 100%;
  }
}
  <div class="header-menu">
    <ul class="top-menu-ul">
      <li class="top-menu-li"><a href='#' class="top-menu-a">Компания</a></li>
      <li class="top-menu-li"><a href='#' class="top-menu-a">Каталог</a></li>
      <li class="top-menu-li"><a href='#' class="top-menu-a">Новости</a></li>
      <li class="top-menu-li"><a href='#' class="top-menu-a">Отзывы</a></li>
      <li class="top-menu-li"><a href='#' class="top-menu-a">Заявка</a></li>
      <li class="top-menu-li"><a href='#' class="top-menu-a">Контакты</a></li>
    </ul>
  </div>

6
  • В вашем примере сбоку есть "торчащий" белый кусочек ul. Или это особенности прорисовки именно встроенной тулзы.
    – alexoander
    17 апр 2017 в 11:38
  • @alexoander, "тулза" ? сейчас смотрите, просто если точнее быть то там не 16.6, а 16.6666 % принцип мне казалось был понятен
    – SVE
    17 апр 2017 в 11:43
  • 1
    @Elena большущее Вам спасибо, я прям влюбляюсь в это сообщество!)
    – TemTik
    17 апр 2017 в 11:50
  • 1
    @Elena Ну "тулзой" я называю тот виджет, который позволяет запускать html/css/js код прямо на сайте СО. Да - так все ок=) Спасибо
    – alexoander
    17 апр 2017 в 12:05
  • 1
    @TemTik Если ответ вам помог, пометьте его как правильный (галочка <--- прямо рядом с самим ответом под счетчиком голосов ).
    – alexoander
    17 апр 2017 в 12:06

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.