W3.CSS обеспечить все виды для панели навигации:
По вертикали:
По горизонтали (вертикали на маленьких экранах):
Основные способы навигации
Класс w3-Navbar создает горизонтальную панель навигации:
пример
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Попробуй сам " Цветные панели навигации
пример
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> Попробуй сам " Граничит Навигация Бары
пример
<ul class="w3-navbar w3-border w3-light-grey">
<ul
class="w3-navbar w3-border w3-round w3-light-grey">
<ul
class="w3-navbar w3-card-8 w3-light-grey"> Попробуй сам " Активный / Current Link
пример
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Попробуй сам " Hoverable Ссылки
При наведении курсора мыши на ссылки внутри навигационной панели, цвет фона изменится на серый.
Если вы хотите другой цвет фона на парении, используйте любой из W3-hover- цветовых классов, и если вы хотите другой цвет текста на парении, используйте любой из w3-парят-текста цветовых классов:
пример
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-hover-red" href="#">Home</a></li>
<li><a class="w3-hover-blue" href="#">Link 1</a></li>
<li><a
class="w3-hover-green" href="#">Link 2</a></li>
<li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul> Попробуй сам " Выравнивание по правому краю Ссылки
пример
<ul class="w3-navbar w3-light-grey w3-border">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li
class="w3-right"><a class="w3-green" href="#">Link
3</a></li>
</ul> Попробуй сам " Панель навигации Размер
Изменение размера шрифта:
пример
<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green
w3-xlarge"> Попробуй сам " Изменение отступов:
пример
<ul class="w3-navbar w3-green">
<li><a class="w3-padding-hor-16" href="#">Home</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-hor-16" href="#">Link 2</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul> Попробуй сам " Настройка ширины элементов списка со свойством ширины CSS (Примечание: на небольших экранах, они преобразуют до 100%):
пример
<ul class="w3-navbar w3-dark-grey w3-center">
<li
style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
<li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul> Попробуй сам " Панель навигации с иконками
пример
<ul class="w3-navbar w3-light-grey w3-border
w3-large">
<li><a
class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul> Попробуй сам " Панель навигации с раскрывающийся
Переместите курсор на "Раскрывающийся" ссылка:
пример
<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown</a>
<div
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul> Попробуй сам " Примечание: Когда выпадающее меню является "открытым", ссылка выпадающий получает серый цвет фона , чтобы показать , что он активен. Чтобы изменить это, добавьте W3-hover- класс цвета как к "раскрывающимся" <li> и <a>:
Совет: Если вы хотите , символ раскрывающегося списка рядом с ниспадающего текст, добавьте подходящую иконку (например , ):
пример
<li class="w3-dropdown-hover
w3-hover-orange">
<a class="w3-hover-orange" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li> Попробуй сам " Используйте W3-выпадающий кнопкой мыши , если вы предпочитаете , чтобы нажать на ссылку ниспадающего вместо зависания:
пример
<li class="w3-dropdown-click">
<a onclick="myFunction()" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div id="demo"
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li> Попробуй сам " Фиксированная панель навигации
Чтобы заставить панель навигации , чтобы остаться в верхней или в нижней части страницы, даже когда пользователь прокручивает страницу, обернуть <div> элемент вокруг клавиши <UL> и добавьте W3-верхний или нижний w3-класс:
Складывание панель навигации
Когда навигационная панель занимает слишком много места на маленьком экране, и вы не хотите, чтобы отобразить его вертикально по умолчанию, вы можете использовать вспомогательные классы, чтобы скрыть и показать конкретные ссылки на панели навигации.
В приведенном ниже примере, навигационная панель заменяется кнопкой (☰) в правом верхнем углу экрана, когда отображается на планшетных ПК и мобильных устройств. Когда кнопка нажата, панель навигации будет отображаться по вертикали:
пример
Попробуй сам "Topnav
Другой пример навигационной панели, является класс W3-topnav. Он похож на W3-навигационной панели, за исключением того, что она будет добавить подчеркивание при наведении на ссылки, а не цвет фона:
пример
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Попробуй сам " Пример с Шрифт Высокий Иконки
<nav class="w3-topnav w3-green">
<a href="#"><i class="fa
fa-home"></i></a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Попробуй сам " Боковая навигация
Класс w3-sidenav создает вертикальную панель навигации:
Перейти к следующей главе , чтобы узнать больше о боковой панели навигации.