Плавающее меню css: Как сделать фиксированное меню

  

                            

                                

                                    

                                         ГЛАВНАЯ 
                                         БИЗНЕС 
                                         РАЗВЛЕЧЕНИЯ 
                                         ПОЛИТИКА 
                                         СПОРТ 
                                         ЕЖЕНЕДЕЛЬНЫЕ ПОБЕДИТЕЛИ 
                                    
                                    

                                         МАГАЗИН 
                                        ECARDS 
                                    
                                   

                                        
                                             
                                        
                                        
                                             
                                        
                                    
                                
                            
                        
                    

Вот css:

 

#wrapper {margin: 0; отступ: 0; width: auto! important;}
# заголовок-контейнер {фон: # 000}
#header {padding: 10px 0 30px; }
.col-full {ширина: 960 пикселей; маржа: 0 авто; }


# nav-container {фон: # 000; нижнее поле: 0 пикселей; }
#navigation {padding: 0; маржа: 0 авто; фон: # 05c0c9;
}
#navigation # main-nav {}

#nav

{
    фон: # 05c0c9;
    высота: 28 пикселей;
    маржа: 0px;
    отступ слева: 0 пикселей;
}

#nav li
{
    маржа справа: 0 пикселей;
    высота: 28 пикселей;
}

#nav li, #subnav li

{
    плыть налево;
    стиль списка: нет;
}

#nav a, #nav a: побывал

{
    цвет: #fff;
    размер шрифта: 12 пикселей;
    высота строки: 24 пикселя;
    текстовое оформление: нет;
    font-weight: жирный;
    преобразование текста: прописные буквы;
    плыть налево;
    отступ: 4px 10px 0 10px;
}

#nav a: hover
 {фон: # 70FCEF; цвет: # 000;
}

#nav.ссылки-право {float: right; margin: 0 10px 0 0;}
#nav .icons a {float: right; фон: нет; отступ: 6px 0 0 5px; }

/ * -------------------------------------------
| КОНЕЦ ПОЛЬЗОВАТЕЛЬСКОГО ЗАГОЛОВКА / НАВИГАЦИИ
--------------------------------------------- * /

  

Схожу с ума… и помощь будет признательна.

prabhuignoto / vue-float-menu: 🎈Настраиваемое плавающее меню для Vue

✨ Характеристики

• 👌 Перетащите меню в любое место экрана.
• 👓 Система интеллектуального меню определяет края экрана и автоматически переворачивает меню.
• 👍 Поддержка вложенных меню.
• ⌨ Доступна клавиатура.
• 🌈 Поддержка пользовательских тем.
• 💪 Построен с использованием машинописного текста.
• 🧰 Интуитивно понятный API с поведением на основе данных.
• 🌠 Создан с использованием нового Vue 3.

Содержание

⚡ Установка

 пряжа установить vue-float-menu 

🚀 Начало работы

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

vue-float-menu находит оптимальную ориентацию меню в зависимости от его положения. например, если меню расположено у нижнего края и для ориентации установлено значение , нижний , компонент автоматически перевернет ориентацию на , верхний .

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

 <шаблон>
  <плавающее меню
    : position = "'вверху слева'"
    : Dimension = "50"
    : menu-data = "items"
    : on-selected = "handleSelection"
  >
    Тащить
  


<сценарий>
импортировать {FloatMenu} из "vue-float-menu";
импортировать "vue-float-menu / dist / vue-float-menu.css ";

экспорт по умолчанию {
  составные части: {
    FloatMenu,
  },
  настраивать() {
    const handleSelection = (selectedItem) => {
      console.log (selectedItem);
    };
    возвращаться {
      handleSelection,
    };
  },
  данные() {
    возвращаться {
      Предметы: [
        {name: "New"},
        {
          имя: "Редактировать",
          subMenu: {
            name: "элементы редактирования",
            элементы: [{name: "Copy"}, {name: "Paste"}],
          },
        },
        {
          name: "Открыть недавние"
        },
        {
          name: "Сохранить",
        }
      ],
    };
  },
};
 

Стойка

Позиция

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

• вверху слева (по умолчанию)
• вверху справа
• внизу слева
• внизу справа

 
    <шаблон # значок>
      
    
   

Размер заголовка меню

Dimension prop можно использовать для установки ширины и высоты заголовка меню.Опора принимает одно числовое значение для установки высоты и ширины заголовка меню.

 <поплавковое меню: размер = 50>
    <шаблон # значок>
      
    
   

Размер меню

prop для установки высоты и ширины меню.

 <всплывающее меню
    : размер = 50
    : menu-Dimension = "{высота: 400, ширина: 300}"
    position = "нижний правый"
  >
    <шаблон # значок>
      
    
   

Стиль меню

Компонент поддерживает два режима: выдвижной (по умолчанию) и гармошкой .Гармошка больше подходит для мобильных устройств.

 <всплывающее меню
    position = "нижний правый"
    откидные края
    menu-style = "аккордеон"
  >
    <шаблон # значок>
      
    
   

Заполнение меню

Используйте опцию menu-data для создания простых или вложенных меню по своему вкусу. menu-data принимает массив MenuItem type

MenuItem свойства

Здесь мы создаем простую структуру меню с 3 пунктами меню без подменю.

 const menuData = [
  {name: "New"},
  {
    имя: "Редактировать",
    subMenu: {
      name: "элементы редактирования",
      items: [{name: "Copy"}, {name: "Paste", disabled: true}],
    },
  },
  {divider: true},
  {
    name: "Открыть недавние",
    subMenu: {
      name: "недавние предметы",
      items: [{name: "Document 1"}, {divider: true}, {name: "Document 2"}],
    },
  },
] 

 <всплывающее меню
    : размер = 50
    : menu-Dimension = "{высота: 400, ширина: 300}"
    : menu-data = "menuData"
    position = "нижний правый"
  >
    
   

по выбору

ловушка для события выбора пункта меню.

 <всплывающее меню
    : размер = 50
    position = "нижний правый"
    : menu-Dimension = "{высота: 400, ширина: 300}"
    : menu-data = "{items: [{name: 'File'}, {name: 'Open'}]}"
    on-select = "handleSelection"
  >
    
   

Откидная кромка

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

 <всплывающее меню
    : размер = 50
    position = "нижний правый"
    откидные края
    on-select = "handleSelection"
  >
    
   

Фиксированное меню

Чтобы отключить перетаскивание и статически зафиксировать положение, установите fixed на true .По умолчанию эта опора отключена. Используйте эту опору вместе с опорой position prop, чтобы установить желаемое положение.

 
    <шаблон # значок>
      
    
   

🎨 Пользовательский значок

Чтобы настроить значок меню, просто передайте любое содержимое между тегами float-menu . Здесь мы визуализируем собственный значок.

 <всплывающее меню
    : размер = 50
    : menu-data = "menuData"
  >
    <шаблон # значок>
      
    
   

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

 <всплывающее меню
    : размер = 50
    : menu-data = "menuData"
  >
    Нажмите
   

🎭 Поддержка иконок

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

Передайте отдельные значки (или изображения) как шаблоны, отмеченные уникальным идентификатором гнезда . Убедитесь, что идентификаторы соответствуют свойству iconSlot в массиве элементов.

 <всплывающее меню
  : menu-data = "items"
>
  <шаблон # новый>
    
  
  <шаблон #edit>
    
  


экспорт по умолчанию defineComponent ({
  name: "MenuExample",
  данные()  {
    возвращаться {
      Предметы: [
        {имя: "Новый файл", iconSlot: "новый"},
        {name: "Новое окно", iconSlot: "edit"},
      ]
    }
  }
}) 

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

 <всплывающее меню
  : menu-data = "items"
>
  <шаблон #cut>
    
  


экспорт по умолчанию defineComponent ({
  name: "MenuExample",
  данные()  {
    возвращаться {
      Предметы: [
        {имя: "редактировать",
        subMenu: [{имя: "вырезать", iconSlot: "вырезать"}]},
      ]
    }
  }
}); 

🌈 Тема

Настройте цветовые схемы с помощью темы prop.

 <всплывающее меню
    : размер = 50
    : theme = "{
      первичный: '# 00539C',
      textColor: '# 000',
      menuBgColor: '#fff',
      textSelectedColor: '#fff',
    } "
  >
    Нажмите
   

📦 Настройка сборки

 # установить зависимости
пряжа установить

# start dev
пряжа, беги, разработчик

# запускаем css linting
пряжа запустить lint: css

# линт все
пряжа пряжа ворс: все

# пакет lib
npm run накопительный пакет 

🔨 Содействие

1. Разветвите его (https: // github.com / prabhuignoto / vue-float-menu / fork)
2. Создайте свою функциональную ветку ( git checkout -b new-feature )
3. Зафиксируйте изменения ( git commit -am 'Добавить функцию' )
4. Push to the branch ( git push origin new-feature )
5. Создать новый запрос на слияние

🧱 Построен с

Банкноты

• В проекте используется vite вместо @ vue / cli. Я выбираю vite из-за скорости, и я также верю, что за vite будет будущее.

Мета

Прабху Мурти — @ prabhumurthy2 — [email protected]

https://www.prabhumurthy.com

Распространяется по лицензии MIT. См. ЛИЦЕНЗИЯ для получения дополнительной информации.

https://github.com/prabhuingoto/

Как добавить залипаемое меню для плавающей навигации в WordPress

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

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

Мы собираемся использовать Sticky Menu (или что угодно!) В плагине Scroll для stick нашей навигации. Это название звучит очень сложно, поэтому для простоты я назову плагин «Прикрепленное меню».

Что такое липкие или плавающие меню?

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

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

Установка плагина Sticky Menu

Войдите в административную панель WordPress.

В левом навигационном столбце наведите указатель мыши на ссылку «Плагины» и щелкните ссылку «Добавить».

В поле «Искать плагины…» введите «Прикрепленное меню».

Найдя плагин, нажмите кнопку «Установить сейчас».

Нажмите кнопку «Активировать».

Как работает липкое меню

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

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

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

В нашем примере используется Google Chrome DevTools. Другие браузеры могут отличаться, но в большинстве есть похожий инструмент.

Чтобы получить доступ к DevTools для определенного элемента, щелкните его правой кнопкой мыши на экране. Пользователи Mac будут использовать CMD click.

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

Окно DevTools откроется в отдельном окне или в виде панели сбоку или внизу окна браузера.

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

Итак, какой класс CSS нам нужен?

Вы заметите, что при наведении указателя мыши на строки кода в окне «Элементы» соответствующие области выделяются на странице.

Итак, наведите указатель мыши на код окна «Элементы», пока не будет выделено наше меню.

Хорошо, вот оно, но к нему привязано много CSS-селекторов. Есть идентификатор CSS и три или четыре класса CSS.

Но есть еще одна область DevTools, которая направит нас к тому, что мы ищем.

Раздел «Стили» справа сообщает нам, что при наведении курсора на код навигации .main-navigation является классом.

Вот что мы будем использовать.

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

Настройка липкого меню

Хорошо. добавим .main-navigation перейдите в конфигурацию плагина и посмотрите, что произойдет.

В левой навигационной колонке наведите указатель мыши на ссылку «Настройки» и щелкните ссылку «Прикрепленное меню (или что-нибудь!)».

Мы собираемся использовать поле «Sticky Element» для установки нашего липкого изображения. Здесь мы входим в селектор CSS.

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

Я введу .main-navigation в поле «Sticky Element». Обязательно начинайте имя селектора с точки.

Прокрутите вниз и нажмите кнопку «Сохранить изменения».

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

Но выглядит не очень хорошо, правда?

Давайте это исправим.

Применение цвета фона к липкому меню

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

Мы собираемся сделать это с помощью «дополнительного CSS». Где находится ваш дополнительный CSS, зависит от вашей темы. Но для многих тем он находится в «Настройщике тем».

В левой навигационной колонке наведите указатель мыши на ссылку «Внешний вид» и щелкните ссылку «Настроить».

Щелкните, чтобы открыть раздел «Дополнительные CSS».

Определите цвет фона для нашего класса, .main-navigation .

 .main-navigation {
  цвет фона: #ffffff;
} 

Введите CSS цвета фона в поле «Дополнительные CSS» и нажмите кнопку «Опубликовать».

Теперь, если мы прокрутим страницу вниз, мы не увидим текст под нашим меню.

Закрепление других элементов страницы

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

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

Класс CSS для изображения — .wp-image-1692 , и если мы добавим его в плагин, как мы это сделали с селектором меню, когда мы прокручиваем страницу вниз, изображение остается видимым.

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

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

Что произойдет, если вы удалите подключаемый модуль Sticky Menu

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

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

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

Обычно.

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

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

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

Вы помните кадры (и разве память заставляет вас чуть-чуть съежиться)? Вы используете на своем сайте липкие или плавающие элементы? Дай мне знать в комментариях.

Автор: Майкл Филлипс

Майкл Филлипс — ветеран индустрии веб-хостинга, помогающий людям максимально эффективно использовать свое присутствие в Интернете с 1995 года.

Floats Учебное пособие | HTML и CSS — это сложно

После плавания

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

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

  .page {
  ширина: 900 пикселей;
  маржа: 0 авто;
  граница: сплошной красный 1px;
}
  

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

Сброс поплавков

«Очистка» поплавка — это когда мы говорим блоку игнорировать любые поплавки. которые появляются перед ним.Вместо того, чтобы обтекать плавающий ящик, очищенный элемент всегда появляется после любых чисел с плавающей запятой. Это все равно, что вернуть коробку в вертикальный поток страницы по умолчанию.

Мы можем использовать свойство clear , чтобы сделать наш .footer спуститесь в самый низ страницы:

  .footer {
  ясно: оба;
  высота: 200 пикселей;
  цвет фона: # D6E9FE;
}
  

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

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

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

  
  
 Меню 

  

    
 Боковая панель 
    
 Контент 
  

  
 Нижний колонтитул 
 
  

Начиная с .menu и .footer находятся за пределами нашей fixed-width .page , это полная ширина окна, это именно то, что нам нужно для макета без полей.Однако обратите внимание, как .page снова имеет нулевую высоту, несмотря на то, что нижний колонтитул все еще очищает боковую панель и блоки содержимого.

Еще раз, единственные элементы в . Page являются плавающими, поэтому они не считайте его высоту. Другими словами, перемещение нижнего колонтитула наружу контейнера .page сломал наше исправление clear .

Скрытие переполнения

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

Решение — CSS переполнение свойство. Добавив переполнение : скрытое объявление в контейнер div, мы сообщаем его распознавать высоту любых содержащихся в нем плавающих элементов. Вот как мы можем добавить цвет фона к нашему элементу .page и получить его на самом деле рендера:

  .page {
  ширина: 900 пикселей;
  маржа: 0 авто;
  переполнение: скрыто;
  цвет фона: # EAEDF0;
}
  

Теперь вы должны увидеть светло-серый фон в .стр. вместо белого по умолчанию. Это еще не полное кровотечение (мы рассмотрим это в следующий раздел). Важной частью здесь является поведение переполнения : Скрытый . Без него мы не смогли бы увидеть .page фон контейнера, потому что он будет иметь нулевую высоту.

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

Удобная для мобильных устройств навигация по плавающей боковой панели на чистом CSS

Предварительный просмотр:

Описание:

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

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

Автоматически превращает боковую панель в нижнюю панель навигации на мобильных устройствах.

Мобильный просмотр:

Как пользоваться:

1. Создайте HTML-код для навигации на боковой панели.

2.Основные стили CSS для навигации по боковой панели.

 .navbar {
  положение: фиксированное;
  цвет фона: "# 23232e";
  переход: ширина 600 мс легкость;
}

.navbar-nav {
  стиль списка: нет;
  отступ: 0;
  маржа: 0;
  дисплей: гибкий;
  flex-direction: столбец;
  align-items: center;
  высота: 100%;
}

.nav-item {
  ширина: 100%;
}

.nav-item: last-child {
  маржа сверху: авто;
}

.nav-link {
  дисплей: гибкий;
  align-items: center;
  высота: 5бэр;
  цвет: "# b6b6b6";
  текстовое оформление: нет;
  фильтр: оттенки серого (100%), непрозрачность (0,7 дюйма);
  переход: «600 мс»;
}

.nav-link: hover {
  фильтр: оттенки серого (0%), непрозрачность (1 ";
  фон: "# 141418";
  цвет: "#ececec";
}

.link-text {
  дисплей: нет;
  маржа слева: 1бэр;
}

.nav-link svg {
  ширина: 2бэр;
  минимальная ширина: 2 бэр;
  маржа: 0 1.5рем;
}

.fa-primary {
  цвет: # ff7eee;
}

.fa-secondary {
  цвет: # df49a6;
}

.fa-primary,
.fa-secondary {
  переход: «600 мс»;
}

.logo {
  font-weight: жирный;
  текст-преобразование: прописные буквы;
  нижнее поле: 1 бэр;
  выравнивание текста: центр;
  цвет: "#ececec";
  фон: "# 141418";
  размер шрифта: 1,5 бэр;
  межбуквенный интервал: 0,3 канала;
  ширина: 100%;
}

.logo svg {
  преобразовать: повернуть (0deg ";
  переход: «600 мс»;
}

.логотип-текст
{
  дисплей: встроенный;
  позиция: абсолютная;
  слева: -999px;
  переход: «600 мс»;
}

.navbar: hover .logo svg {
  преобразовать: повернуть (-180deg ";
}

@media only screen и (min-width: 600px) {
  .navbar {
    верх: 0;
    ширина: 5бэр;
    высота: 100vh;
  }

  .navbar: hover {
    ширина: 16бэр;
  }

  .navbar: hover .link-text {
    дисплей: встроенный;
  }

  .navbar: наведите указатель мыши.логотип svg
  {
    левое поле: 11 бэр;
  }

  .navbar: наведите курсор на .logo-text
  {
    слева: 0px;
  }
} 

3. Превратите боковую панель навигации в нижнюю панель навигации.

 @media only screen and (max-width: 600px) {
  .navbar {
    внизу: 0;
    ширина: 100ввт;
    высота: 5бэр;
  }

  .logo {
    дисплей: нет;
  }

  .navbar-nav {
    flex-direction: ряд;
  }

  .nav-link {
    justify-content: center;
  }

  основной {
    маржа: 0;
  }
} 

Создание горизонтальной навигации с помощью поплавков | Основы макета CSS

Помимо простого примера обертывание текста вокруг изображений, 0:00

вы можете использовать поплавки для создавать целые веб-макеты.0:04

Например, вы можете разместить логотип и навигация в шапке, 0:07

столбцы содержимого в контейнере, или ссылки в нижнем колонтитуле. 0:11

Как мы узнали из предыдущего видео, по умолчанию, 0:15

браузеры отображают контент в порядке что он встречается в разметке.0:18

Но мы можем манипулировать тот порядок с поплавками. 0:22

В настоящее время элементы в заголовке находятся в обычном документе с плавающей точкой. 0:26

Название сайта и 0:30

навигация складывается поверх каждого другие, как они появляются в разметке.0:31

В этом уроке Я собираюсь выложить имя и 0:39

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

Таким образом, у вас будет лучше понимание того, как работает макет флота 0:45

по сравнению со встроенным и встроенным блоком методы, о которых вы узнали ранее.0:49

Во-первых, я хочу разместить название сайта элемент слева от заголовка. 0:53

Итак, вернемся к моей таблице стилей, внутри медиа-запроса, 1:00

Я создам новое правило, которое нацелен на имя класса. 1:03

Внутри правила добавлю поплавок свойство и установите значение слева.1:13

Когда я вернусь и обновлю страницу, 1:20

вы можете увидеть, как элемент плавает в левой части заголовка. 1:22

Обратите внимание, как навигация больше не уважает пространство элемента имени 1:27

раньше занимал страницу.1:32

Если я проверю элемент имени с инструментами разработчика Chrome, 1:34

обратите внимание, как элемент выглядит быть внутри основной навигации. 1:37

Подобно тому, что произошло в предыдущем видео, когда я разместил изображение 1:41

рядом с абзацами.1:45

И его ширина больше не занимает всю строку. 1:46

Теперь он настолько широк, насколько и его содержание. 1:49

Помните, что плавающий элемент технически элемент блочного уровня. 1:51

Но он ведет себя как встроенный элемент, а также 1:56

любой окружающий контент обтекает его.1:58

Также можно поставить несколько плавает на одной линии. 2:01

Итак, чтобы настроить этот макет, я собираюсь применить поплавок к основному элементу навигации. 2:04

Я хочу включить навигацию правая часть заголовка. 2:09

Вернувшись в мою таблицу стилей, в медиа запрос и прямо над правилом имени, 2:15

Я собираюсь создать новое правило который нацелен на имя класса nav.2:21

Я дам ему свойство float и установите значение вправо. 2:28

Когда я вернусь и обновлю страницу, мы видим, что и имя, и 2:33

основные элементы навигации теперь находятся в той же строке. 2:38

Но элементы навигации все еще в отдельных строках.2:42

Чтобы отобразить горизонтальную навигацию, 2:47

Я собираюсь выставить список элементы внутри main-nav. 2:48

Итак, вернемся к моему CSS, прямо под правило main-nav я создам новое правило 2:52

который нацелен на ли элементы внутри main-nav.2:57

Затем я перенесу их влево, набрав float: 3:02

оставил; Итак, теперь навигация 3:07

элементы располагаются рядом друг с другом в в том же порядке, в котором они появляются в разметке. 3:12

А теперь обратите внимание, что произойдет, если я перемещайте элементы навигации вправо.3:18

Так что я вернусь к главное правило навигации и 3:22

измените значение с плавающей запятой слева направо. 3:25

Перемещение элементов списка вправо меняет местами порядок навигационных ссылок, 3:32

потому что он подталкивает самый первый элемент списка справа от контейнера ul.3:36

Затем другие предметы плавают рядом к нему в порядке написания. 3:42

Я пойду и держите мои навигационные системы в левом положении, двигаясь вперед. 3:46

Так что я просто отменю это и измените значение с плавающей запятой обратно влево. 3:49

С поплавками нам не нужно беспокоиться о лишнее пустое пространство, которое может появиться 3:55

при использовании встроенного или встроенного блочного отображения.3:59

Плавающие элементы будут сидеть рядом друг с другом 4:02

независимо от HTML белое пространство между ними. 4:05

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

и примените левое поле к элементы списка внутри main-nav.4:13

Итак, ниже объявления float, 4:18

Я добавлю свойство margin-left и установите значение 12 пикселей. 4:20

Поплавки внутри заголовка вызвали обычное нежелательное поведение макета, которое вы 4:30

вероятно столкновение при использовании поплавков.4:34

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

Обратите внимание, как уменьшилась высота заголовка. 4:43

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

элементы навигации.4:50

Теперь это не ошибка браузера. 4:52

Вот как должны работать поплавки в браузере, но это хороший пример 4:54

где вы можете попасть в беду при использовании плавающих элементов. 4:58

В следующем видео я покажу вам, почему это происходит в макетах с плавающей запятой и 5:01

как этого не допустить.5:05