Адаптивная, плавная навигация по переменным элементам с помощью CSS

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

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

Использование ширины в процентах

Фиксированная ширина не может постоянно заполнять отзывчивый контейнер, как показано на рисунке ниже.

Поэтому нам нужно использовать проценты для достижения этой цели. Проценты являются распространенным методом для достижения плавного расположения сетки в адаптивных проектах и ​​пригодятся здесь.

Например, примите во внимание приведенный ниже знакомый HTML:

<nav>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="jobs.html">Jobs</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

И мы добавим следующий CSS:

 nav {
    width: 100%;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-right: none;
}

nav ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
    float: left;
    text-align: center;
    border-left: 1px solid #fff;
    border-right: 1px solid #ccc;
    width: 16.6667%; /* fallback for non-calc() browsers */
    width: calc(100% / 6);
    box-sizing: border-box;
}

nav ul li:first-child {
    border-left: none;
}

nav ul li a {
    display: block;
    text-decoration: none;
    color: #616161;
    padding: 10px 0;
}

Области примечания являются:

• Элемент <nav>width: 100%
• Элементы <li>width: calc(100% / 6); и width: 16.6667%; , Здесь пункты меню разделены по элементу <nav> Порядок, в котором перечислены эти свойства, важен для того, чтобы браузеры, поддерживающие calc() Браузеры без поддержки calc() Я склонен использовать calc() Таким образом, мне не нужно беспокоиться о том, включать ли повторяющиеся десятичные разряды.
• box-sizing: border-box; объявлен на элементах <li> Это заставляет свойство widthborder-leftborder-right Без использования этого свойства элементы <li><nav><li> Многие предпочитают устанавливать box-sizing: border-box; ко всем элементам, чтобы легко управлять шириной, как полагает Пол Айриш .

Результат добавления этих стилей показан в демонстрации CodePen ниже:

 nav {
    display: table;
    table-layout: fixed;
    width: 100%;
}

nav ul {
    display: table-row;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
    display: table-cell;
    text-align: center;
}

nav ul li a {
    display: block;
}

 nav {
    width: 100%;
}

nav ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
    flex-grow: 1;
    text-align: center;
}

nav ul li a {
    display: block;
}