Как список расположить горизонтально css

Как выровнять горизонтальное меню по центру?

Выравнивание меню по центру с помощью flexbox

Заур Магомедов

  1. Стильное вертикальное меню аккордеон для сайта
  2. Вертикально-выпадающее меню аккордеон для Joomla 2.5.x — 3.x.x
  3. FlexMenu — сворачивающееся адаптивное меню на jQuery
  4. Горизонтальное многоуровневое меню на css с эффектом анимации

Заур,здравствуйте!Попала первый раз на Ваш сайт, буду заходить чаще. Не хотела Вас беспокоить, но увидела Ваше меню, где тоже по краям большое пустое расстояние как и на моем сайте. Может знаете как его уменьшить. Перепробовала все, но пустое место что то не уменьшается. Заранее благодарю. Людмила.

Здравствуйте. Когда пунктов мало, то да по краям пусто. А чем вы хотите это заполнить и зачем вообще?

даже просто скопировав все в нужные файлы , меню стоит как стояло ….
я молчу про то ,что подставлять к своему коду в целях обучения и понимания .

В Html-коде нужно сохранить все классы из демо-примеров и сделать подключение файла стилей (стили тоже из демки берем). И тогда все будет работать.

Как сделать такую разделяющую полоску между пунктами основного уровня?

Не понял вопрос — какую такую?

Здравствуйте. При масштабировании сайта, список меню становится в два ряда, подскажите где искать решении проблемы, спасибо.

Здравствуйте! Нужно либо создать еще одно меню и распределить пункты, либо править код меню, чтобы невмещающиеся пункты прятались в подпункт «Еще». Можно и на javascript это сделать, но это не желательно. Лучше все же на php.

Заур спасибо вам за такие чудесные примеры, они очень помогают, вот я тоже столкнулся с проблемой что при масштабировании список меню стает в два ряда, пока что PHP и JS я не знаю, можете подсказать как с этим бороться? и как исправить эту проблему!

Ну, php знать тут не обязатально и js тоже самую малость. Здесь нужны знания css. К сожалению в двух словах не объяснишь, это делать надо руками.

Здравствуйте. Нашел очень хорошее,фиксированое меню. Но оно не центровано,пробовал сам css переделать,толку ноль,не реагирует ни на какие правки. Меню скачано с англо сайта и присутствуют 2 стиля, при чем оба свалены в кучу, без разметки. Может посмотрите как в нем центровку сделать.
mod-style

Зачем вы сюда весь этот код скидываете? Вы думаете я в этом ковыряться буду? Хотите отцентировать заплатите денежку верстальщику и он сделает вам меню какое вашей душе угодно.

Да я вообще то и хотел финансово отблагодарить если поможете. Просто дописать забыл. Ну нет так нет.

А врать не хорошо!))

Здравствуйте! Подскажите пожалуйста. У меня возникла не большая проблема. В моем меню, при наведении на кнопку курсора, меняется цвет кнопки, кроме последней ячейки.
Эта ячейка типа вообще ни как не реагирует на наведение курсора. Когда меняю цвет меню, она изменяется, а при наведении курсора должна, показать другие оттенки, но не меняется.

Зачем вы весь код скидываете сюда? В этом коде нужно ковыряться и вникать что у вас там не так. Извините, сейчас заниматься этим нет времени.

Здравствуйте. Такая проблема, подскажите, делаю по вашей статье верхнее меню для сайта. Делаю на компьютере где файл индекс имеет расширение html, все работает, корректно отображается, переношу этот код на сайт, на сайте файл индекс не html, а php и не работает. css почему то не подключается, в чем может быть причина?

Сайт у вас работает на cms, правильно ведь? Если да, то зачем вам файл index.html. Скопируйте css код в ваш файл стилей на сайте и сопоставьте классы или ID. Т.е. у вас на сайте родительский блок меню с ID не mainmenu, а скажем, — mainnav. Тогда вам надо поменять данный индефикатор в стилях css, либо же поменять индефикатор в html коде на mainmenu. Надеюсь вы меня поняли.

А почему тогда с расширением php? В любом случае проблем быть не должно. Что-то не так делаете…

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

Может это потому что файл php, а html.

Добавьте стили меню в ваш файл стилей или подключите файл стилей меню в вашем файле index.php. Не важно какое у вас расширение файла php или html. Все будет работать.

Sublime Text 3

Sublime Text 3

Sublime Text 3

Подпишитесь на рассылку, чтобы не пропустить новые материалы на блоге.

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

Меню многоуровневое горизонтальное и вертикальное CSS

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

Для того чтоб переделать вертикальное меню в горизонтальное, достаточно изменить лишь одно значение в стилях. О чём я укажу в комментариях в коде.

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

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

Стили для всех блоков, имеющихся и добавленных, будут одинаковыми.

>
. nav li:hover > .submenu <
visibility : visible ;
opacity : 1 ;
transform : translateY(0px) ;
>

CSS Grid. Практические примеры

Иллюстрация, на которой человек собирает стену из разноцветных кирпичиков

Будущее наступило: CSS Grid поддерживается всеми современными браузерами, девтулзы для работы с ним доступны и в Firefox, и в Хроме, а с автопрефиксером и осторожностью можно использовать гриды даже в IE 10/11.

Но, знакомясь с туториалами, я заметил, что большинство из них фокусируются либо на том, как работают конкретные свойства, либо на том, как сверстать постер или журнальный разворот. Да, это интересно, помогает погрузиться в тему и показывает всю мощь нового инструмента, но как использовать полученные знания в работе?

В этой статье я хочу поделиться накопленным за последний год опытом использования CSS Grid в коммерческих проектах. Ниже я разберу примеры, как применять гриды для вёрстки всей страницы, групп элементов и отдельных компонентов.

Для демонстрации я буду пользоваться девтулзами Хрома:

Настройки девтулзов для CSS Grid в Хроме

Если вы пока мало знакомы с гридами, статья всё равно может оказаться полезной, но за подробным описанием свойств и их возможных значений советую обращаться к гайду от CSS-Tricks.

Колоночная сетка

Начнём с того, как использовать гриды для вёрстки всей страницы. Если вы привыкли верстать стандартной колоночной сеткой (например, из бутстрапа), то гриды с лёгкостью позволяют придерживаться такого подхода.

Для этого достаточно создать грид-контейнер с 12 равными по ширине колонками, а дальше у детей указывать, какие колонки им занять:

Чтобы адаптировать такую вёрстку под маленькие разрешения, можно заменить сетку на 6-колоночную и обновить позиции элементов:

Пример использования такого подхода можно увидеть на нашем лендинге:

Скриншот сайта csssr.com на десктопном разрешении

Скриншот сайта csssr.com на мобильном разрешении

С CSS Grid можно не ограничиваться колонками и задать количество строк ( grid-template-rows ) тоже, чтобы иметь возможность точно позиционировать каждый элемент ( grid-row ).

Разметка страницы на области

Возможности CSS Grid не заканчиваются на колоночной сетке и включают новый способ размечать страницу. С помощью grid-template-areas можно разделить страницу на области, а части страницы раскидать по этим областям:

Разметка страницы по областям на десктопном разрешении

На флексах для такого простого лейаута пришлось бы делать несколько вложенных обёрток, а информация о размерах блоков размазалась бы по обёрткам и их детям. C CSS Grid всё это лежит в одном месте — в контейнере. При этом описание областей в CSS даёт представление о том, как результат будет выглядеть в браузере.

Более того, в такую разметку легко добавить адаптив, ничего не меняя в детях:

Разметка страницы по областям на мобильном разрешении

Вот полный код примера:

Витрина карточек

От лейаута страницы переходим к её содержимому.

Витрина — пожалуй, самый часто встречаемый контейнер для однородных элементов. С помощью неё могут отображаться товары интернет-магазина, новости, фотографии в альбоме, в общем, что угодно прямоугольной формы.

Верстая такую витрину на флексах, я каждый раз сталкивался с одними и теми же проблемами:

  • Как задать отступы между карточками? Есть свойство gap, но оно пока ещё плохо поддерживается. Поэтому приходится давать всем элементам отступы друг от друга, а у их контейнера отрицательным отступом компенсируем лишние отступы крайних элементов.
  • Как сделать так, чтобы карточки в последнем ряду не растягивались на полную ширину? Флекс будет тянуть элемент на всё доступное место, так что придётся либо хардкодить ширину элементов, либо заполнять последнюю строку невидимыми элементами.
  • Как сделать адаптив? Нужно опытным путём вычислить ширину, на которой наши карточки перестают нормально вмещаться, и на ней поправить значения ширины для карточек, чтобы было меньше столбцов.

Гриды решают все эти проблемы буквально в 3 строки:

  • Отступы между элементами явно указаны в grid-gap .
  • Карточки в последнем ряду будут занимать свои колонки и не будут растягиваться.
  • Адаптив без медиа-запросов: у карточки указана минимально допустимая ширина 250px, а дальше сетка уже сама считает, сколько таких карточек поместится в строку.

Вот полный код примера:

Другие варианты витрин на гридах:

    ; ; ; , где подробно разбирается пример адаптивной сетки с карточками разных размеров.

Форма

Типичная форма состоит из 2 столбцов: в левом идут названия полей, в правом — инпуты. Проблема с таким расположением иногда заключается в том, что мы не знаем, какой длины будут названия полей, но хотим, чтобы все строки формы были выровнены.

Сделать такое на флексах можно, только захардкодив ширину левой колонки, чтобы в каждой строке она была одинаковой. Можно сделать на table, но это будет использованием не по назначению. И тут на помощь приходит CSS Grid:

Форма с горизонтальным расположением лейблов и инпутов

Левой колонке мы задаём ширину auto , чтобы она подстраивалась под длину лейблов, а правой колонке выделяем 1fr , то есть всё оставшееся от левой колонки место.

Чтобы сделать форму вертикальной на мобильных, мы можем заменить сетку на 1-колоночную и уменьшить отступ между лейблом и инпутом, образовавшийся из-за grid-gap :

Форма с вертикальным расположением лейблов и инпутов

И на десктопном, и на мобильном разрешениях кнопка сабмита занимает полную ширину контейнера. Это происходит благодаря следующей строчке:

Эта запись означает, что кнопка будет расположена между самой первой вертикальной линией сетки (1) и самой последней (-1). То есть она будет занимать целую строку, независимо от того, сколько в сетке столбцов.

Вот полный код примера:

Группировка ячеек

В форме может понадобиться объединить инпуты в <fieldset> , но с гридами не так очевидно, как это сделать. Грид (как и флекс) описывает только расположение своих детей. Если в детей вложены другие элементы, то на них грид уже не влияет. В будущем мы сможем решать такие задачи с помощью subgrid, но как быть сейчас?

Я пользуюсь для таких целей display: contents , но стоит учитывать, что у него:

    , чем у гридов (в основном из-за IE); .

Элемент с display: contents при рендеринге заменяется своими детьми, поэтому если такой элемент лежит внутри грид-контейнера, то его дети будут располагаться на сетке так, будто они сами лежат внутри грид-контейнера.

Так как сам элемент с display: contents не рендерится, то и визуальных свойств у него быть не может. Но зато он может реагировать на события мыши и определять css-переменные. Вот пример, как с помощью такого элемента реализовать ховер на группу ячеек грида:

Карточка с вариациями отображения

Теперь переходим к конечным компонентам, при вёрстке которых нас тоже может выручить грид.

Один из таких компонентов — информационная карточка (например, товара или объявления). Часто у таких карточек есть не один вариант отображения, а сразу несколько. Например, нам нужно реализовать адаптив, красиво утрамбовывая элементы карточки в меньший объём. Или предоставить несколько вариантов отображения для разных мест размещения: на витрине, в рекламе или в попапе предпросмотра.

Гриды позволяют красиво решать такие задачи, даже не меняя HTML-разметку. Для примера разберём вот такую карточку объявления о сдаче в аренду квартиры:

Карточка аренды квартиры, размер L

Карточка аренды квартиры, размер M

Карточка аренды квартиры, размер S

Все 3 состояния используют одну HTML-разметку, но в CSS у них разная конфигурация областей и положения элементов. Обратите внимание, что на размерах M и S некоторые блоки располагаются друг поверх друга. Это тоже сделано на гридах, но уже с помощью наложения.

Наложение элементов в одной области

Приём в том, что мы разных детей складываем в одну и ту же grid-area . При этом они не располагаются, как обычные блоки, друг под другом, а накладываются поверх. Дальше с помощью align-self / justify-self можно поставить каждого ребёнка в свой угол:

Пример расположения нескольких элементов в одной области

Частичное наложение элементов

Если располагать элементы не по областям, а назначать им положение в сетке с помощью grid-row / grid-column , то наложение элементов на сетке можно сделать частичным:

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

Столбчатая диаграмма

Ещё один пример из практики — график столбиками (bar chart). Тут использование грида позволяет каждому сегменту графика пропорционально растягивать всю колонку:

Столбчатая диаграмма на гридах

  • Если в какой-то группе станет больше столбиков, то место под подпись тоже увеличится.
  • И наоборот — если где-то будет длинная подпись, то увеличится место под столбики.

В реальной жизни количество сегментов было динамическое, так что значение для свойства grid-template-columns формировалось в JS. Тут для упрощения возьмём график из 3 сегментов с разным количеством столбиков в каждом. Для каждой вертикальной и горизонтальной линии указываем название, чтобы проще было располагать на этих линиях элементы:

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

Попробовать переключение в деле можно, покликав на кнопки под графиком:

Ложки дёгтя

Используя CSS Grid, стоит учитывать и некоторые ограничения:

  • Анимации размера столбцов/строк предусмотрены в спеке, но поддерживаются только в Firefox. Впрочем, можно дать столбцу размер auto , а анимировать размер его содержимого. тоже пока поддерживается только в Firefox. Его появление в остальных браузерах откроет возможности для новых подходов и упростит группировку элементов в HTML. Также с помощью subgrid можно будет вообще всю страницу уложить в одну сетку. Так что ждём.
  • С осторожностью используйте гриды в случаях, когда в них вложены флексы и размер контента может динамически меняться. Это может вызвать проблемы с производительностью из-за большого количества пересчётов. Держите руку на пульсе счётчика FPS и вместо Nfr используйте minmax(Xpx, Nfr) , чтобы упростить пересчёт.

Заключение

По итогам года с гридами могу сказать, что использование CSS Grid не только упростило мою работу, но и сделало её интереснее. Гриды не пытаются заменить флексбокс или таблицы, а дают верстальщикам современный и мощный инструмент. Когда удаётся использовать гриды для подходящей задачи, решение обычно получается простым и наглядным.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *