Статьи

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

  1. Использование ширины в процентах
  2. Что если мы добавим или удалим элементы?
  3. (Пере) введение макета таблицы
  4. Будущее: Flexbox

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

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

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

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

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

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

<nav> <ul> <li> <a href="home.html"> Главная страница </a> </ li> <li> <a href="about.html"> О программе </a> </ li> <li> <a href="services.html"> Услуги </a> </ li> <li> <a href="products.html"> Продукты </a> </ li> <li> <a href = "jobs.html"> Вакансии </a> </ li> <li> <a href="contact.html"> Связаться </a> </ li> </ ul> </ nav>

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

nav {ширина: 100%; фон: # f0f0f0; граница: 1px solid #ccc; Граница-право: нет; } nav ul {переполнение: скрыто; поле: 0; отступы: 0; } nav ul li {стиль списка: нет; плыть налево; выравнивание текста: по центру; border-left: 1px solid #fff; border-right: 1px solid #ccc; ширина: 16,6667%; / * отступление для браузеров, не относящихся к calc () * / width: calc (100% / 6); размер коробки: бордюр; } nav ul li: first-child {border-left: none; } nav ul li a {display: block; текстовое оформление: нет; цвет: # 616161; отступы: 10px 0; }

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

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

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

Увидеть перо Жидкостная навигация с фиксированной шириной по SitePoint ( @SitePoint ) на CodePen ,

Откройте его в новом окне и проверьте его на отзывчивость. Желаемый вид достигается, и это гибкий.

Что если мы добавим или удалим элементы?

Вот что произойдет, если мы удалим один элемент из навигации с нашим текущим CSS на месте:

Увидеть перо Жидкость ширина по SitePoint ( @SitePoint ) на CodePen ,

Как видите, справа есть пустое место, где находился последний элемент навигации.

Как насчет того, чтобы добавить дополнительный элемент навигации?

Увидеть перо Навигация по ширине жидкости, один дополнительный элемент по SitePoint ( @SitePoint ) на CodePen ,

Теперь последний элемент навигации переносится на второй ряд.

Понятно, что это не удовлетворяет всем нашим требованиям. JavaScript можно использовать для подсчета количества пунктов меню, определения процента и применения значений ширины с помощью циклического перемещения по элементам <li>. Тем не менее, я всегда неохотно использую JavaScript для определения макета, если нет других вариантов. Плюс, это не была бы статья CSS, если бы я собирался описать, как это сделать! Вернуться к чертежной доске, это ...

(Пере) введение макета таблицы

Не бойтесь, я не защищаю использование HTML-таблицы с возвратом 90-х годов для макета; это было бы семантически неправильно, конечно. Тем не менее, есть отображать значения которые позволяют элементам действовать как таблица.

Это означает, что более раннюю структуру HTML все еще можно использовать со следующим CSS:

nav {display: table; раскладка стола: фиксированная; ширина: 100%; } nav ul {display: table-row; поле: 0; отступы: 0; } nav ul li {стиль списка: нет; дисплей: таблица-ячейка; выравнивание текста: по центру; } nav ul li a {display: block; }

Установка свойства display позволяет элементу <nav> выступать в качестве таблицы, <ul> - строке и <li> - ячейке таблицы. Обратите внимание на включение макета таблицы: фиксированное объявление, которое применяет равную ширину к каждому пункту меню. Это может быть удалено, но колебания длины текста могут привести к тому, что таблица выйдет из равновесия, поэтому подходите осторожно.

Вот демонстрация с кнопками, позволяющими вам добавлять / удалять элементы:

Увидеть перо Навигация по ширине жидкости Использование дисплея: таблица по SitePoint ( @SitePoint ) на CodePen ,

Это может быть не самый чистый подход (извинения за ненавистники таблицы), но это работает, и это просто. Поддержка браузера тоже хорошая ,

Будущее: Flexbox

Flexbox является выдающимся кандидатом на замену этого метода в будущем, поскольку более старые версии Internet Explorer постепенно сокращаются и поддержка браузера для flexbox продолжает улучшаться. Если вы не знакомы с flexbox, вы можете проверить эта недавняя статья на SitePoint или же посетить спецификацию что объясняет это следующим образом:

В модели гибкого макета дочерние элементы гибкого контейнера могут быть расположены в любом направлении и могут «сгибать» свои размеры, либо увеличиваясь, чтобы заполнить неиспользуемое пространство, либо сжимаясь, чтобы избежать переполнения родительского элемента. Как горизонтальное, так и вертикальное выравнивание детей можно легко манипулировать.

Звучит идеально, чтобы решить мою проблему.

Опять же, используя более ранний HTML, вот CSS для построения подхода flexbox к решению этой проблемы:

nav {ширина: 100%; } nav ul {display: flex; flex-direction: row; поле: 0; отступы: 0; } nav ul li {стиль списка: нет; flex-grow: 1; выравнивание текста: по центру; } nav ul li a {display: block; }

Следует отметить следующие свойства flexbox:

  • дисплей: гибкий; Это применяется к элементу <ul> и обеспечивает гибкую среду для его дочерних элементов.
  • flex-direction: row; присваивается <ul> для позиционирования его дочерних элементов в формате слева направо. Это значение по умолчанию, поэтому оно не является обязательным.
  • flex-grow: 1; это магия, которая равномерно распределяет элементы <li> по всему контейнеру. Если бы вы указали конкретное значение <li>, равное 2, этот элемент увеличился бы вдвое по сравнению с другими.

Flexbox имеет некоторые интересные особенности это может быть уместно в других случаях использования, таких как возможность изменить порядок пунктов меню путем объявления свойства order.

Вот наша последняя демонстрация с использованием Flexbox:

Увидеть перо Навигация по ширине жидкости с помощью Flexbox по SitePoint ( @SitePoint ) на CodePen ,

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

Если вам когда-либо приходилось решать эту проблему, сообщите нам, как вы ее достигли и какую технику вы использовали.

Похожие

Минуты или мегабайты, или Как операторы заставляют нас платить больше
... или мы выберем вам сами". Ничего необычного не происходит - просто начался очередной раунд повышения стоимости услуг на сотовую связь. При этом поставщики услуг активно "формируют" потребности реальных потребителей на свои вкусы, предлагая все более дорогие и запутанные тарифные планы - постепенно отказываясь от простых мобильных "разговоров" в пользу дополнительных мегабайт интернета. Кроме того, еще и перешли на новую 4-недельную систему помесячной тарификации, благодаря которой для абонентов
Третий глаз или полоса с камерой
Делиться каждым моментом своей жизни с друзьями с помощью фотографий не является чем-то новым. Но теперь вы можете показать своим друзьям именно то, что вы видите. Это устройство имеет хорошие шансы стать бестселлером. Наконец, мы живем в эпоху постоянной необходимости документировать свою жизнь и информировать наших друзей через социальные сети, где мы находимся и что делаем. 3RDi , или группа с камерой, сделает именно это.
сборка сборка варшавской школьной мебели
... мых стержней, опор, кронштейнов, креплений, ручек, защитных устройств, новых петель, мостовых кранов. Мы осуществляем точное изготовление и обмен специальных элементов и средств безопасности, а также услуги адаптивного ремонта. Мы выполняем ремесленные работы, такие как сверление отверстий для мебельных колышков, сверление отверстий для дюбелей, резка и обрезка на специализированном станке, резка под пластиной и раковина. Кроме того, мы осуществляем услуги по разборке мебели,
Как создать несколько вкладок на одном экране с помощью Android TabLayout
При использовании tablayout В Android появился новый элемент в Библиотеке поддержки дизайна. По сути, он предоставляет горизонтальные макеты для отображения вкладок Android на экране. Используя вкладку Android, мы можем отобразить более одного экрана на одном экране. Что такое Android Tab Layout? Android Tab Layout - это класс представления, который необходимо добавить в макет нашего приложения для создания скользящих вкладок. Тем не менее, вы можете создавать
Chic Chiq: натуральные порошковые маски, совместимые с
Во-первых, их история захватила нас. Нечасто идея бренда появляется во время экзотического путешествия, а также с любовной историей на заднем плане. Так было и с Патришей Ротитор, которая восемь лет назад отправилась в Гонконг, чтобы лучше узнать Азию. Именно там она впервые попробовала маски для лица из куркумы и открыла мир аюрведы. Более 5000 лет общения с философией и индуистской медициной навсегда изменили ее жизнь. Тем более что примерно в одно и то же время во время одной из поездок,
Какой формат продажи Ebay более выгоден: купить сейчас или аукцион?
... или листинг с фиксированной ценой «купи сейчас»? Знание того, какой формат продажи использовать для каждого предмета, который вы продаете, жизненно важно при попытке максимизировать вашу прибыль. Это не точная наука, но есть способы получить знания, основанные на последних данных о продажах, которые могут помочь вам принять наилучшее решение для каждого товара. В предыдущий
Q & A: встроенный блокировщик рекламы в Google Chrome
... если только одно объявление на веб-сайте не соответствует стандартам CBA, Chrome заблокирует не только это объявление, но и всю рекламу на ресурсе. Однако Google оставит окончательное решение в руках пользователей. Посетителям сайта будет предложено заблокировать рекламу, но у них есть возможность не делать этого. Подожди, что такое Коалиция за лучшую рекламу? CBA - это союз рекламодателей, торговых групп, издателей и крупных компаний, которые, как следует
Как заблокировать всплывающие окна с помощью Google Chrome
... мые всплывающие окна), и ваша выносливость уже имеет превысил критический порог. К сожалению, это известная проблема, но не волнуйтесь. Chrome интегрирует очень эффективную систему блокировки всплывающих окон, которую можно настраивать и улучшать с помощью внешних инструментов, то есть расширений, которые могут сделать ее более точной в работе. Что? Прочитайте инструкции о том, как заблокировать всплывающие окна в Google Chrome, которые я собираюсь вам дать, и вы узнаете.
Как использовать Google Authenticator с ПК
Безопасность учетных записей является критической проблемой для всех в наши дни хаков и сбросов данных. Ваша учетная запись Google является одной из самых важных сетевых учетных записей, которые у вас есть, по всей вероятности - вы получаете важную электронную почту там, ваш браузер и поисковую информацию там - много данных, которые вы не хотели бы видеть выпущенными «в дикий». К счастью, есть инструмент, который
Как отлаживать сайты на вашем мобильном устройстве с помощью Google Chrome
Я не могу поверить, что я выжил так долго, как веб-разработчик, не зная, что вы можете отлаживать веб-сайты (JavaScript, CSS, HTML, TypeScript и т. Д.) Непосредственно на вашем мобильном устройстве с помощью инструментов разработчика Google Chrome. Если вы в настоящее время используете эмуляторы / симуляторы или тестирующие решения, такие как Browser Stack, вам понравится это простое и бесплатное решение. Будьте осторожны, однако, вы должны будете загрузить 6+ гигабайт материала до
СОБЫТИЯ - Детский сад местного самоуправления № 56 в Белостоке
... или их грустное лицо, они сгребали листья, они выбирали соответствующую часть письма. «Волшебный ковер» очень понравился детям - его можно увидеть после сегодняшних игр. >> более ... Мы разделяем радость от программирования игр

Комментарии

Какие знания или опыт у меня были, чтобы добавить свежий взгляд на темы, обсуждаемые в блоге?
Какие знания или опыт у меня были, чтобы добавить свежий взгляд на темы, обсуждаемые в блоге? Для того, чтобы статья подходила для определенного сайта, этому сайту не обязательно нужно больше той же информации, которую предоставляют обычные авторы сайта. Вместо этого сайту часто нужны или нужны статьи на смежные темы, которые демонстрируют опыт. Другими словами: оригинальный, полезный контент, выраженный уникальным письменным голосом. Но не слишком уникальный.
Что мы пропустили?
Что мы пропустили? Дайте нам знать, что еще вы можете использовать USB-C на новом iPad Pro, написав нам на @trustedreviews.
Но что, если бы вы могли заставить свой смартфон использовать меньше данных?
Но что, если бы вы могли заставить свой смартфон использовать меньше данных? Читать дальше : Как обновить Google Chrome на Android и ПК? Это именно то, что делает функция Data Saver. По сути, включение этой опции отправляет данные на серверы Google для сжатия и оптимизации для работы со смартфоном. В конце концов, вам не нужно загружать эти большие изображения, просто чтобы
Вы находитесь в Дир Парке или Ла Порте и ищете новый автомобиль, грузовик, минивэн или внедорожник?
Вы находитесь в Дир Парке или Ла Порте и ищете новый автомобиль, грузовик, минивэн или внедорожник? Взгляните на обширный инвентарь, доступный на Bayway Chrysler Dodge Jeep Ram , и найти Джипы на продажу в Хьюстоне, а также Chrysler ,
Что мы видим?
Что мы видим? Мастерство не помогает нам дальше, оно выглядит неловко, а также скрывает символику. И мы бы по неосторожности пропустили бы это, если бы кто-то не увидел всю нелепость передозировки этого символа и записал на крупном плане. Мартин Фенгель принял участие в юбилейном году Вилла лепнина в холле фотовыставка, которая еженедельно дополняется работой. на mucbook и я
Что вы берете?
Что вы берете? Вы использовали функцию просмотра свойств вашей сети? Если да, то как вы думаете, что это сравнивается со старой доброй командой Ipconfig? Поделитесь своими мыслями с другими членами TechRepublic.
Если вы столкнетесь с такими же или похожими обстоятельствами, как вы справитесь с этим?
Если вы столкнетесь с такими же или похожими обстоятельствами, как вы справитесь с этим? Напугана? Не нужно пугаться, но есть все шансы вернуть потерянные данные, если только Kingston Datatraveler 8GB не будет перезаписан другими данными. Remo Recover (Windows / Mac) может легко вернуть потерянные данные с ваших USB-накопителей. Программное обеспечение совместимо с последними версиями Windows и Mac OS X, включая Windows 10 и macOS High Sierra. Таким образом, можно легко выполнить восстановление
Что происходит, когда вы покупаете пакет за 20 долларов - получаете ли вы эксклюзивные предложения за пакеты по 30 долларов или 50 долларов?
Что происходит, когда вы покупаете пакет за 20 долларов - получаете ли вы эксклюзивные предложения за пакеты по 30 долларов или 50 долларов? Я не удосужился узнать, потому что пакет за 5 долларов не улучшил игровой процесс. Это дало мне небольшую кучу золота и множество ускоряющих предметов, чтобы обойти длительные таймеры строительства и обучения, но игра никогда не ускользнет от этой мрачной цепочки целей ... по крайней мере, за несколько часов, в которые я играл за две недели
Что может быть лучше для долгих осенних вечеров?
Что может быть лучше для долгих осенних вечеров? В последнее время я всегда сталкивался с чердаком вдохновения, поэтому сегодня темой будет промышленная спальня в стиле лофт . Встречайте ее три жизни: минимальную, ультрасовременную и роскошную. Вот они. Спальня в стиле лофт - минималистичный вариант Первым персонажем сегодняшней записи станет спальня в индустриальном стиле в минималистском варианте . Это наиболее близкая версия к оригиналу, потому
Нет # мы уже установили адаптер Где находятся ваши файлы функций?
Нет # мы уже установили адаптер Где находятся ваши файлы функций? (./features/**/*.feature) # это глобус, указывающий на папку, в которой находятся все ваши функции (тестовые файлы). Где находятся ваши определения шагов? (./features/step-definitions) # Ваша папка с определениями шагов Какой репортер вы хотите использовать? точка - https://github.com/webdriverio/wdio-dot-reporter # default reporter Должен ли я установить библиотеку reporter для вас? Да. Хотите добавить службу в настройку теста?
Как Chrome решит, что заблокировать?
Как Chrome решит, что заблокировать? Блокировщик рекламы будет основывать свои решения на принципах, изложенных Коалиция за лучшую рекламу , Однако если только одно объявление на веб-сайте не соответствует стандартам CBA, Chrome заблокирует не только это объявление, но и всю рекламу на ресурсе. Однако Google оставит окончательное решение в руках пользователей. Посетителям сайта будет предложено заблокировать рекламу, но у них

Что если мы добавим или удалим элементы?
Как насчет того, чтобы добавить дополнительный элемент навигации?
Что такое Android Tab Layout?
Или листинг с фиксированной ценой «купи сейчас»?
Подожди, что такое Коалиция за лучшую рекламу?
Что?
Какие знания или опыт у меня были, чтобы добавить свежий взгляд на темы, обсуждаемые в блоге?
Что мы пропустили?
Что мы пропустили?
Но что, если бы вы могли заставить свой смартфон использовать меньше данных?

Новости

Где купить гибкий штатив для фотоаппарата

Знаю, что многие увлекаются фотографированием природных пейзажей. Мне и самому не чуждо такое увлечение. Однако, некоторые снимки довольно тяжело даются, так как иногда очень сложно поймать нужный

Походы пешком по Украине

Осуществление пеших походов по своей родной стране является одним из видов познания её достопримечательностей и прекрасных мест. При пеших походах все детали красоты и яркости природы своей страны

Сонник толкование снов к чему
Интересные и серые, пропитанные отголосками прошедшего дня или, напротив, несущие в себе некие знамения, переносящие нас в далекое прошлое или рисующие в сознании картины будущего,

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

Славянские фамилии и их значения
Фамилии славянских народов порой бывает трудно разделить по «национальным квартирам», хотя последнее время это пытаются сделать в Украине. На протяжении многих веков так называемые пишущие люди стремились

Значение имени артем
Уже известно и доказано, что значение имени артем влияет на судьбу его обладателя. Попытки понять и объяснить влияние имени на судьбу и характер человека начались в прошлом, продолжаются и в настоящее

Ржачные поздравления с днем рождения
Желаю во всем всегда успевать И все делать лишь на 5. Желаю быть счастливой на свете этом, И чтоб жизнь казалась только летом. Пускай все всегда выходит И все твои мечты реализуются. *** Открыв конверт,

Значение фамилии порошенко
В 1956 году Алексей Вальцман женился на Евгении Сергеевне Порошенко и при этом изменил фамилию с Вальцман на Порошенко. В 1974 году - занял должность директора Бендерского исследовательского экспериментально-ремонтного

Само популярное видео
Предложили мне высокооплачиваемую и интересную работу в Киеве. Согласился сразу, грех такими предложениями в наше время разбрасываться. Работа работой, а образовалась проблема - жильё. По своему опыту

Поздравление парня с др
«Денек рождения- печальный праздничек…», - так гласит каждый, хотя где то в глубине души так ожидает сей день. Но самое, пожалуй, приятное – сделать это событие запоминающимся конкретно для возлюбленного