Горизонтальное меню для сайта на всю ширину: Меню на всю ширину блока с равным отступом · Блог веб-студии Keengo

Leave a Comment / Разное / By alexxlab / 19.11.2020

Содержание

html — Как растянуть пункты меню по всей ширине родительского блока?

Вопрос задан 6 лет назад

Изменён 2 года назад

Просмотрен 14k раз

Есть обычная навигация:

HTML:

<nav>
  <ul>
    <li><a href="">Продукция</a></li>
    <li><a href="">Сообщества</a></li>
    <li><a href="">Мероприятия и акции</a></li>
    <li><a href="">Поддержка</a></li>
  </ul>
</nav>

CSS:

nav {
  font-size: 0;
    line-height: 0;
    letter-spacing: -1px;
}
nav li {
  display: inline-block;
}
nav a {
    display: block;
  background: #000;
    padding: 0 10px;
    font-size: 17px;
    line-height: normal;
    letter-spacing: normal;
  color: #fff;
}
nav li:nth-child(2n) a {
  background: #666;
}

Как пункты меню растянуть по всей ширине блока nav, чтобы padding у всех ссылок был одинаковым (пустого пространства между ссылками быть не должно, это пространство распределяется на внутренние отступы ссылок)?

UPD:

Изображение того, как должно отображаться меню.

html
jquery
css

Поставить display: flex родителю, flex-basis: auto + flex-grow: 1 — потомкам.

body,
ul {
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
}

ul li {
  list-style-type: none;
  flex-basis: auto;
  flex-grow: 1;
  background: #000;
  text-align: center;
}

ul li:nth-child(2n) {
  background: #ccc;
}

ul li a {
  padding: 20px 0;
  text-decoration: none;
  color: #ccc;
  display: block;
}

ul li:nth-child(2n) a {
  color: #000;
}

<nav>
  <ul>
    <li><a href="">Продукция</a></li>
    <li><a href="">Сообщества</a></li>
    <li><a href="">Мероприятия и акции</a></li>
    <li><a href="">Поддержка</a></li>
  </ul>
</nav>

Вариант на Flexbox

body,
ul {
  margin: 0;
  padding: 0;
}

ul,
ul li,
ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

ul {
  text-align: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

ul li a {
  min-height: 70px;
  text-decoration: none;
  color: #333;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

ul li a:hover {
  background: #eee;
}

<nav>
  <ul>
    <li><a href="">Продукция</a></li>
    <li><a href="">Сообщества</a></li>
    <li><a href="">Мероприятия и акции</a></li>
    <li><a href="">Поддержка</a></li>
  </ul>
</nav>

А этот вариант не проще?

ul 
 text-align: justify!important;
    text-align-last: justify;

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как сделать ширину меню по ширине сайта?

Всем привет.

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

header {
    display: flex;
    align-items: center;justify-content: space-around;
    height: 60px;
    background: #eee;
}
.main {    height: 100vh;
    width: 70%;
    background: #f7c244;
    margin: 0 auto;}

<header>
  <a href="/">LOGO</a>
  <a href="#">Ссылка</a>
 <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
    <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Войти</a>
  <a href="#">Регистрация</a>
</header>
<div></div>

html
css

Нужна дополнительная обертка в header

header {   
    background: #eee;
}
.menu {
    width: 70%;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
. main {    
    height: 100vh;
    width: 70%;
    background: #f7c244;
    margin: 0 auto;
}

<header>
    <ul>
        <li><a href="/">LOGO</a></li>
        <li><a href="#">Ссылка</a></li>
        <li><a href="#">Ссылка</a></li>
        <li><a href="#">Ссылка</a></li>
        <li><a href="#">Ссылка</a></li>
        <li><a href="#">Ссылка</a></li>
        <li><a href="#">Войти</a></li>     
        <li><a href="#">Регистрация</a></li>      
    </ul>
</header>
<div></div>

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

.container {
  width: 1400px;
  margin: 0 auto;
  max-width: 100%;
}
header {
  background: #eee;
}
.menu {
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
. main {
  height: 100vh;
  background: #f7c244;
  margin: 0 auto;
}

  <header>
<div>
    <ul>
      <li><a href="/">LOGO</a></li>
      <li><a href="#">Ссылка</a></li>
      <li><a href="#">Ссылка</a></li>
      <li><a href="#">Ссылка</a></li>
      <li><a href="#">Ссылка</a></li>
      <li><a href="#">Ссылка</a></li>
      <li><a href="#">Войти</a></li>
      <li><a href="#">Регистрация</a></li>
    </ul>
 </div>
  </header>
   
<div>
  <div></div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Панель навигации по центру во всю ширину

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

Фон панели навигации должен растягиваться на всю ширину экрана (не только ширину центральной области содержимого), а
Сами элементы навигации должны по-прежнему располагаться по центру области содержимого.

На приведенном ниже эскизе показана основная концепция дизайна.

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

Этот учебник является результатом этой задачи.

HTML

Мне удалось сократить количество необходимых дополнительных разделов до одного. К сожалению, я не думаю, что это возможно сделать без хотя бы одного дополнительного блока div или без обращения к JavaScript вместо того, чтобы полностью полагаться на CSS.

 <дел>
<ул>
О нас
Наши продукты
Часто задаваемые вопросы
Контакты
Войти

Если вы знакомы с кодом суперпростой панели навигации, вы увидите, что он почти идентичен, за исключением того, что я заключил тег ul в div и переместил идентификатор «nav» в него.

разд.

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

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

CSS

Опять же, все, что я здесь сделал, это взял предыдущий CSS панели навигации и немного изменил его. Результаты ниже:

 #nav {
ширина: 100%;
плыть налево;
поле: 0 0 1em 0;
заполнение: 0;
цвет фона: #f2f2f2;
нижняя граница: 1px сплошная #ccc; }
#нав ул {
стиль списка: нет;
ширина: 800 пикселей;
поле: 0 авто;
заполнение: 0; }
#нав ли {
плыть налево; }
#нав ли {
дисплей: блок;
отступ: 8px 15px;
текстовое оформление: нет;
вес шрифта: полужирный;
цвет: #069;
граница справа: 1px сплошная #ccc; }
#nav li:first-child a {
граница слева: 1px сплошная #ccc; }
#nav li a:hover {
цвет: #c00;
цвет фона: #fff; }

Наш блок #nav растягивается на 100% окна браузера и перемещается влево. Правило «плавающее: левое» может показаться немного странным, потому что мы не хотим, чтобы что-либо оборачивало нашу панель навигации.

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

Почему это важно? Это то, что позволяет нам установить цвет фона и рамку для нашего элемента #nav, чтобы он по-прежнему отображался. Если бы #nav не был плавающим, он бы рухнул до нулевой высоты, сделав наш фон и границу невидимыми!

Затем мы задали «#nav ul» фиксированную ширину и использовали трюк с автоматическим отступом, чтобы центрировать его. Ширина здесь имеет решающее значение: вы хотите, чтобы она была такой же ширины, как и центрированная область содержимого. В данном примере это 800 пикселей.

Здесь я использую один псевдокласс для получения интересного эффекта. Псевдокласс «:first-child» применяется к любому элементу, который является первым дочерним элементом своего родителя. В нашем случае это правило находит первую «ли» в нашем родительском «ул». Затем мы применяем границу к левой стороне тега привязки внутри. Без него у нашего первого элемента не было бы границы слева, как у других. Хотя технически мы могли бы сделать это с классом или идентификатором для первого элемента, я думаю, что это решение немного более элегантно.

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

Вы можете увидеть этот код в действии здесь. Надеюсь, другие найдут это решение таким же полезным, как и мой друг!

css — Полноэкранное меню навигации на всех экранах

Задавать вопрос

спросил 6 лет, 6 месяцев назад

Изменено 6 лет, 6 месяцев назад

Просмотрено 1к раз

Привет.

Я создаю адаптивное меню с помощью HTML5 и CSS. Для этого я создаю меню навигации для настольных компьютеров, а затем использую флажок с уровнем, чтобы показать адаптивное меню (я имею в виду, показать меню).

Это код:

Код Примечание: (изображение имеет размеры 350 пикселей в ширину и 100 пикселей в высоту):

 body {
  поле: 0px;
}
/*Удалить ul из отступов и стилей списка*/

ул {
  тип стиля списка: нет;
  маржа: 0;
  заполнение: 0;
  положение: абсолютное;
}
/*Hacer que la imagen no se mueva */

# img-nav {
  padding-top: 0px !важно;
}
/*Создаем горизонтальный список*/

ли {
  отображение: встроенный блок;
  плыть налево;
}
/*Стиль для ссылок меню*/

ли а {
  дисплей: блок;
  минимальная ширина: 200 пикселей;
  высота: 70 пикселей;
  выравнивание текста: по центру;
  высота строки: 50px;
  семейство шрифтов: "Helvetica Neue", Helvetica, Arial, без засечек;
  цвет: #fff;
  фон: #2f3036;
  текстовое оформление: нет;
  отступ сверху: 30px;
}
/*Состояние наведения для ссылок верхнего уровня*/

ли: наведите курсор на {
  фон: #19с589;
}
/*Стиль выпадающих ссылок*/

li: наведите указатель мыши на {
  фон: #f3f3f3;
  цвет: #2f3036;
  высота: 40 пикселей;
  высота строки: 40px;
}
/*Состояние наведения для выпадающих ссылок*/

li: hover ul a: hover {
  фон: #19c589;
  цвет: #fff;
}
/*Скрыть выпадающие ссылки, пока они не понадобятся*/

ли ул {
  дисплей: нет;
}
/*Сделать выпадающие ссылки вертикальными*/

ли уль ли {
  дисплей: блок;
  поплавок: нет;
}
/*Предотвратить перенос текста*/

ли уль ли а {
  ширина: авто;
  минимальная ширина: 100 пикселей;
  отступ: 0 20 пикселей;
}
/*Отображение раскрывающегося списка при наведении*/

ul li a: hover + . hidden,
.скрытый: наведите {
  дисплей: блок;
}
/*Стиль кнопки метки «показать меню» и скрыть ее по умолчанию*/

.show-меню {
  семейство шрифтов: "Helvetica Neue", Helvetica, Arial, без засечек;
  текстовое оформление: нет;
  цвет: #fff;
  фон: #19с589;
  выравнивание текста: по центру;
  отступ: 10px 0;
  дисплей: нет;
}
/*Скрыть флажок*/

ввод [тип = флажок] {
  дисплей: нет;
}
/*Показывать меню, когда установлен флажок невидимости*/

input[type=checkbox]:checked ~ #menu {
  дисплей: блок;
}
/*Адаптивные стили*/

Экран @media и (максимальная ширина: 760 пикселей) {
  /*Сделать выпадающие ссылки встроенными*/
  ул {
    положение: статичное;
    дисплей: нет;
  }
  /*Создаем интервал по вертикали*/
  ли {
    нижняя граница: 1px;
  }
  /*Сделать все ссылки меню на полную ширину*/
  ул ли,
  ли а {
    ширина: 100%;
  }
  /*Показать ссылку "показать меню"*/
  .show-меню {
    дисплей: блок;
  }
  # img-nav {
    дисплей: нет;
  }
}

 


<голова>
  <мета-кодировка="UTF-8">
  Меню навигации только CSS
  
   css">


<тело>
  <навигация>
    Показать меню
    <тип ввода = "флажок" роль = "кнопка">
    <ул>
      
        <а href="#">
          
        
      
      Иницио
      
      
        Виртуальная Аула
        <ул>
          
Тестировать онлайн
          
          Тест DGT
          
        
      
      Теорический результат
      
      Новые транспортные средства
      
      Разрешения

Проблема:

Я хочу иметь полноэкранное меню (на ПК) но я не знаю как это сделать.

Всем спасибо!

css
html

Упс! Я испортил. Окружите ul в div в HTML. Установите z-индекс div на значение выше 0, положение на фиксированное и ширину на 100%.

Удалите фон из тега a и поместите его в тег ul, затем добавьте к нему css width:100%. Этот отлично работает на мне.

 тело {
  поле: 0px;
}
/*Удалить ul из отступов и стилей списка*/

ул {
  тип стиля списка: нет;
  маржа: 0;
  заполнение: 0;
  положение: абсолютное;
  ширина:100%;
  фон: #2f3036;
}
/*Hacer que la imagen no se mueva */

# img-nav {
  padding-top: 0px !важно;
}
/*Создаем горизонтальный список*/

ли {
  отображение: встроенный блок;
  плыть налево;
}
/*Стиль для ссылок меню*/

ли а {
  дисплей: блок;
  минимальная ширина: 200 пикселей;
  высота: 70 пикселей;
  выравнивание текста: по центру;
  высота строки: 50px;
  семейство шрифтов: "Helvetica Neue", Helvetica, Arial, без засечек;
  цвет: #fff;
  
  текстовое оформление: нет;
  отступ сверху: 30px;
}
/*Состояние наведения для ссылок верхнего уровня*/

ли: наведите курсор на {
  фон: #19с589;
}
/*Стиль выпадающих ссылок*/

li: наведите указатель мыши на {
  фон: #f3f3f3;
  цвет: #2f3036;
  высота: 40 пикселей;
  высота строки: 40px;
}
/*Состояние наведения для выпадающих ссылок*/

li: hover ul a: hover {
  фон: #19c589;
  цвет: #fff;
}
/*Скрыть выпадающие ссылки, пока они не понадобятся*/

ли ул {
  дисплей: нет;
}
/*Сделать выпадающие ссылки вертикальными*/

ли уль ли {
  дисплей: блок;
  поплавок: нет;
}
/*Предотвратить перенос текста*/

ли уль ли а {
  ширина: авто;
  минимальная ширина: 100 пикселей;
  отступ: 0 20 пикселей;
}
/*Отображение раскрывающегося списка при наведении*/

ul li a: hover + . hidden,
.скрытый: наведите {
  дисплей: блок;
}
/*Стиль кнопки метки «показать меню» и скрыть ее по умолчанию*/

.show-меню {
  семейство шрифтов: "Helvetica Neue", Helvetica, Arial, без засечек;
  текстовое оформление: нет;
  цвет: #fff;
  фон: #19с589;
  выравнивание текста: по центру;
  отступ: 10px 0;
  дисплей: нет;
}
/*Скрыть флажок*/

ввод [тип = флажок] {
  дисплей: нет;
}
/*Показывать меню, когда установлен флажок невидимости*/

input[type=checkbox]:checked ~ #menu {
  дисплей: блок;
}
/*Адаптивные стили*/

Экран @media и (максимальная ширина: 760 пикселей) {
  /*Сделать выпадающие ссылки встроенными*/
  ул {
    положение: статичное;
    дисплей: нет;
 фон: #2f3036;
  }
  /*Создаем интервал по вертикали*/
  ли {
    нижняя граница: 1px;
  }
  /*Сделать все ссылки меню на полную ширину*/
  ул ли,
  ли а {
    ширина: 100%;
    фон: #2f3036;
  }
  /*Показать ссылку "показать меню"*/
  .show-меню {
    дисплей: блок;
  }
  # img-nav {
    дисплей: нет;
  }
}

 


<голова>
  <мета-кодировка="UTF-8">
  Меню навигации только CSS

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

Горизонтальное меню для сайта на всю ширину: Меню на всю ширину блока с равным отступом · Блог веб-студии Keengo

Leave a Comment / Разное / By alexxlab / 20.10.1972

Содержание

Как растянуть меню по ширине css

Два способа сделать меню для сайта на HTML и CSS

Всем привет! Сегодня разберем пару примеров реализации горизонтального меню – самых простых и самых надежных.

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

Как я и говорил, структура меню в обоих способах одинакова, меняется только >

Первый способ

Стандартное горизонтальное HTML меню, которое можно увидеть на многих сайтах. Первым делом добавляем HTML структуру меню. Она будет состоять из «оберточного» дива с в который кладем наш ненумерованный HTML список. Собственно, можно обойтись и без тега div (чем меньше тегов – тем лучше и все такое…), дописав наш id непосредственно к ul, но это будет зависеть от вашего шаблона. Иногда без «оберток» вообще ничего путного не сверстаешь.

Далее добавляем CSS стили меню:

1. Первым делом задаём фон «обёртки» тем же цветом, что и пункты нашего меню, иначе будем наблюдать «дребезг» в несколько пикселей при отрисовке страницы разными браузерами, куда будет заползать цвет «верхних» элементов, если таковые есть, или белый цвет body, если не задан другой;

2. Убираем маркеры у списка ul и обнуляем внешние и внутренние отступы;

3. Запрещаем обтекание, подробнее как сделать читаем в ранее написанной статье, это необходимое действие, так как для пунктов меню будет использоваться свойство float;

4. Используем float со значением left для элементов li, чтобы выстроить их в один ряд;

5. Для ссылок, указываем стили. Главное указать display со значением block чтобы ссылки стали блочными и заняли всё допустимое место внутри элемента li;

В зависимости от дизайна макета, может возникнуть потребность растянуть меню на всю ширину, следует использовать следующие стили CSS, подробнее читаем в статье – HTML список на всю ширину.

HTML без изменений, для примера меняем >

Основной CSS остается практически неизменным, необходимый нам эффект заключен в следующих строках:

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

Второй способ

Второй способ реализации горизонтального меню заключается в превращении нашего списка в таблицу. Да да, мы не будет использовать теги table и иже с ними. Почему? Как писал выше – исторически сложившийся факт, HTML таблица не используется для построения меню, связано это, в первую очередь, с неудобством прикручивания такого меню к движку. А уж если попытаться сделать и выпадающие вкладки в пунктах, то вы получите такого «монстра», что нагнете всю дальнейшую структуру страницы в самом её начале.

Так вот, для реализации нам нужны стандартные свойства таблицы, поэтому мы воспользуемся нехитрыми манипуляциями с CSS стилями: элементу ul задаем свойство display со значением table а тегам li display — table-cell и, вуаля, перед нами уже горизонтальное меню в виде таблицы со всеми вытекающими свойствами.

Смотрим на пример с >

CSS, опять же, стандартный, отличаются только эти строки:

Как и в первом способе, пункты меню не будут растянуты на всю ширину нашего оберточного дива. Чтобы их растянуть следует дописать свойства table-layout — fixed и width — 100% к элементу ul. В этом случае ul растянутся на всю ширину, а элементы li станут одной ширины (смотрим пример с >

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

Растянуть фон меню по ширине экрана — Вопросы по CSS

Традиционно наш дайджест обозревает новости, расширения, шаблоны и статьи из мира Joomla.

JComments 4.0.4 — компонент комментариев для Joomla 4

21.11.2021 вышла новая версия популярного компонента комментариев JComments. Компонент развивается сообществом на GitHub. Все релизы отмечены как maintaince release. Это означает поддержку расширения в работоспособном состоянии без добавления нового функционала.

Небольшая подборка статей на русском по Joomla 4

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

Как растягивать элементы по горизонтали при использовании flex-box

Я пытаюсь растянуть внутренние объекты по горизонтали, чтобы они заполнили ширину своего контейнера.

Высота внутренних элементов div растягивается благодаря свойству:

Как растянуть ширину этих элементов?

2 ответа

Просто добавьте flex:1 к гибким элементам:

Вы используете flexbox со значением по умолчанию flex-direction: row . Которая размещает элементы в ряд и регулирует их ширину в зависимости от их исходной ширины и свойств гибкости.

Это означает, что align-items: stretch; растянет элементы таким образом, чтобы они соответствовали родительскому элементу, но не по ширине, а по высоте. поскольку их ширина определяется свойством flex;

Используйте flex: 1 1 auto; , чтобы подогнать элемент к своему родительскому.

Фон для меню сайта

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

Представляем вашему вниманию подборку из 30 горизонтальных меню для сайта. Все меню сделаны только с применением CSS и HTML и проверялись на работоспособность в браузерах IE6, IE7, IE8, Firefox, Opera, Safari, Chrome. Все представленные исходники запакованы в архивы.

В каждом из архивов вы найдете, HTML файл содержащий структуру меню, файл style.css, который содержит стили для данного меню и папку » images» в которой располагаются изображения для данного меню. Все виды меню построены на CSS и списках UL LI, что обеспечивает легкое редактирование и добавление пунктов меню при необходимости.

1. Темно синее CSS меню.

Меню в темно синем стиле 100% ширины.

2. Стильное зеленое меню.

Меню в зеленом стиле подойдет для многих цветов фона.

3. Глянцевое меню.

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

4. Стильное коричневое меню.

Меню в коричневом цвете, затемняющееся при наведении кусора.

5. Черное глянцевое меню.

Черное меню с глянцевым эффектом на белом фоне.

6. Округлое синее меню.

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

7. Разноцветное меню

Разноцветное меню с эффектом разгибания уголка при наведении.

8. Шоколадный стиль меню.

Меню в шоколадном стиле с эффектом выпуклости при наведении.

9. Блейзер меню.

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

10. Flasy меню.

Черное меню с зеленым эффектом свечения при наведении курсора.

11. Orcom меню.

Меню с удивительным эффектом при наведении курсора, ширина меню установлена в 700 px.

12. Oplaz Css меню.

Css меню с простым эффектом при наведении курсора, шириной 700 px и зеркальным эффектом.

13. Quaza CSS меню.

Темно красное меню, длиной 700 px с простым эффектом при наведении и оранжевым активным пунктом.

14. Flosy CSS меню.

CSS меню с эффектом рамки при наведении на пункт, меню сделано с применением одного изображения.

15. Vonso CSS меню.
CSS меню с красивым фоном.16. Razer меню.

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

17. Brány CSS меню.

Простое меню с закругленными углами.

18. Capzl CSS меню.

Глянцевое горизонтальное меню с зеркальным отражением.

19. Skin CSS меню.

Горизонтально меню со скругленными углами и активными пунктами в виде вкладок.

20. Nozml меню.

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

21. Rapak CSS меню.

Горизонтальное меню с красивым фоном и эффектом рамки при наведении курсора на пункт.

22. Czoo CSS меню.

Простое горизонтальное меню 100%, ширины с эффектом при наведении курсора.

23. Sapy CSS меню.

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

24. Голубое CSS меню.

Меню с красивым фоном, имеющим изогнутый вид.

25. Cremy CSS меню.

Меню с затемненными уголками пунктов, может быть использовано на светлых и темных фонах.

26. Sloon CSS меню.

Светлое меню с оранжевыми активными пунктами.

27. Artine CSS меню.

Креативное горизонтальное меню.

28. Woody CSS меню.

Меню с необычным оформлением пунктов.

29. Серебристое меню.

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

30. Глянцевое меню.

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

Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента

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

Содержание:
HTML-разметка и базовые стили для горизонтального меню
1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
2. Адаптивное меню для свадебного сайта
3. Адаптивное меню с фестонами
4. Адаптивное меню на ленточке
5. Адаптивное меню с логотипом по середине
6. Адаптивное меню с логотипом слева

HTML-разметка и базовые стили для горизонтального меню

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

, который в свою очередь занимает всю ширину его блока-контейнера.

HTML разметка для горизонтальной навигации

Горизонтальное меню, находящееся внутри тега

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

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

See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.

Способ 1. li

Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li . Дальше стилизуем ссылки по своему желанию.

Способ 2. li

Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul , расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a и стилизуем их по своему желанию.

Способ 3. li

Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a и стилизуем их по своему желанию.

Способ 4. ul

Делаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a и стилизуем их по своему желанию.

CSS: выравнивание по центру

Смотрите также указатель всех приёмов работы.

Центрирование

Общая функция CSS — центрирование текста или изображения. Фактически, существует три вида центрирования:

Центрирование строк текста
Центрирование текстового блока или изображения
Центрирование текстового блока или изображения по вертикали

В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:

Выравнивание по вертикали в уровне 3
Выравнивание по вертикали и горизонтали в уровне 3
Выравнивание в области просмотра в уровне 3

Центрирование строк текста

Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством ‘text-align’:

P { text-align: center }
h3 { text-align: center }

которое отображает каждую строку в абзаце P или заголовке h3 по центру между полями, вот так:

Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P>Этот довольно ...

Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.

Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG src="..." alt="...">

Следующее изображение центрировано:

Вертикальное центрирование

CSS уровня 2 не обладает свойством вертикального центрирования. Вероятно, оно появится в версии CSS уровня 3 (см. ниже). Но даже в CSS2 вы можете центрировать блоки вертикально при помощи комбинирования нескольких свойств. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, т.к. содержимое ячейки таблицы

может быть выровнено по центру вертикально.

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

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV>
  <P>Этот маленький абзац...
</DIV>

Этот маленький абзац центрирован вертикально.

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

<div class=container3>
  <p>Этот абзац…
</div>

таблица стилей выглядит так:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div. container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Основные правила:

Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
Сам элемент сделайте абсолютно позиционированным (position: absolute).
Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

div.container5 {
  height: 10em;
  display: flex;
  align-items: center }
div.container5 p {
  margin: 0 }

Вертикальное и горизонтальное центрирование в CSS уровня 3

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

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

Центр!

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

<div class=container4>
  <p>Центр!
</div>

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

div.container4 {
    height: 10em;
    position: relative }
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

Центр!

с этой таблицей стилей:

div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center }
div. container6 p {
  margin: 0 }

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

<html>
  <style>
    body {
        background: white }
    section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }
  </style>
  <section>
    <h2>Красиво выровнен по центру</h2>
    <p>Этот текстовый блок выровнен вертикально по центру. 
    <p>И горизонтально, если окно достаточно широкое.
  </section>

Вы можете увидеть результат в отдельном документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow. )

Created 5 May 2001;
Last updated

Примеры дизайна меню сайтов

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

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

Хороший веб-сайт не может обойтись без навигации по следующим причинам:

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

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

Горизонтальное меню

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

В виде вкладок:

В виде ссылок с тем или иным оформлением:

С использованием иконок:

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

То же самое касается пункта, на который наведен курсор. В этом примере он на Notes:

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

Недостаток горизонтальных меню состоит в том, что количество ссылок, которые можно в них добавить, ограничено. Поэтому сайты со сложной структурой используют либо раскрывающиеся меню, либо разделяют разные уровни навигации на два меню. Например, на этом сайте используется и раскрывающееся меню-гамбургер, и второе горизонтально меню (оно выполнено в виде вкладок Magazine, Popular и Recommended):

А здесь присутствуют два горизонтальных меню, причем «раскрывается» только один из подпунктов верхнего меню — последний. Это не случайно, ведь больше всего внимания привлекают первые и последние пункты, Features и Resources:

А вот пример одновременного использования горизонтального и вертикального меню:

Вертикальное меню

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

В отличие от горизонтального меню, дизайн вертикального меню сайта не так часто выполняется в виде вкладок:

Но зато здесь гораздо чаще используется группирование ссылок:

Использование иконок также распространено. Кроме того, иногда вертикальное меню можно минимизировать и отображать только иконки:

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

Раскрывающееся меню

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

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

Или же полный набор разделов и подразделов:

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

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

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

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

В вертикальном меню:

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

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

Идея выезжающего меню интересно реализована в теме Wordie для WordPress:

На сайте веб-приложения Issuefly реализована возможность переключаться между уже посещенными разделами, как если бы они были открытыми окнами в операционной системе, используя меню-гамбургер:

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

Мы, студия stfalcon.com, разрабатываем дизайны с удобной и функциональной навигацией и будем рады создать веб-сайт или приложение для вашего бизнеса.

HTML5 | Создание панели навигации

Последнее обновление: 27.04.2016

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

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

Вертикальное меню

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
		<style>
			ul.nav{
				margin-left: 0px;
				padding-left: 0px;
				list-style: none;
			}
			ul.nav a {
				display: block;
				width: 7em;
				padding:10px;
				background-color: #f4f4f4;
				border-top: 1px dashed #333;
				border-right: 1px dashed #333;
				border-left: 5px solid #333;
				text-decoration: none;
				color: #333;
			}
			ul.nav li:last-child a {
				border-bottom: 1px dashed #333;
			}
		</style>
    </head>
    <body>
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">О сайте</a></li>
		</ul>
    </body>
</html>

После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т. д.

Горизонтальное меню

Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block.

Использование float

Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li, в который заключена ссылка, устанавливается float: left;. Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка обтекает левый элемент списка.

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
		<style>
			ul. nav{
				margin-left: 0px;
				padding-left: 0px;
				list-style: none;
			}
			.nav li { 
				float: left;
			}
			ul.nav a {
				display: block;
				width: 5em;
				padding:10px;
				margin: 0 5px;
				background-color: #f4f4f4;
				border: 1px dashed #333;
				text-decoration: none;
				color: #333;
				text-align: center;
			}
			ul.nav a:hover{
				background-color: #333;
				color: #f4f4f4;
			}
		</style>
    </head>
    <body>
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Блог</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">О сайте</a></li>
		</ul>
    </body>
</html>

inline и inline-block

Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline. После этого для элемента ссылки, которая располагается в элементе li, мы можем установить display: inline-block:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Панель навигации в HTML5</title>
		<style>
			ul.nav{
				margin-left: 0px;
				padding-left: 0px;
				list-style: none;
			}
			.nav li { 
				display: inline; 
			}
			ul.nav a {
				display: inline-block;
				width: 5em;
				padding:10px;
				background-color: #f4f4f4;
				border: 1px dashed #333;
				text-decoration: none;
				color: #333;
				text-align: center;
			}
			ul.nav a:hover{
				background-color: #333;
				color: #f4f4f4;
			}
		</style>
    </head>
    <body>
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Блог</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">О сайте</a></li>
		</ul>
    </body>
</html>

НазадСодержаниеВперед

Адаптивное меню на CSS flexbox

Всем привет! На начало 2018 года, по данным сайта Can I Use, верстка на flexbox-ах, поддерживается браузерами на 97. 8%. Это отличные показатели для этой уже далеко не новой технологии по верстки сайтов. Теперь уже нет причин, почему не пользоваться этим удобным способом верстки. Чем мы сейчас и займемся.

Сверстав несколько макетов на CSS flexbox-ах, уже не хочется возвращаться к устаревшим float-ам и даже к такому любимому среди верстальщиков фреймворку, как Bootstrap. Хотя, Bootstrap ещё рано списывать со счетов, ведь используя его знаменитую сетку, можно «не париться» по поводу медиа запросов.

На этом уроке мы сверстаем шапку сайта с типичным адаптивным меню с применением flexbox CSS метода.

Шапка состоит из трех логичных блоков:

Блок с логотипом
Блок с меню, сделанное на списках
Блок с иконкой и номером телефона

Эти три блока будут помещены в общий внешний блок-обертку header, который внутри себя будет делать display: flex; для трех блоков.

Внутри блока nav, еще раз пропишем display: flex; для пунктов меню. Таким образом мы добьёмся гибкости, при уменьшении размеров экрана, пункты меню могут выстраиваться друг под другом.

Для наглядной демонстрации сделаем всю HTML разметку для шапки сайта.


<body>

  <header>

   <div>

   <a href="#"><img src="img/logo.png" alt=""></a>

   </div>

   <nav>

    <ul>

     <li><a href="#">Города</a></li>

     <li><a href="#">Замки</a></li>

     <li><a href="#">Красоты</a></li>

     <li><a href="#">Маршруты</a></li>

     <li><a href="#">Контакты</a></li>

    </ul>

   </nav>

   <div>

   <i aria-hidden="true"></i>

   +380973457685

   </div>

  </header>

</body>

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

А сейчас внимание! Достаточно указать двум блокам display: flex; и всё содержимое шапки вытянется в строчку.


.header {

   display: flex;

}.header .menu ul {

   display: flex;

}

Вот так работает flexbox.

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


*{

  margin: 0;

  padding: 0;

}body {

  background-color: #fff;

  font-family: "Open Sans", sans serif;

  line-height: 1.5;

}
.header {

  border: 2px solid #ccc;

  display: flex;

  flex-wrap: wrap; /*перенос строки */

  justify-content: space-between; /*прижимает содержимое к краям */

  align-items: center; /*выравнивает элементы по центру на вертикальной */

}
. header .logo {

  padding-left: 30px;

}
.header .menu ul {

  display: flex;

  list-style: none;

}
.header .menu ul li {

  margin: 20px 10px;

}
.header .menu ul a {

  text-transform: uppercase;

  text-decoration: none;

  font-weight: bold;

  color: #06a327;

}
.phone {

  font-size: 110%;

  color: #333;

  padding-right: 40px;

}

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

Например, на ширине экрана 900 пикселей, блок с телефон прижался к левому краю шапки.

Решение проблемы, вы видите ниже. Выравниваем блок .phone по центру.


@media screen and (max-width: 900px) {

  .phone {

    margin: auto;

  }

}

На ширине экрана 500 пикселей начинает срезаться меню, так как не помещается в строчку.

Легким движением руки для ul, прописываем свойство flex-direction: column; которое возвращает списки в естественное блочное состояние.


@media screen and (max-width: 500px) {

  .header  {

    flex-direction: column;

  }

  .header .menu ul {

    flex-direction: column;

    align-self: center;

  }

  .header .menu ul li {

    margin: 5px;

  }

}

Разобраться с адаптивной версткой на flexbox-ах, Вам поможет этот видеокурс «Вёрстка сайта с нуля»

Создано 08.03.2018 10:18:00
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov. ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Как разместить меню на всю ширину страницы с помощью HTML и CSS?

Спросил 6 лет, 4 месяца назад

Изменено 6 лет, 4 месяца назад

Просмотрено 2k раз

Я только что начал работать с веб-языком (HTML, CSS) и создаю свою первую страницу. Я нахожу шаблон html горизонтального меню, которое я хотел бы применить к своей странице. К сожалению, я не могу изменить его, потому что он распространяется на всю ширину моей страницы.

Я исследую сеть, пытаясь найти, как это сделать, и я думаю, что это должно быть связано со свойством width = 100% .

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

Вот код:

 корпус
{
 цвет фона: черный; /* Le Fond de la page sera noir */
}

#nav
{
заполнение: 0;
}

#нав ли
{
дисплей: встроенный;
}

#нав ли а
{
семейство шрифтов: Arial;
размер шрифта: 12px;
текстовое оформление: нет;
плыть налево;
отступ: 10 пикселей;
цвет фона: #333333;
цвет:#ffffff;
нижняя граница: 1px;
нижний цвет границы:#000000;
нижняя граница: сплошная;
}

#nav li a: hover
{
цвет фона:#9В1С26;
заполнение снизу: 12px;
нижняя граница: 2px;
нижний цвет границы:#000000;
нижняя граница: сплошная;
поля:-1px;
}

 
<голова>
    <метакодировка="utf-8" />
 css" />
    Антуан

<тело>
   
<ул>
Главная
О нас
Услуги
Товары
Карта сайта
Справка
Свяжитесь с нами

HTML
CSS
МЕНЮ
NAV

Вы можете сделать это, показывая свой UL ( #NAV ID), как встроенный вклад , а затем настройка . Кроме того, вы должны добавить background-color , чтобы увидеть эффект.

 корпус
{
 цвет фона: черный; /* Le Fond de la page sera noir */
}

#nav
{
заполнение: 0;
отображение: встроенный блок;
ширина: 100%;
цвет фона: #333333;
}

#нав ли
{
дисплей: встроенный;
}

#нав ли а
{
семейство шрифтов: Arial;
размер шрифта: 12px;
текстовое оформление: нет;
плыть налево;
отступ: 10 пикселей;
цвет фона: #333333;
цвет:#ffffff;
нижняя граница: 1px;
нижний цвет границы:#000000;
нижняя граница: сплошная;
}

#nav li a: hover
{
цвет фона:#9В1С26;
заполнение снизу: 12px;
нижняя граница: 2px;
нижний цвет границы:#000000;
нижняя граница: сплошная;
поля:-1px;
}

 
<голова>
    <метакодировка="utf-8" />
 css" />
    Антуан

<тело>
   
<ул>
Главная
О нас
Услуги
Товары
Карта сайта
Справка
Свяжитесь с нами

Я считаю, что вам следует добавить это, если вы хотите, чтобы ваше меню занимало 100% ширины вашей страницы.

 #nav
{
заполнение: 0;
ширина: 100%;
плыть налево;
цвет фона: #333333;
}

background-color: #333333 — добавлено, чтобы сделать его более заметным.

 корпус {
   цвет фона: белый;
   /* Le Fond de la page sera noir */
 }
 #nav {
   /* сброс ненумерованного списка, чтобы не использовать стили списка по умолчанию */
   стиль списка: нет;
   заполнение: 0;
   маржа: 0;
   /* добавить гибкий дисплей с пробелами и центрированием по вертикали. .. также остановить перенос */
   дисплей: гибкий;
   выравнивание содержимого: пространство вокруг;
   выравнивание элементов: по центру;
   гибкая обертка: без обертки;
   /* цвет, необходимый для фона, также должен выглядеть последовательно */
   цвет фона: #333333;
 }
 #нав ли {
   семейство шрифтов: Arial;
   размер шрифта: 12px;
   текстовое оформление: нет;
   плыть налево;
   отступ: 10 пикселей;
   цвет: #ffffff;
   нижняя граница: 2px;
   цвет нижней границы: прозрачный;
   нижняя граница: сплошная;
 }
 #nav li a:hover {
   /* избегайте изменения размера или положения элементов при наведении курсора... это может привести к скачку содержимого */
   цвет фона: #9В1С26;
   нижний цвет границы: #000000;
 }

 <ул>
  Главная
  
  О нас
  
  Сервисы
  
  Товары
  
  Карта сайта
  
  Справка
  
  Связаться с нами

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

Попробуйте поместить список меню в DIV следующим образом:

 body
{
 цвет фона: черный; /* Le Fond de la page sera noir */
}
#навдив
{
заполнение 0;
цвет фона: #333333;
ширина: 100vw;
высота: 34 пикселя;
}
#навул
{
заполнение: 0;
ширина: 100Вт;
}

#навул ли
{
дисплей: встроенный;
}

#навул ли а
{
семейство шрифтов: Arial;
размер шрифта: 12px;
текстовое оформление: нет;
плыть налево;
отступ: 10 пикселей;
цвет фона: #333333;
цвет:#ffffff;
нижняя граница: 1px;
нижний цвет границы:#000000;
нижняя граница: сплошная;
}

#навул ли а: наведите курсор
{
цвет фона:#9В1С26;
заполнение снизу: 12px;
нижняя граница: 2px;
нижний цвет границы:#000000;
нижняя граница: сплошная;
поля:-1px;
}

 

<голова>
    <метакодировка="utf-8" />
    
    Антуан

<тело>

    <дел>
<ул>
            Главная
            О нас
            Услуги
            Товары
            Карта сайта
            Справка
            Свяжитесь с нами

Я рекомендую вам изучить и использовать бутстрап, потому что он делает это легко. В вашем случае это очень просто, вы создадите 2 элемента

за пределами вашего navbar . Один, чтобы сделать ширину 100% и применить ваш фон, а затем другой, чтобы центрировать ваш код.

Мой ответ на ваш вопрос:

 <стиль>
.полная ширина{
    ширина: 100%;
}
.centerlize{
    ширина: 1024 пикселей;
    поле: 20px авто;
}

<тело>
    <дел>
        <дел>
            <ул>
                Главная
                О нас
                Услуги
                Товары
                Карта сайта
                Справка
                Свяжитесь с нами

Твой ответ

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нужна полноразмерная горизонтальная панель навигации — HTML и CSS — Форумы SitePoint

makamo661 23 февраля 2021 г. , 15:32

У меня есть следующий код для создания горизонтальной панели навигации, однако она не заполняет всю ширину браузера, как мне хотелось бы. Что не так с моим кодом? Теги привязки отсутствуют, потому что html создается динамически с помощью javascript и имеет событие щелчка для перехода к разделам. Это для задания, так что это должно быть сделано таким образом.

 <заголовок>
    <навигация>

      
      <ул>

#navbar__list {
тип стиля списка: нет;
цвет: #FFF;
поле: 0 авто 0 авто;
заполнение: 0;
положение: фиксированное;
сверху: 0;
ширина: 100%;
минимальная ширина: 100%;
переполнение: авто;
}
#navbar__list ли {
курсор: указатель;
цвет фона: #dddddd;
цвет: #000;
отступ: 8px;
дисплей:блок;
ширина: 31%;
плыть налево;
граница: 1px сплошная #000;
выравнивание текста: по центру;
}

2 лайка

23 февраля 2021 г. , 15:40

Попробуйте изменить min-width: на 50% или оставить 100% и сделать width: 50%

2 лайка

Гэндальф 23 февраля 2021 г., 15:45

ладанс37:

сделать ширина: 50%

Как и заставят его занимать всю ширину?

3 лайков

ladans37 23 февраля 2021 г., 15:48

@Gandalf ну тогда оставьте min-width: to 100%

1 Нравится

Гэндальф 23 февраля 2021 г. , 15:51

@makamo661 вы указали, что элемент списка должен быть 31%. Это не полная ширина.

Редактировать: вы указали ширину 100% в списке панели навигации, поэтому нет смысла добавлять и основную ширину.

3 лайка

23 февраля 2021 г., 16:00

@Гэндальф Я тоже это вижу. Так что это может быть его проблема.

1 Нравится

John_Betong 23 февраля 2021 г., 16:21

макамо661:

 дисплей:блок;
ширина: 31%;
плыть налево;

У меня возникло бы искушение временно забыть о вставке JavaScript и жестко запрограммировать пару элементов

Как только он сделает то, что вы хотите, удалите жестко закодированные элементы и добавьте JavaScript.

Также попробуйте

 display: inline-block;
цвет фона: Аква;
ширина: 31%;
/* плыть налево: */

3 лайка

Erik_J 23 февраля 2021 г., 17:44

макамо661:

Это для задания, так что это должно быть сделано именно так.

Код, который вы разместили, является заданием?

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

4 лайка

23 февраля 2021 г. , 18:20

макамо661:

поплавок:левый;

Использование плавающих элементов — довольно «старый» способ позиционирования пунктов меню. Это потребует от вас их размера пропорционально общей ширине.
Было бы проще использовать что-то вроде display table или flex, так как они могут распределять пространство равномерно для каждого элемента или делить доступное пространство пропорционально размеру каждого элемента, не прибегая к самостоятельной работе.

4 лайка

makamo661 23 февраля 2021 г., 23:58

#10

Я изменил ширину элементов списка с 31% до 32%, и теперь это полная ширина.

4 лайка

PaulOB 24 февраля 2021 г., 00:20

#11

Возможно, у вас есть 3 предмета, которые вы хотите сделать равными на 100%?

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

Если вы действительно хотите, чтобы три пункта меню в сумме составляли точно 100%, тогда ваш метод немного выдуманный. 3 х 32% не равно 100%.

33,3333% x 3 ближе, но тогда вам нужно будет использовать модель рамки для учета отступов и границ.

Как уже говорили выше, это не совсем так, как это делается в наши дни.

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

5 лайков

makamo661 24 февраля 2021 г. , 14:21

#12

Да, у меня есть 3 вкладки, которые я хочу сделать на всю ширину. Я не знаю, что такое модель бордюрной коробки. Я попробовал размер коробки: border-box; но это не изменило дизайн. Как мне реализовать flex box?

2 лайка

24 февраля 2021 г., 14:36

№13

Это может помочь вам понять, как работают гибкие блоки

CSS-Tricks

Полное руководство по Flexbox | CSS-трюки

Наше подробное руководство по макету CSS flexbox. Это полное руководство объясняет все о flexbox, уделяя особое внимание всевозможным свойствам родительского элемента (flex-контейнера) и дочерних элементов (flex-элементов). Это также…

Расчетное время. время чтения: 13 минут

Я много хожу на этот сайт, а так же на w3schools

И вот немного на бордюре модель коробки

https://css-tricks. com/box-sizing/ . Надеюсь это поможет.

1 Нравится

ПолОБ 24 февраля 2021 г., 14:41

№14

макамо661:

Как реализовать flex box?

Вот так:

33% не обязательно должны быть такими точными, если они составляют менее трети пробела. Flex автоматически заполнит любые пробелы. Это может быть flex:1 0 0% и все равно выглядеть почти так же, если только у вас нет пунктов меню с большим количеством текста, и тогда они будут шире и т. д. Однако они всегда будут соответствовать.

1 Нравится

makamo661 24 февраля 2021 г., 15:45

№15

Спасибо, ladans37 и PaulOB и спасибо всем остальным, кого я не назвал.

5 лайков

24 февраля 2021 г., 15:47

№16

Курс. Вы должны изучить те статьи, на которые я дал вам ссылку. Они полезны. Лично мне нравится сайт с CSS-Tricks, и вообще мне нравится этот сайт, потому что он объясняет вещи картинками

1 Нравится

система закрыто 26 мая 2021 г., 22:48

# 17

Эта тема была автоматически закрыта через 91 день после последнего ответа. Новые ответы больше не допускаются.

21 полноэкранное меню CSS

Коллекция отобранных бесплатных полноэкранных меню HTML и CSS примеров кода из codepen и других ресурсов. Обновление декабрьской коллекции 2018 года. 11 новых предметов.