Как сделать меню слева а контент справа

Добавил пользователь Morpheus
Обновлено: 05.10.2024

От автора: Гамбургер-меню, выдвижное меню, off-canvas меню: как бы эту разновидность меню ни называли, скрытие основной навигации на сайте становится шаблоном, использующимся повсеместно в отзывчивом веб-дизайне. Все больше и больше сайтов используют зафиксированную иконку, при нажатии на которую весь сайт сдвигается в сторону, чтобы отобразить скрытое меню.

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

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

Вот демо-пример на сайте CodePen, показывающий конечный результат:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Начнем с HTML

Разметка для скрытого меню будет немного отличаться от варианта для стандартного меню навигации. Вместо того чтобы поместить меню внутри шапки сайта (header), мы поместим его сразу после открывающего тега body. Базовая структура выглядит так:

Как видите, разметка нашего сайта состоит из трех основных элементов: навигация, чекбокс (checkbox) и парный тег label, а также непосредственно контент сайта. Здесь следует отметить несколько моментов:

Триггером для выдвижения нашего меню послужит тег input с типом checkbox и тег label. Обычно тег label располагается перед тегом input или тег input оборачивается тегом label. Но в данном случае тег input должен идти непосредственно перед тегом label. И далее, при добавлении CSS-стилей, мы увидим почему.

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

Теперь, когда у нас есть базовая HTML структура, мы можем заняться внешним видом нашего меню!

CSS-стили для пунктов меню

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

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

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

CSS-стили для триггера меню

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Примечание редактора: изначально, в данном коде использовалось свойство display: block вместе с указанием нулевого значения для ширины и высоты самого чекбокса, чтобы сделать его невидимым, но доступным (активным). Но оказалось, что такое сочетание стилей в операционной системе iOS приводило к сбою в работе браузера и его закрытию, каждый раз, когда меню открывалось. Я изменил эту технику и стал использовать вместо этого свойство clip, которое, похоже, имеет такой же уровень доступности.

Итак, мы прячем чекбокс, используя свойство clip, которое требует применения свойства position: absolute для заданного элемента. Теперь мы задаем стили для элемента label:

CSS-стили, чтобы триггер стал активным

Вот когда становится важным порядок следования элементов триггера в коде. Второй селектор использует символ ~ для управления родственными элементами, чтобы указать на элемент с классом .site-wrap, когда элемент с классом .nav-trigger будет активным. Порядок следования в коде тега input с типом checkbox здесь не так важен.

Я хочу, чтобы меню с левой стороны страницы фиксировалось, занимая 20% ширины, а содержимое с правой стороны занимало остальные 80%. Вот так:

На данный момент моя установка выглядит следующим образом, который я не хочу:

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

Как можно разместить меню на боковой панели (слева), а остальную часть сайта по содержанию справа?

3 ответа

Это то, что вам нужно. Убедитесь, что вы используете загрузчик с этим.

Прежде всего, я предлагаю вам сделать новый div с .container класс, как основной див. Затем вы должны поместить свой заголовок внутри него и новый div, который будет обрабатывать контент с правой стороны. Все, что вам нужно сделать сейчас, это подготовить CSS, установив display: flex основного контейнера и ширины обоих дочерних элементов div.

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

Вы можете использовать обертку как для .site-header элемент и .site-content элемент и добавить display: flex в свойствах оболочки CSS. Таким образом, .site-header элемент будет в той же строке, что и .site-content ,

Теперь вы можете просто изменить ширину ваших элементов до желаемого значения.

Язык CSS
Относительное позиционирование.

При относительном позиционировании блока надо задать свойство position:relative и свойства смещения.
Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке.

Результат в браузере:

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

Практически относительное позиционирование применяется достаточно редко.

Плавающие блоки

Эти блоки нельзя позиционировать с точностью до пиксела, как в предыдущих схемах, но именно эта схема позиционирования очень распространенна. Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно. Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помоьщью параметра align.

Плавающие блоки определяются свойством float, который определяет будет ли блок плавающим и в какую сторону он будет перемещаться.
Возможны три варианта значений:

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

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

none - блок не перемещается и позиционируется согласно свойству position.

Сейчас наша страница в браузере выглядит так:

Теперь наша страница в браузере выглядит так:

прижмем блок новостей к правому краю и поставим его в html-документе вместе с меню перед контентом;

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

Оба блока слева:

Оба блока справа:

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

left - блок должен располагаться ниже всех левосторонних блоков;

right - блок должен располагаться ниже всех правосторонних блоков;

both - блок должен располагаться ниже всех плавающих блоков;

none - никаких ограничений нет, это значение по умолчанию.

Теперь наша страница в браузере выглядит так:

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

зададим сначала размеры и фон для наших блоков;

сделаем блоки menu и content плавающими и левосторонними;

блок news должен прижиматься к правому краю, т.е. его мы сделаем правосторонним плавающим блоком, так, чтобы блок новостей был справа, а текст обтекал бы его слева (не забудьте блок news в html-коде расположить выше текста, т.е. до слова "контент").

С помощью плавающих блоков верстать страницу проще: не надо рассчитывать пикселы, да и код короче. К тому же при "резиновой" верстке мы и не можем указать точное расположение блока на экране, а с помощью плавающих блоков нам это и не нужно, достаточно указать лишь ориентир (слева, справа, ниже или в той же линии).

Фиксированные блоки

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

Теперь наша страница в браузере при прокрутке выглядит так:

В следующем уроке мы познакомимся еще с некоторыми свойствами блоков и их видами.

и ещё, как розместить картинку слева в верхнем углу, чтоб не было промежутка между началом страницы и картинкой

Вот тебе основа, есть шапка, левый блок, правый блок, футер, все кроссбраузерно.

Я, собственно, много чего не знаю, но пробелами разделять объекты - всё же не разумно. Засуньте в блоки их чтоли или в таблицу хотябы.
И кроме картинки на самом деле есть всё, просто картинка закрывает все объекты - если все объекты должны быть ниже то наверное лучше position:relative; использовать - иначе в блоки иль таблицу.

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

Зачем изменять расположение сайдбара в WordPress

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

Многие сайты WordPress используют типовую структуру блога с двумя столбцами. Одна для контента, а вторая — для сайдбара.

Если вы только начинаете создавать сайт, тогда стоит выбрать тему WordPress, которая располагает сайдбаром с нужной вам стороны.

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

Давайте же посмотрим как можно легко изменить местоположение сайдбара в WordPress с помощью небольших кусочков CSS кода.

Изменяем расположение сайдбара в WordPress с помощью CSS

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

Во-вторых, всегда стоит создавать резервную копию своего WordPress сайта до внесения изменений в текущую тему.

Вам потребуется FTP клиент для редактирования файлов.

Подключаемся к своему WordPress сайту с помощью FTP клиента и переходим в папку темы. Обычно она расположена по адресу:

Теперь вам потребуется скачать и открыть свой файл таблицы стилей в текстовом редакторе. Этот файл называется style.css и расположен в корне папки с темой.

Внутри этого файла находим CSS класс своего сайдбара. Обычно это .sidebar. В нашем примере мы будем использовать дефолтную тему WordPress Twenty Fifteen, в которой есть такой CSS для определения сайдбара:

Как вы видите, код прижимаем сайдбар к левой стороне с отступом -100% справа. Мы изменим float на right и margin-left вот таким образом:

Сохраните свои изменения и загрузите файл style.css обратно на свой сайт с помощью FTP клиента. Теперь перейдите на свой сайт, он будет выглядеть вот так:

Так произошло потому, что мы переместили сайдбар, но не переместили область контента. Twenty Fifteen использует следующий класс CSS для определения позиции области контента.

Мы изменим его так, чтобы поместить контент справа. Вот так:

А вот как будет выглядеть наш сайт после применения изменений.

Как вы видите, мы поменяли расположение как для области контента, так и области сайдбара. Однако, все равно остался какой-то белый блок слева.

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

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

Мы выяснили, что этот CSS в нашей таблице требует доработки.

Этот CSS код добавляет пустой блок контента шириной 29.4118% и высотой 100% справа вверху. Вот как мы переместим его в правую сторону.

После сохранения и загрузки таблицы стилей обратно на сервер наш сайт будет выглядеть вот так:

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

Читайте также: