<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.navbar-collapse{
width: 100%;
overflow: hidden;
position: relative;
height: 32px;
}
.nav-block {
display: flex;
position: absolute;
left : 0px;
}
.nav-block a{
min-width: 240px;
border-right: #FF0000 solid 1px;
text-align: center;
font-size: 32px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".navbar-collapse").mousemove(function(e) {
var zip = 300;
var Width = $(this).width();
var container = $(".nav-block");
var containerWidth = container.width();
var left = 0;
if (e.pageX > zip) {
left = (Width - containerWidth) * ((e.pageX - zip) / (Width - 2 * zip));
}
if (e.pageX > Width - zip) {
left = Width - containerWidth;
}
container.css("left", left + "px");
});
});
</script>
</head>
<body>
<div class="collapse navbar-collapse">
<!-- ========================== Пункты меню ===========================-->
<div class="nav-block">
<a class="menu-text" href="index.html">ГЛАВНАЯ</a>
<a class="menu-text" href="news.html">НОВОСТИ</a>
<a class="menu-text" href="calendar.html">РАСПИСАНИЕ</a>
<a class="menu-text" href="zapiska.html">ЗАПИСКИ</a>
<a class="menu-text" href="foto.html">ФОТО</a>
<a class="menu-text" href="video.html">ВИДЕО</a>
<a class="menu-text" href="donate.html">ДОНАТ</a>
<a class="menu-text" href="contacts.html">КОНТАКТЫ</a>
</div>
</div>
</body>
</html>