Прекратить использование дополнительных панелей навигации … возможно!

Введение

Navigation Architecture Component упрощает осуществление навигации, а также помогает визуализировать navigation flow вашего приложения. Библиотека предоставляет ряд преимуществ, в том числе:

• Автоматическая обработка транзакций фрагментов
• Корректная обработка кнопок «Вверх» и «Назад» по умолчанию
• Поведение по умолчанию для анимации и переходов
• Deep linking как first class operation
• Реализация шаблонов навигации пользовательского интерфейса (таких как navigation drawer и bottom navigation) с небольшой дополнительной работой
• Безопасность типов при передаче информации во время навигации
• Инструменты Android Studio для визуализации и редактирования navigation flow приложения

В этом уроке нам понадобится среда разработки Android Studio версии 3.3 или выше.

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

А как поменять порядок Кнопок навигации на экране смартфона Samsung?

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

Далее мы опишем порядок перестановки Кнопок навигации на экране телефона на примере редакционного смартфона Samsung Galaxy A50 с Операционной Системой Android 10 под фирменной оболочкой One UI 2.0.

Инструкция по настройке программных Кнопок навигации на смартфоне Samsung.

1. При первом включении смартфона после его покупки, как правило, на всех смартфонах Samsung Кнопки навигации расположены в следующем порядке слева на право: кнопка «Последние», кнопка «Домой» (или «Главный экран») и кнопка «Назад».

Для изменения расположения кнопок нужно с Главного экрана смартфона перейти на Экран приложений телефона, сделав свайп сверху вниз  с центра дисплея.

Скрин №4 – сделать свайп с центра Главного экрана вниз.

2. На Экране приложений нужно запустить приложение Настройки телефона, нажав на его значок.

Скрин №5 – нажать на значок приложения «Настройки».

3. Далее на основном странице Настроек телефона нужно войти в раздел «Дисплей».

Скрин №6 – нажать на название раздела «Дисплей».

4. В разделе «Дисплей» нужно найти пункт «Навигационная панель» и, нажав на него, войти в это подраздел.

Скрин №7 – войти в подраздел «Навигационная панель».

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

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

Скрин №8 – нажать на второй вариант «Положения кнопок».

После этого порядок Кнопок навигации изменился и теперь на Навигационной панели слева находится кнопка «Назад», далее в центре кнопка «Домой», а после — кнопка «Последние».

Внизу на экране телефона Кнопки навигации тоже поменялись местами.

Скрин №9 – вид подраздела «Навигационная панель» со вторым вариантом расположения кнопок.

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

Интро

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

Экранные кнопки навигации поворачиваются вместе с экраном, исчезают, когда они не нужны, меняют цвет и органично встраиваются в интерфейс домашнего экрана. Если отбросить саму идею бесполезности существования сразу трех кнопок (в конце концов, яблочники обходятся одной и не чувствуют себя обездоленными) и довольно-таки удобные системы навигации вроде PIE или «пузыря навигации MIUI», то экранные кнопки — это лучшее, что было придумано до сих пор.

Удобное круговое меню навигации в MIUI

Так вот. Почему-то мою замечательную, прекраснейшую идею о том, что лучше наэкранных кнопок нет ничего, не разделяют ну очень многие производители смартфонов. И даже не просто не разделяют, а не разделяют совершенно чудовищным способом, заставляя пользоваться смартфоном с сенсорными кнопками (ААА!), снабженными динамической подсветкой (ААА-2!) и кнопкой «Назад» с правой стороны экрана (ААА-3: решающий удар).

Ситуация неприемлемая до крайности, а учитывая, что добрый разработчик прошивки не предусмотрел никаких настроек для активации экранных клавиш и настроек для управления сенсорными кнопками, пришлось обойтись своими силами. Было два варианта дальнейших действий:

• привести сенсорные кнопки к нужному состоянию, а именно отключить подсветку и перенести клавишу «Назад» на левую сторону (пусть она выглядит как «квадрат», так даже интересней);
• отключить сенсорные кнопки полностью и активировать наэкранные кнопки.

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

Horizontal Navigation Bar Examples

Create a basic horizontal navigation bar with a dark background color and
change the background color of the links when the user moves the mouse over
them:

• Home
• News
• Contact
• About

Example

ul {  list-style-type: none;  margin: 0;  padding: 0;
  overflow:
hidden;  background-color: #333;}li { 
float: left;}li a {  display: block; 
color: white;  text-align: center; 
padding: 14px 16px;  text-decoration: none;}/* Change the link color to #111 (black) on hover */li a:hover {  background-color:
#111;}

Add an «active» class to the current link to let the user know which page he/she is on:

• Home
• News
• Contact
• About

Example

.active {  background-color: #4CAF50;}

Right-align links by floating the list items to the right ():

• Home
• News
• Contact
• About

Example

<ul>  <li><a href=»#home»>Home</a></li> 
<li><a href=»#news»>News</a></li>  <li><a href=»#contact»>Contact</a></li>
  <li style=»float:right»><a
class=»active» href=»#about»>About</a></li></ul>

Add the property to <li> to create link dividers:

• Home
• News
• Contact
• About

Example

/* Add a gray right border to all list items, except the last item
(last-child) */li {  border-right: 1px solid #bbb;}
li:last-child {  border-right: none;}

ul {  position: fixed;  bottom: 0;  width: 100%;}

Note: Fixed position might not work properly on mobile devices.

An example of a gray horizontal navigation bar with a thin gray border:

• Home
• News
• Contact
• About

Example

ul {  border: 1px solid #e7e7e7; 
background-color: #f3f3f3;}li a {  color:
#666;}

Sticky Navbar

Add to <ul> to create a sticky navbar.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport — then it «sticks» in place (like position:fixed).

Example

ul {  position: -webkit-sticky; /* Safari */ 
position: sticky;  top: 0;}

Note: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit-
prefix (see example above). You must also specify at least one of , , or for
sticky positioning to work.

Показывать текущее положение

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

Пользователи должны знать, как из точки А перейти в точку Б, просто взглянув на экран, без каких-либо усилий. Вы должны использовать визуальные подсказки (иконки, надписи, цвета), чтобы навигация не требовала пояснений.

Иконки

Так как в нижней навигации пункты представлены иконками, их нужно использовать для контента, который уместно представлять в виде иконок. Есть универсальные иконки, которые хорошо знакомы пользователям – они представляют такой функционал, как поиск, имейлы, печать и т.д. К сожалению, “универсальные” иконки довольно редки. И дизайнеры приложений часто прячут функционал за иконками, которые очень сложно разгадать.

Предыдущая версия приложения Bloom.fm для Android. Очень сложно понять текущее местоположение пользователя.

Цвет

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

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

Следуйте простому правилу – оттеняйте текущее действие в нижней навигации (включая иконку и любой текст) главным цветом приложения.

Нижнее меню в Twitter под iOS. Активен экран сообщений.

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

Слева: Избегайте использования цветных иконок в паре с цветной нижней панелью навигации. Используйте белую или черную иконографию.

Текстовые метки

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

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

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

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

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

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

Бейджи на вкладке

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

Избегайте навязчивости при использовании бейджей в нижней навигации.

Создайте отзывчивый навигатор с выпадающим списком

Шаг 1) Добавить HTML:

Пример

<div class=»topnav» id=»myTopnav»>  <a href=»#home» class=»active»>Главная</a>  <a href=»#news»>Новости</a>  <a href=»#contact»>Контакт</a>  <div class=»dropdown»>    <button class=»dropbtn»>Выпадающий      <i class=»fa fa-caret-down»></i>    </button>    <div class=»dropdown-content»>      <a href=»#»>Ссылка 1</a>      <a href=»#»>Ссылка 2</a>      <a href=»#»>Ссылка 3</a>    </div>  </div>   <a href=»#about»>О Нас</a>  <a href=»javascript:void(0);» class=»icon» onclick=»myFunction()»>&#9776;</a></div>

Шаг 2) Добавить CSS:

Пример

/* Добавить черный цвет фона для верхней навигации */.topnav {  background-color: #333;  overflow: hidden;}/* Стиль ссылок внутри панели навигации */.topnav a {  float: left;  display: block;  color: #f2f2f2;  text-align: center;  padding: 14px 16px;  text-decoration: none;  font-size: 17px;}/* Добавить активный класс для выделения текущей страницы */.active {  background-color: #4CAF50;  color: white;}/* Скрыть ссылку, которая должна открывать и закрывать верхнюю навигационную панель на небольших экранах */.topnav .icon {  display: none;}/* Выпадающий контейнер — необходим для размещения выпадающего содержимого */.dropdown {  float: left;  overflow: hidden;}/* Стиль кнопки выпадающего списка, чтобы соответствовать внутри верхней навигации */.dropdown .dropbtn {  font-size: 17px;   border: none;  outline: none;  color: white;  padding: 14px 16px;  background-color: inherit;  font-family: inherit;  margin: 0;}/* Стиль раскрывающегося списка (по умолчанию скрыт) */.dropdown-content {  display: none;  position: absolute;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1;}/* Стиль ссылки внутри выпадающего списка */.dropdown-content a {  float: none;  color: black;  padding: 12px 16px;  text-decoration: none;  display: block;  text-align: left;}/* Добавить темный фон на верхних навигационных ссылках и выпадающая кнопка при наведении курсора */.topnav a:hover, .dropdown:hover .dropbtn {  background-color: #555;  color: white;}/* Добавить серый фон для выпадающих ссылок при наведении курсора */.dropdown-content a:hover {  background-color: #ddd;  color: black;}/* Отображение выпадающего меню при наведении курсора мыши на кнопку раскрывающегося списка */.dropdown:hover .dropdown-content {  display: block;}/* Если ширина экрана меньше 600 пикселей, скройте все ссылки, кроме первой («Главная»). Показать ссылку, которая содержит должен открыть и закрыть верхнюю навигационную панель (.icon) */@media screen and (max-width: 600px) {  .topnav a:not(:first-child), .dropdown .dropbtn {    display: none;  }  .topnav a.icon {    float: right;    display: block;  }}/* Класс «responsive» добавляется в верхнюю навигационную панель с помощью JavaScript, когда пользователь нажимает на значок. Этот класс делает topnav хорошо выглядеть на небольших экранах (отображать ссылки по вертикали, а не по горизонтали) */@media screen and (max-width: 600px) {  .topnav.responsive {position: relative;}  .topnav.responsive a.icon {    position: absolute;    right: 0;    top: 0;  }  .topnav.responsive a {    float: none;    display: block;    text-align: left;  }  .topnav.responsive .dropdown {float: none;}  .topnav.responsive .dropdown-content {position: relative;}  .topnav.responsive .dropdown .dropbtn {    display: block;    width: 100%;    text-align: left;  }}

Шаг 3) Добавить JavaScript:

Пример

/* Переключение между добавлением и удалением класса «отзывчивый» в topnav, когда пользователь нажимает на значок */function myFunction() {  var x = document.getElementById(«myTopnav»);  if (x.className === «topnav») {    x.className += » responsive»;  } else {    x.className = «topnav»;  }}

Совет: Зайдите на наш учебник CSS Всплывающий чтобы узнать больше о выпадающем.

Совет: Зайдите на наш учебник Кликабельный выпадающий список чтобы узнать больше о выпадающем списке кликабельности

Совет: Зайдите на наш учебник CSS Навигация чтобы узнать больше о навигации.

Совет: Зайдите на наш учебник Боковой панели навигации чтобы узнать о том, как создавать закрываемые боковые навигации.

Анатомия навигационного XML-файла

Все изменения, которые вы делаете в графическом редакторе навигации, изменяют базовый XML-файл, подобно тому, как редактор макетов изменяет XML-макет.

Перейдите на вкладку « Текст »:

Вы увидите такой XML-код:

<navigation xmlns:android=»http://schemas.android.com/apk/res/android»
xmlns:app=»http://schemas.android.com/apk/res-auto»
xmlns:tools=»http://schemas.android.com/tools»
app:startDestination=»@+id/home_dest»>

<!— …tags for fragments and activities here —>

</navigation>

1 2 3 4 5 6 7 8

<navigation xmlnsandroid=»http://schemas.android.com/apk/res/android» xmlnsapp=»http://schemas.android.com/apk/res-auto» xmlnstools=»http://schemas.android.com/tools» appstartDestination=»@+id/home_dest»> <!—…tags forfragments andactivities here—> <navigation>

Примечание:

• <navigation> является корневым узлом каждого навигационного графа.
• <navigation>содержит один или несколько пунктов назначения, представленных элементами <activity>или <fragment>.
• app:startDestination является атрибутом, который указывает место назначения, которое запускается по умолчанию, когда пользователь впервые открывает приложение.

Давайте посмотрим на место назначения фрагмента:

<fragment
android:id=»@+id/flow_step_one_dest»
android:name=»com.example.android.codelabs.navigation.FlowStepFragment»
tools:layout=»@layout/flow_step_one_fragment»>
<argument
…/>

<action
android:id=»@+id/next_action»
app:destination=»@+id/flow_step_two_dest»>
</action>
</fragment>

1 2 3 4 5 6 7 8 9 10 11 12

<fragment androidid=»@+id/flow_step_one_dest» androidname=»com.example.android.codelabs.navigation.FlowStepFragment» toolslayout=»@layout/flow_step_one_fragment»> <argument …> <action androidid=»@+id/next_action» appdestination=»@+id/flow_step_two_dest»> <action> <fragment>

Примечание:

• android:id определяет идентификатор для фрагмента, который вы можете использовать для ссылки на место назначения в другом месте этого XML и вашего кода.
• android:name объявляет полное имя класса фрагмента для создания экземпляра при переходе к этому месту назначения.
• tools:layout указывает, какой макет должен отображаться в графическом редакторе.

Некоторые теги <fragment> также содержат <action>, <argument>,и <deepLink>, все это мы рассмотрим позже.

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

Примечание . Код для каждого шага в этой кодовой метке включен, закомментирован между операторами TODO в загруженном вами коде.

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

1. Откройте res/navigation/mobile_navigation.xmlи выберите вкладку « Дизайн».
2. Нажмите значок « Новый пункт назначения»и выберите «settings_fragment»

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

Обратите внимание, что вы также можете редактировать XML-файл напрямую, чтобы добавить места назначения: mobile_navigation.xml

<fragment
android:id=»@+id/settings_dest»
android:name=»com.example.android.codelabs.navigation.SettingsFragment»
android:label=»@string/settings»
tools:layout=»@layout/settings_fragment» />

1 2 3 4 5

<fragment androidid=»@+id/settings_dest» androidname=»com.example.android.codelabs.navigation.SettingsFragment» androidlabel=»@string/settings» toolslayout=»@layout/settings_fragment»>

Чтобы следовать нашему соглашению об именах, измените идентификатор settings_dest на значение по умолчанию settingsFragment.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Style
Font Size
Font Google
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Способ номер один. Настраиваем сенсорные кнопки

Для начала попробуем отключить подсветку кнопок. Для этого нам нужен root, эмулятор терминала и каталог /sys в корне файловой системы. Именно такая комбинация. Мы имеем дело с ядром Linux, а в системах на его основе вся важная информация о железе, а также «тумблеры», им управляющие, обычно находятся в файловой системе sysfs, подключенной к каталогу /sys.

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

Итак, получаем root, запускаем эмулятор терминала (а лучше ADB). И пишем следующее:

Теперь мы в каталоге /sys, далее нужно найти каталог, в котором находятся файлы драйвера подсветки кнопок:

Бинго! Это каталог /sys/class/leds/button-backlight. Переходим в него и смотрим, что внутри:

Ставлю свой Nokia 3310 на то, что файл brightness — это текущая яркость кнопок, а max_brightness — максимальная. Проверим догадку, записав в первый файл значение 100 (ну типа 100%, хотя какая там шкала — неизвестно):

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

Момент истины — пишем в файл max_brightness значение 0:

Кнопки погасли, навсегда, как и лампочка в моем подъезде вчера ночью.

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

А его, в свою очередь, поставим в автозагрузку с помощью init.d scripts support. Запускаем приложение, выбираем первые три галочки, c помощью опции Select folder выбираем каталог boot на карте памяти.

Ходим по sysfsinit.d scripts support

Ползадачи выполнено, осталось поменять местами кнопки «Назад» и «Обзор». Для этого необходимо изменить раскладку кнопок. В Android она лежит в нескольких файлах каталога /system/usr/keylayout/. Их довольно много, но если отбросить файлы типа Vendor_2378_Product_100a.kl и qwerty.kl (они хранят раскладки полноценных Qwerty-клавиатур, которые Android поддерживает из коробки), то останется от силы пять штук.

Один из них как раз нам и нужен. Часто смартфоны используют файл ft5x06_ts.kl, специфичный для контроллера тачскрина FT5x06 (кнопки же сенсорные, правильно?), но в моем случае им оказался файл Vendor_2378_Product_100a.kl.

Если открыть этот файл, можно увидеть три искомые строки:

Остается только поменять числа 158 и 139 местами (для этого подходит любой файловый менеджер с поддержкой прав root). После перезагрузки новая раскладка начнет действовать.

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности