English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Навигационные блоки используются повсеместно, каждый веб-сайт создает навигационные блоки, имеющие свои уникальные характеристики. Недавно я специально изучил различные типы навигационных блоков, такие как навигационные блоки с выделением, навигационные блоки с переключением между китайским и английским языками, навигационные блоки с эластичными анимациями, даже навигационные блоки с анимацией трения (под текстом есть горизонтальная линия) и т.д. У каждого типа навигационного блока есть свои особенности, например, выделенный навигационный блок выглядит достаточно просто, но визуально он также выглядит хорошо, навигационные блоки с анимацией также имеют хорошие визуальные эффекты.
Далее будут рассмотрены по порядку四种广泛应用的应用导航条，即：高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，具有摩擦运动动画的导航条。
Выделенный навигационный блок
Этот навигационный блок: когда вы нажимаете на одну из навигаций, он становится выделенным, другие возвращаются к исходному стилю по умолчанию, то есть без изменения кода 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;
</span>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");
}
}
});
Основные знания заключаются в том, как определить текущий адрес веб-страницы и соответствующий href в теге a, а затем соответствующим образом изменить стиль. В данном случае используется метод window.location.href для получения текущего веб-сайта, разделенный на части с помощью split(), и последняя часть - это то, что нам нужно. В нормальных условиях не нужно полностью соответствовать целому адресу, поэтому здесь используется метод substr() для соответствия первым几位 символов. Я добавил класс on в css-файле, добавив class=
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>домашняя страница</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> <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;
}
красная часть представляет собой реализацию этого процесса, используя изменение положения, когда курсор мыши наводится, отображается китайский текст, то есть удаляется английский. Важно отметить, что необходимо использовать атрибут 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)
});
});
The key to implementing the function is the animate() function, which is achieved by setting margin-top and time. To prevent all from changing when passing quickly (as shown in the figure below), the stop() function needs to be added before the animate() function, that is, stop all other animations before starting this animation.
3. Navigation bar with elastic animation
I used three methods to implement it, the first is CSS3, the second is jQuery, and the third is jQuery easing implementation. The effect diagram is as follows:
Since the layout of the three is the same, the html structure code is attached directly.
html:
<div class="nav">
<ul class="nav-list">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Forum</a>
<div class="nav-down">
<a href="#">Java Forum</a>
<a href="#">JS Forum</a>
<a href="#">jQuery Forum</a>
<a href="#">CSS3 Forum</a>
</div>
</li>
<li>
<a href="#">Blog</a>
<div class="nav-down">
<a href="#">Excellent Articles</a>
<a href="#">Blog Column</a>
<a href="#">Blog Expert</a>
<a href="#">My Blog</a>
</div>
</li>
<li>
<a href="#">Mall</a>
<div class="nav-down">
<a href="#">Software Mall</a>
<a href="#">C Coin Mall</a>
<a href="#">C Coin Recharge</a>
</div>
</li>
<li>
<a href="#">Download</a>
<div class="nav-down">
<a href="#">Resource Categories</a>
<a href="#">My Resources</a>
</div>
</li>
</ul>
</div>
First type:CSS3 implementation
*{
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;
}
The implementation method is very simple, that is, initially hide the dropdown menu, and then display the hidden menu when the mouse passes over it. The specific implementation code is shown in the red part above, which will not be explained in detail here, as the code is very simple.
Second type:With jQuery implementation.
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()��取元素的宽度（поскольку количество символов различается, ширина также различается, чтобы было красиво, полоса должна адаптироваться к ширине текста);
2) position().left��取元素的位置中left的值;
3) animate() реализует эффект анимации;
4) duration и easing - это содержимое плагина easing jQuery, то есть настройка эффекта анимации.
Здесь все-sharing закончилось.
Вот и все, что было в этой статье, надеюсь, это поможет вам в изучении.我们也希望大家多多支持呐喊教程。
Заявление: содержимое статьи взято из Интернета, авторские права принадлежат соответствующему автору, контент предоставлен пользователями Интернета, сайт не обладает правами собственности, не был отредактирован вручную, и не несет ответственности за связанные с этим юридические последствия. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для отчета,并提供 соответствующие доказательства. При обнаружении фактов, сайт незамедлительно удалят涉嫌侵权的内容.