Интересная CSS форма навигации (шевроны) - PullRequest
Новая
       7

Интересная CSS форма навигации (шевроны)

1 голос
/ 27 января 2012

Сейчас я создаю довольно интересную форму навигации для сайта.Форма каждого элемента меню должна быть показана ниже:

enter image description here

Окончательная навигация будет выглядеть как расширенная версия этого:

enter image description here

Я думал, что будет интересным экспериментом сделать эти фигуры в CSS.CSS и HTML для одной из фигур стрелок находятся здесь: 

    .arrowEndOn {
        font-size: 10px; line-height: 0%; width: 0px;
        border-top: 11px solid #FFFFFF;
        border-bottom: 11px solid #FFFFFF;
        border-left: 5px solid transparent;
        border-right: 5px solid #FFFFFF;    
        float: left;
        cursor: pointer;
    }

    .arrowBulkOn {
        height: 20px;
        background: #FFFFFF;
        padding: 2px 5px 0px 0px;
        float: left;
        color: #000000;
        line-height: 14pt;
        cursor: pointer;
    }

    .arrowStartOn {
        font-size: 0px; line-height: 0%; width: 0px;
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-left: 5px solid #FFFFFF;
        border-right: 0px solid transparent;        
        float: left;
        cursor: pointer;
    }

    <div id="nav" class="navArrow" style="position: relative;">
        <div class="arrowEndOn" id="nav">&nbsp;</div>
        <div class="arrowBulkOn" id="nav">NAV</div>
        <div class="arrowStartOn" id="nav">&nbsp;</div>
    </div>

К каждому элементу навигации применено отрицательное смещение (которое я пропустил из демонстрации), поскольку он отображается для получения всех ихпокраснеть друг с другом.

Я управляю ролловерами и состояниями с помощью Javascript.

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

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

Я привел пример здесь - http://jsfiddle.net/spacebeers/S7hzu/1/

Красная граница имеет overflow: hidden;, а синяя - нет.]

У меня такой вопрос: Как я могу получить все всплывающие окна в строке, которая заполняет ширину содержащего элемента div, не опуская их на уровень.

Спасибо

Ответы [ 2 ]

1 голос
/ 27 января 2012

Добавить отрицательное поле к каждой стрелке: 

.navArrow {
  float: left;
  margin-left: -8px;
}

Демо: http://jsfiddle.net/S7hzu/2/

0 голосов
/ 25 мая 2017

Flexbox

Вы можете использовать этот пример

https://codepen.io/WBear/pen/pPYrwo

, он работает в новых браузерах, для поддержки старых необходимо внести некоторые изменения.

HTML: 

<div class="content">
<div class="as1">
  <a href="#">NAV</a>
  </div>
 <div class="as2">
   <a href="#">NAV</a>
   </div>
  <div class="as3">
   <a href="#">NAV</a>
   </div>
  </div>

CSS: 

 .content {
  margin-top: 10px;
  width: 100%;
  display: inline-flex;

}

.as1, .as2, .as3 {
  height: 70px;
  min-width: 8%;
  max-width: 100%;
  background-color: black;
  position: relative;
  display: inline-flex;
  text-align: center;
  flex-wrap: wrap;
  flex-grow: 1;

}

.as1 a, .as2 a, .as3 a {
  text-decoration: none;
  display: inline-flex;
  color: white;
  margin: auto;
  font-size: 14pt;

}

.as1:after {
  content: "";
  position: absolute;
  right: 4px;
  border-top: 35px solid transparent;
  border-left: 25px solid black;
  border-bottom: 35px solid transparent;
  z-index: 2;

}

.as2 {
  background-color: grey;
  margin-left: -29px;


}
.as2:after {
  content: "";
  position: absolute;
  right: 4px;
  border-top: 35px solid transparent;
  border-left: 25px solid grey;
  border-bottom: 35px solid transparent;
  z-index: 3;

}

.as3 {
  background-color: #A9A9A9;
  margin-left: -29px;
}
...