Skip to content

Instantly share code, notes, and snippets.

@kharakhordindemo

kharakhordindemo/index.html

Created December 6, 2017 14:58
Show Gist options
  • Save kharakhordindemo/d74af61335f5eb94644116d6380f2f15 to your computer and use it in GitHub Desktop.
Save kharakhordindemo/d74af61335f5eb94644116d6380f2f15 to your computer and use it in GitHub Desktop.
Download ZIP
Скользящая линия
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Скользящая линия</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="nav-underline clearfix">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Map</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
//Переменные
var nav = $('.nav-underline'),
$line = $('<div></div>').appendTo('nav'),
$activeLi,
lineWidth,
liPos;
function refresh() {
$activeLi = nav.find('li.active');
lineWidth = $activeLi.outerWidth();
liPos = $activeLi.position().left;
}
refresh();
nav.css('position', 'relative');
//Стилизация и позиционирование линии
function lineSet() {
$line.css({
'position' : 'absolute',
'bottom' : '0',
'height' : '3px',
'background-color' : '#fff'
}).animate({
'left' : liPos,
'width' : lineWidth
}, 200);
}
lineSet();
//Привязываем функцию к событию click
nav.find('li').on('click', function() {
$activeLi.removeClass('active');
$(this).addClass('active');
refresh();
lineSet();
});
});//end ready
</script>
</body>
</html>
Raw
style.css
/*---Сброс стилей---*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, big, em, font, img, small, strong, sub, sup, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate; border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
strong,b{
font-weight:bold
}
em{
font-style:italic
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
*{
box-sizing: border-box;
}
/*---Конец сброса стилей---*/
/*---Clearfix---*/
.clearfix:before, .clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
/*---Clearfix конец---*/
/*---Скользящая линия---*/
body{
font-family: "Arial", sans-serif;
}
nav{
min-width: 600px;
background-color: #21ba91;
box-shadow: 0px 5px 10px -2px rgba(117,117,117,1);
}
nav li{
float: left;
}
nav li a{
display: block;
padding: 25px;
text-decoration: none;
text-transform: uppercase;
color: #fff;
font-weight: bold;
transition: all 0.5s;
}
nav li a:hover{
background-color: #1f9676;
color: #000;
}
/*---Скользящая линия конец---*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment