English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Навигационные панели очень широко используются, каждый веб-сайт создает навигационные панели с уникальным стилем. Недавно特地 изучил различные типы навигационных панелей, например, выделенные навигационные панели, навигационные панели с переключением между китайским и английским языками, навигационные панели с эластичными анимациями, даже навигационные панели с анимацией трения (под текстом есть горизонтальная линия). У каждой навигационной панели есть свои особенности, например, выделенная навигационная панель выглядит достаточно просто, но визуально выглядит неплохо, а навигационные панели с анимацией также имеют хорошие визуальные эффекты.
Далее будут逐一介绍 4 вида навигационных панелей, которые наиболее часто используются, то есть: выделенная навигационная панель, навигационная панель с переключением между китайским и английским языками, навигационная панель с эластичными анимациями, навигационная панель с анимацией трения.
1. Выделенная навигационная панель
Эта навигационная панель: когда вы нажимаете на одну из навигаций, она становится выделенной, а другие остаются в прежнем стиле по умолчанию, то есть без изменения кода CSS меню, с помощью JavaScript можно контролировать фоновый цвет меню. Если该项 меню нажимается, ему赋予一个独特的 фоновый цвет или фоновое изображение, что позволяет более ясно указывать пользователю на栏目, которые он посещает на веб-сайте. Это просто, удобно и效果好.
Результат如下图:
html: (здесь пропущен код других html-файлов, приведен только код index.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <link href="../css/demo1.css" rel="stylesheet" type="text/css"> <script src="../js/jquery-3.1.0.min.js" language="javascript" charset="utf-8"></script> <script src="../js/demo1.js" language="javascript" charset="utf-8"></script> </head> <body> <div class="nav"> <ul class="nav-list"> <li><a href="index.html">首页</a></li> <li><a href="bbs.html">论坛</a></li> <li><a href="blog.html">博客</a></li> <li><a href="mall.html">商城</a></li> <li><a href="download.html">下载</a></li> </ul> </div> <div class="content">Домашняя страница</div> </body> </html>
css：
*{
margin:0px;
padding:0px;
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
.nav{
background-color: #222;
height: 40px;
width:100%;
margin-top:50px;
}
.nav-list{
width: 1000px;
margin: 0 auto;
}
.nav-list li{
list-style: none;
float: left;
}
.nav-list li a{
color: #aaa;
padding:0 40px;
text-decoration: none;
line-height: 40px;
display: block;
border: none;
}
.content{
margin:20px auto;
text-align: center;
}
.nav-list li a:hover{
color: #fff;
background: #504d4d;
}
<span style="color:#ff0000;">.nav-list li a.on{
color: #fff;
background: #504d4d;
}
jquery:
$(function(){
var index = (window.location.href.split("/").length)-1;
var href = window.location.href.split("/")[index].substr(0,4);
if (href!=null){
$(".nav-list li a[href^='"+href+"']").addClass("on");
}
$(".nav-list li a[href='index.html']").addClass("on");
}
});
Основные знания заключаются в том, как определить текущий адрес веб-страницы и href в теге a, затем изменять стиль соответствующим образом. В данном случае используется метод window.location.href для получения текущего веб-сайта, разделение с помощью split(), и последнее содержимое - это то, что нам нужно. В обычных условиях не нужно полностю соответствовать всему адресу, поэтому используется метод substr() для соответствия нескольким начальным символам. В css-файле я добавил класс on, увеличивая class=“on” для тега a, и функцией addClass() в js был завершен функционал.
2、переключение между китайским и английским навигационной строкой
сначала посмотрим на效果图:
я использую два способа реализации, один с помощью css3, а другой с помощью jquery.
вначале давайте разберем, как это можно реализовать с помощью css3:
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <link rel="stylesheet" href="../css/demo2.css"> </head> <body> <div class="nav"> <ul class="nav-list"> <li> <a href="index.html"> <b>index</b> <i>首页</i> </a> </li> <li> <a href="index.html"> <b>bbs</b> <i>форум</i> </a> </li> <li> <a href="index.html"> <b>блог</b> <i>блог</i> </a> </li> <li> <a href="index.html"> <b>магазин</b> <i>магазин</i> </a> </li> <li> <a href="index.html"> <b>загрузить</b> <i>загрузка</i> </a> </li> </ul> </div> </body> </html>
css:
*{
margin:0px;
padding:0px;
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width:100%;
height: 40px;
background-color: #222;
margin-top:100px;
overflow: hidden;
}
.nav-list{
width:1000px;
margin:0 auto;
height: 40px;
}
.nav-list li {
float: left;
}
.nav-list li a{
display: block;
transition: 0.2s;
}
.nav-list li b,.nav-list li i{
color:#aaa;
line-height: 40px;
display: block;
padding:0 30px;
text-align: center;
}
.nav-list li b{
font-weight:normal;
}
.nav-list li i{
font-style: normal;
color:#fff;
background-color: #333;
}
.nav-list li a:hover{
margin-top:-40px;
}
красная часть это реализация этого процесса, используя изменениеposition, когда указатель мыши перемещается на него, отображается китайский, то есть английский удаляется.值得注意的是, необходимо использовать атрибут overflow: hidden, чтобы скрыть его.Если хотите, чтобы это шло медленнее, можно использовать атрибут transition для настройки времени изменения, чтобы замедлить скорость изменения.
затем с помощью jquery реализуется:
css：
*{
margin:0px;
padding:0px;
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width:100%;
height: 40px;
background-color: #222;
margin-top:100px;
overflow: hidden;
}
.nav-list{
width:1000px;
margin:0 auto;
height: 40px;
}
.nav-list li {
float: left;
}
.nav-list li a{
display: block;
}
.nav-list li b,.nav-list li i{
color:#aaa;
line-height: 40px;
display: block;
padding:0 30px;
text-align: center;
}
.nav-list li b{
font-weight:normal;
}
.nav-list li i{
font-style: normal;
color:#fff;
background-color: #333;
}
jquery:
$(function(){
$(".nav-list li a").hover(function(){
$(this).stop().animate({"margin-top":-40},200)
},function(){
$(this).stop().animate({"margin-top":0},200)
});
});
Основной задачей является реализация функции animate(), через которую устанавливается margin-top и время. Чтобы предотвратить изменение всех элементов при быстром прохождении (как показано на рисунке ниже), необходимо добавить функцию stop() перед animate(), то есть остановить все другие анимации перед началом этой анимации.
3. Навигационная панель с эластичными анимациями
Я использовал три способа реализации: первый - CSS3, второй - jQuery, третий - jQuery easing. Примеры изображений см. ниже:
Поскольку три способа разложения одинаковы, я просто приложу код структуры html.
html:
<div class="nav"> <ul class="nav-list"> <li> <a href="#">Главная страница</a> </li> <li> <a href="#">Форум</a> <div class="nav-down"> <a href="#">Форум Java</a> <a href="#">Форум JS</a> <a href="#">Форум jQuery</a> <a href="#">Форум CSS3</a> </div> </li> <li> <a href="#">Блог</a> <div class="nav-down"> <a href="#">Элитные статьи</a> <a href="#">Колонки блогов</a> <a href="#">Эксперты блогов</a> <a href="#">Мой блог</a> </div> </li> <li> <a href="#">Магазин</a> <div class="nav-down"> <a href="#">Магазин программного обеспечения</a> <a href="#">Магазин C-монет</a> <a href="#">Пополнение C-монет</a> </div> </li> <li> <a href="#">Загрузка</a> <div class="nav-down"> <a href="#">Категории ресурсов</a> <a href="#">Мои ресурсы</a> </div> </li> </ul> </div>
Первый способ: с помощью CSS3
*{
margin:0px;
padding:0px;
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width:100%;
height: 40px;
margin-top:50px;
background-color: #222;
}
.nav .nav-list{
width: 1000px;
height: 40px;
margin:0 auto;
}
.nav .nav-list li{
float: left;
position: relative;
}
.nav .nav-list li > a{
display: block;
height: 40px;
line-height: 40px;
padding:0 30px;
color:#aaa;
width:60px;
}
.nav .nav-list li:hover>a{
color:#fff;
background-color: #333;
}
<span style="color:#ff0000;">.nav .nav-list li:hover .nav-down{
display: block;
}
.nav-down{
width:150px;
background-color: #333;
position: absolute;
top:40px;
left:0px;
display: none;
}
.nav .nav-list .nav-down a{
display: block;
line-height: 30px;
color:#aaa;
padding-left:30px;
}
<span style="color:#ff0000;">.nav .nav-list .nav-down a:hover{
color:#fff;
background-color: #333;
}
Способ реализации очень прост: сначала скрываем выпадающее меню, а затем, когда курсор мыши проходит над ним, отображаем его. Конкретный код реализации приведен в красной части выше, но详细的讲解这里就不展开了, код очень прост.
Второй способ: с помощью jQuery.
css:
*{
margin:0px;
padding:0px;
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width:100%;
height: 40px;
margin-top:50px;
background-color: #222;
}
.nav .nav-list{
width: 1000px;
height: 40px;
margin:0 auto;
}
.nav .nav-list li{
float: left;
position: relative;
}
.nav .nav-list li > a{
display: block;
height: 40px;
line-height: 40px;
padding:0 30px;
color:#aaa;
width:60px;
}
.nav .nav-list li:hover>a{
color:#fff;
background-color: #333;
}
.nav-down{
width:150px;
background-color: #333;
position: absolute;
top:40px;
left:0px;
display: none;
}
.nav .nav-list .nav-down a{
display: block;
line-height: 30px;
color:#aaa;
padding-left:30px;
}
.nav .nav-list .nav-down a:hover{
color:#fff;
background-color: #333;
}
jquery:
$(function(){
$(".nav .nav-list li").hover(function(){
$(this).find(".nav-down").stop().slideDown()
},function(){
$(this).find(".nav-down").stop().slideUp()
});
});
Метод реализации был также описан ранее, в части имитации функции изменения темы Baidu, здесь используются методы slideDown() и slideUp(), если нужно установить время изменения, можно напрямую ввести время в скобках.
Третий способ: с помощью jquery.easing.
Стиль css такой же, как и стиль, реализованный с помощью jquery, поэтому здесь не будет повторяться.
jquery:
<pre name="code" class="javascript">$(function(){
$(".nav .nav-list li").hover(function(){
$(this).find(".nav-down").stop().slideDown({duration:500,easing:"easeOutBounce"})
},function(){
$(this).find(".nav-down").stop().slideUp({duration:500,easing:"easeOutBounce"})
});
});
При использовании этого метода не забудьте импортировать библиотеку jquery.easing.1.3.min.js (я использую эту версию, все могут загрузить её из интернета). Здесь важно отметить подход: когда курсор мыши перемещается, выпадающее меню с эластичностью下滑ает, а когда курсор мыши удаляется, выпадающее меню с эластичностью поднимается, также используются методы slideDown() и slideUp(), единственное отличие заключается в том, что здесь добавлен анимационный эффект, то есть используется easing, который其实就是 формат, подобный json, вставьте duration и способ easing, и всё. Если не понимаете процесс реализации, можно посмотреть соответствующие документацию, и всё станет ясно.
4. Анимация движения трения за навигационной панелью
Путь реализации заключается в том, чтобы при перемещении мыши переместить положение полосы в нижнюю часть текущего текста. Поэтому необходимо получить текущее положение мыши, то есть top и left, а затем изменить top и left полосы, чтобы реализовать это, как показано ниже.
html:（здесь приведен код одной страницы)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Анимация движения трения за навигационной панелью</title> <link href="../css/demo7.css" rel="stylesheet"> <script src="../js/jquery-3.1.0.min.js" language="javascript" charset="utf-8"></script> <script src="../js/jquery.easing.1.3.min.js" language="javascript" charset="utf-8"></script> <script src="../js/demo7.js" language="javascript" charset="utf-8"></script> </head> <body> <div class="nav"> <div class="nav-content"> <ul class="nav-list"> <li><a href="index.html">首页</a></li> <li><a href="bbs.html">论坛</a></li> <li><a href="blog.html">博客</a></li> <li><a href="mall.html">商城</a></li> <li><a href="download.html">下载</a></li> </ul> <div class="nav-line"></div> </div> </div> </body> </html>
css:
*{
margin:0px;
padding: 0px;
font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width:100%;
height:40px;
margin-top:50px;
background-color: #f6f6f6;
}
.nav .nav-content{
width:1000px;
margin:0 auto;
height: 40px;
position: relative;
}
.nav .nav-list li{
float: left;
}
.nav .nav-list li a{
color:#333;
height: 40px;
line-height: 40px;
display: block;
padding:0 30px;
}
.nav .nav-line{
height:3px;
background: #35b558;
width:100px;
position: absolute;
top:40px;
left:0px;
}
.nav .nav-list li a:hover{
color:#35b558;
}
.nav .nav-list li a.on{
color:#35b558;
}
jquery:
$(function () {
var index = window.location.href.split("/").length-1;
var href = window.location.href.split("/")[index];
$(".nav .nav-list li a[href='"+href+"']").addClass("on");
var li_width = $(".nav .nav-list li a.on").outerWidth();
var li_left = $(".nav .nav-list li a.on").position().left;
$(".nav-content .nav-line").css({width:li_width,left:li_left});
$(".nav .nav-list li").hover(function(){
var li_width = $(this).outerWidth();
var li_left = $(this).position().left;
$(".nav-content .nav-line").stop().animate({"width":li_width,"left":li_left},{duration:1500,easing:"easeOutElastic"});
},function(){
$(".nav-content .nav-line").stop().animate({"width":li_width,"left":li_left},{duration:1500,easing:"easeOutElastic"});
});
});
Основное внимание уделяется нескольким методам их действия:
1)outerwidth() получает ширину элемента (поскольку количество символов differs, ширина также differs, чтобы сделать это красивым, горизонтальная полоса должна адаптироваться к ширине текста);
2)position().left получает значение left в положении элемента;
3)animate() реализует эффект анимации;
4) duration и easing являются частью содержимого плагина jquery easing, то есть они устанавливают эффект анимации.
В приведенном выше примере详细介绍了一种基于jQuery + CSS3 реализацию четырех примеров создания навигационных панелей, которые широко используются, надеюсь, что это поможет вам. Если у вас есть какие-либо вопросы, пожалуйста, оставьте мне комментарий, я постараюсь ответить вам как можно скорее. В этом также выражаю признательность всем, кто поддерживает сайт呐喊 руководств!
Заявление: содержание этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета, загружен самостоятельно, сайт не обладает правами собственности, не underwent редактирование, и не несет ответственности за соответствующие юридические вопросы. Если вы обнаружите подозрительное содержимое о нарушении авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма, пожалуйста, замените # на @) для отчета, и предоставьте соответствующие доказательства. При обнаружении, сайт немедленно удаляет подозрительное содержимое, нарушающее авторские права.