Тн-кровля стандарт тротуар

Навигация списком с эффектом «Аккордеон»

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

Примечание Атрибут автоматически устанавливает класс , поэтому вам не нужно прописывать его вручную.

Nav и Accordion

Несколько открытых подпунктов

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

JavaScript

Узнайте больше о компонентах в фреймворке UIkit 3.

Toggle

Переключает область содержимого.

Название Тип По умолчанию Описание
String, Integer, Node Навигационная панель для переключения. Индекс начинается с 0.
Boolean true Запретить открытие анимации, передав false.

Документация

Компоненты

  • Аккордеон
  • Алерт сообщения
  • Выравнивание
  • Анимации CSS
  • Статья
  • Фон
  • Значок : Бейдж
  • Базовые элементы
  • Навигационная цепочка
  • Кнопка
  • Карта : Карточка
  • Значок закрытия
  • Колонка : Столбец
  • Комментарии
  • Контейнер
  • Таймер обратного отсчета
  • Cover
  • Список описаний
  • Разделитель контента
  • Точечная навигация
  • Выпадение контента
  • Выпадающий список
  • Фильтр
  • Flex
  • Создание форм
  • Модульная сетка
  • Заголовок
  • Высота элементов
  • Иконки
  • Иконочная навигация
  • Изображение
  • Инверсия
  • Ярлык : Метка
  • Отточие
  • Лайтбокс
  • Стили для ссылок
  • Список
  • Внешний отступ
  • Маркер на изображении
  • Модальное окно
  • Навигация списком
  • Панель навигации
  • Уведомления
  • Панель Off-canvas
  • Наложение : Overlay
  • Внутренний отступ
  • Пагинация
  • Параллакс
  • Область заполнителя
  • Позиционирование
  • Печать
  • Индикатор выполнения
  • Плавная прокрутка
  • Отслеживание прокрутки
  • Поиск
  • Раздел
  • Навигация Slidenav
  • Слайдер : Карусель
  • Слайд-шоу
  • Сортируемые элементы
  • Загрузчик «Спиннер»
  • Липкие элементы
  • Суб-навигация
  • Изображения SVG
  • Переключатель контента
  • Отзывчивые вкладки
  • Таблица
  • Текст
  • Навигация миниатюрами
  • Плитка
  • Переключатель : Toggle
  • Всплывающая подсказка
  • Кнопка вверх
  • Плавные переходы
  • Загрузка файлов
  • Утилита
  • Видео
  • Классы видимости
  • Ширина

Options

Property Default Type Description
1024 int/boolean Resolution below which to display the mobile menu, and hide the regular.
false false / string / element object Content element (string selector or jQuery object) that will be pushed when the navigation is open, or false to disable this option.
‘left’ string Position on which the menu will open. Available options: , , and .
‘overlap’ string Submenu levels open effect. Available options: , , or .
40 int If levels are overlaped, this is the spacing between them, if they are expanding, this is the text indent of the submenus.
false bool Show titles for submenus, which is the parent item name. Works only for overlaped levels.
null string Main navigation (first level) title.
» string Custom navigation class.
true bool Disable body scroll when navigation is open.
true bool Close the navigation when links are clicked.
null string / element object Custom navigation toggle element.
true bool / int Insert navigation close button. You can also use an integer representing 0-based index that will be the position of the button in the list. Negative numbers are also supported.
true bool / int Insert back buttons to submenus. You can also use an integer representing 0-based index that will be the position of the button in the list. Negative numbers are also supported.
‘Close’ string Label for the close button.
‘Back’ string Label for the back buttons.

Methods

Methods are used to control the plugin after initialization.

Method Accepts Description
string Returns current settings, or a particular setting if you specify it.
N/A Checks if the nav is open, and returns boolean.
object, boolean Updates the settings with the new ones, and/or updates the internal state of the plugin making the DOM changes based on the original nav.
N/A Opens the nav.
N/A Closes the nav.
var Nav = $('#main-nav').hcOffcanvasNav({
  maxWidth 980
});

// update the settings
Nav.update({
  maxWidth 1024,
  navTitle 'All pages'
});

// update the nav DOM
Nav.update(true);

// update the settings and the DOM
Nav.update({
  maxWidth 1024,
  navTitle 'All pages'
}, true);

Events

Event Description
Triggers each time when the nav is opened.
Triggers each time when the nav is closed.
Triggers only the first time the nav is closed, and than it detaches itself.

All events return Event object, and the plugin Settings object.

var Nav = $('#main-nav').hcOffcanvasNav();

// change nav open side after each close
Nav.on('close', function(event, settings) {
  Nav.update({
    side settings.side === 'left' ? 'right'  'left'
  });
});

// will change nav open side only once
Nav.on('close.once', function(event, settings) {
  Nav.update({
    side settings.side === 'left' ? 'right'  'left'
  });
});

Data Attributes

Attr Accepts Description
boolean Attached on the item links. Tells the nav if it needs to be closed on click or not.

If options is enabled for the nav, in the example below the «Add Page» link will not close it.

nav id="main-nav">
  ul>
    li>a href="#">Homea>li>
    li>a href="#">Abouta>li>
    li>a href="#">Contacta>li>
    li>a data-nav-close="false" href="#">Add Pagea>li>
  ul>
nav>

Навигационная панель с вкладками или кнопками, выровненными по ширине

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

  • на устройствах , и (ширина >=768px) вкладки (кнопки) в навигационной панели располагаются горизонтально и имеют одинаковую ширину, равную ширине родительского элемента / количество вкладок (кнопок).
  • на очень маленьких устройствах (ширина

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

Website Setup

Add Class to

This class will let CSS handle the effects for opening and closing the menu. If our is loaded, it will remove this class and take over for some nicer effects!

Include CSS and Scripts

It is highly recommended that you include normalize.css!

Defaults

Include some defaults in your CSS (or use our ). This will allow mobiles to load the correct media queries on your website and fix box-sizing issues with padding and borders. The font-size is the «root» font-size. Any unit will always be relative to this. With 62.5%, = . Our CSS uses units, so you’ll need this!

IE 8 Fixes

Because IE 8 doesn’t support HTML5, you should include html5shiv.

IE 8 doesn’t support media queries, so you should also inlude our after the normal stylesheet. (it contains all «desktop» styles without media queries. IE 8 won’t jump to the mobile menu on resize.

CSS and Scripts: All Together

Ideally you would concatenate all CSS files into one file, but for clarity I’ll add them separately. You could easily replace/modify the files with your custom styles.

Enable jQuery Plugin

To enable our jQuery plugin, you will need to include jQuery and our plugin script and then run on your . Too increase page loading speed you might want to add this right before your closing tag.

You can set some options when calling :

Usage

Call the plugin

link rel="stylesheet" href="/path/to/hc-offcanvas-nav.css">
script src="/path/to/jquery.js">script>
script src="/path/to/hc-offcanvas-nav.js">script>
script>
  jQuery(document).ready(function($) {
    $('#main-nav').hcOffcanvasNav({
      maxWidth 980
    });
  });
script>

Example HTML menu structure

nav id="main-nav">
  ul>
    li>a href="#">Homea>li>
    li>a href="#">Abouta>li>
    li>
      a href="#">Servicesa>
      ul>
        li>
          a href="#">Hostinga>
          ul>
            li>a href="#">Private Servera>li>
            li>a href="#">Managed Hostinga>li>
          ul>
        li>
        li>a href="#">Domainsa>li>
        li>a href="#">Websitesa>li>
      ul>
    li>
    li>a href="#">Contacta>li>
  ul>
nav>

Known Issues

No keyboard navigation without javascript

Regretably there is no CSS way to enable navigating through the drop down menu’s with the key. The key triggers the selector on the links, but not on the parent . So there is no way to keep the parent menu’s open when tabbing into a sub menu… This does work when you use our jQuery plugin.

Close button not always showing on

This issue is only relevant when using no javascript. (CSS navigation only)

Android 4.3 browser and lower have issues when combining pseudo classes with adjacent or general sibling selectors. Therefor the «close menu» button is not shown when you press the menu button. It does show when you use the menu.

Fixed header width glitch on

When you zoom in, the header scales to fit in the browser window, but when you zoom out again, it doesn’t seem to «resize» to full width immediately.

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 MarginsCSS 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 FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Navigation Usage & Restrictions

Basic HTML Structure

For CSS-only functionality, it is important to place link right before and right after . These need to be links, because that works better for mobile touch. The links can be positioned anywhere using positioning. The button will only show up if our is not available.

The tag should also have a class, as there might be other nav areas that shouldn’t be styled.

Sub Menu’s

Each «link» should be wrapped in an tag. If you don’t want an actual link (sub menu), just write a in the attribute. It is recommended to use a for sub menu’s to allow for touch navigation! Dont forget to add the class to the containing the sub menu.

Why sub menu’s are not collapsed on mobiles without JS…

There was one more issue when not using javascript on mobiles (at least on the Samsung S4). If you would open a sub menu in the top level and then touch the next sub menu in the top level, that sub menu would open and the previous one would close. (Duh!)

Unfortunately, there is some kind of delay. When the previous menu closes, the one you touched moves upwards. However, the phone seems to remember the touch position on the screen and actually activates the link that ends up under your finger.

So we decided not to collapse the sub menu’s on mobiles if you don’t use our jQuery plugin.

Nav Wrappers?

The navigation is tested when placed in the , but you should be able to wrap other div’s around it if needed. As long as you don’t experience issues with the placement of on mobiles.

The used in the example is not needed for the navigation to work. But most sites will probably have some sort of header, so I just included it to show how it can blend in with the navigation.

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

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

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

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

  • Home
  • News
  • Contact
  • About

Теги HTML

lass=»block_content scroll»>

  • Все теги
  • Валидация тегов
    • accesskey
    • charset
    • coords
    • download
    • href
    • hreflang
    • name
    • rel
    • rev
    • shape
    • tabindex
    • target
    • title
    • type
  • title

    • align
    • alt
    • archive
    • code
    • codebase
    • height
    • hspace
    • vspace
    • width
    • accesskey
    • alt
    • coords
    • href
    • hreflang
    • nohref
    • shape
    • tabindex
    • target
    • type
    • autoplay
    • controls
    • loop
    • muted
    • preload
    • src
    • href
    • target
    • color
    • face
    • size
  • dir

    • balance
    • loop
    • src
    • volume
    • alink
    • background
    • bgcolor
    • bgproperties
    • bottommargin
    • leftmargin
    • link
    • rightmargin
    • scroll
    • text
    • topmargin
    • vlink
  • clear

    • accesskey
    • autofocus
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • name
    • type
    • value
    • align
    • valign
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • cite
    • datetime
    • align
    • title
    • align
    • height
    • hidden
    • hspace
    • pluginspage
    • src
    • type
    • vspace
    • width
    • disabled
    • form
    • title
    • color
    • face
    • size
    • accept-charset
    • action
    • autocomplete
    • enctype
    • method
    • name
    • novalidate
    • target
    • bordercolor
    • frameborder
    • name
    • noresize
    • scrolling
    • src
    • border
    • bordercolor
    • cols
    • frameborder
    • framespacing
    • rows
  • align

  • align

  • align

  • align

  • align

  • align

  • profile

    • align
    • color
    • noshade
    • size
    • width
    • manifest
    • title
    • xmlns
    • align
    • allowtransparency
    • frameborder
    • height
    • hspace
    • marginheight
    • marginwidth
    • name
    • sandbox
    • scrolling
    • seamless
    • src
    • srcdoc
    • vspace
    • width
    • align
    • alt
    • border
    • height
    • hspace
    • ismap
    • longdesc
    • lowsrc
    • src
    • usemap
    • vspace
    • width
    • accept
    • accesskey
    • align
    • alt
    • autocomplete
    • autofocus
    • border
    • checked
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • list
    • max
    • maxlength
    • min
    • multiple
    • name
    • pattern
    • placeholder
    • readonly
    • required
    • size
    • src
    • step
    • tabindex
    • type
    • value
    • cite
    • datetime
    • accesskey
    • for
    • accesskey
    • align
    • title
    • type
    • value
    • charset
    • href
    • media
    • rel
    • sizes
    • type
  • name

    • behavior
    • bgcolor
    • direction
    • height
    • hspace
    • loop
    • scrollamount
    • scrolldelay
    • truespeed
    • vspace
    • width
    • label
    • type
    • charset
    • content
    • http-equiv
    • name
    • high
    • low
    • max
    • min
    • optimum
    • value
    • align
    • archive
    • classid
    • code
    • codebase
    • codetype
    • data
    • height
    • hspace
    • tabindex
    • type
    • vspace
    • width
    • reversed
    • start
    • type
    • disabled
    • label
    • disabled
    • label
    • selected
    • value
  • align

    • name
    • type
    • value
    • valuetype

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Ссылка на основную публикацию