Нестандартное главное меню
Как сделать чтобы пункт меню с классом active был по центру страницы, при этом соседние пункты меню смещались по горизонтали ?
Тут пример страницы: https://jsfiddle.net/Alexbes89/mdaqwfLm/ |
Цитата:
Узнай размер активного элемента и родителя... Т.о. ты узнаешь координаты для его центрирования... По текущему положению активного элемента можно будет определить на сколько менять текущий отступ. Т.о. можно будет даже анимацию наладить! ;) |
выбранный пункт меню по середине
AlexBes89,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">body{
padding: 15px 0;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
}
.logo_text{
text-align: center;
font-weight: bold;
font-size: 28px;
}
.main_menu{
width: 100%;
display: block;
overflow: hidden;
margin: 30px 0;
}
.align{
width: 200%;
text-align: center;
position: relative;
left: -50%;
}
ul{
display: inline-block;
margin: 0;
padding: 0;
transition: 1s;
}
li{
display: inline-block;
}
.main_menu a{
padding: 5px;
display: inline-block;
transition: 1s ;
border-bottom: 3px solid transparent;
}
.main_menu a.active{
border-bottom: 3px solid blue;
transition-delay: .4s;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("ul").each(function(indx, ul) {
var lis = $("li", ul),
width = $(ul).width();
lis.each(function(indx, li) {
width -= $(li).width();
var left = width;
width -= $(li).width();
$(li).on("click", function(event) {
event.preventDefault();
$("a", lis).not($("a", li).addClass("active")).removeClass("active");
$(ul).css("margin-left", left + "px")
});
$("a", li).is(".active") && $(li).click()
})
})
});
</script>
</head>
<body>
<div class="wrapper">
<div class="logo_text">INVESTMENT VIEWS</div>
<div class="main_menu">
<div class="align">
<ul>
<li>
<a href="index.html" class="active">HIGHLIGHTS</a>
</li>
<li>
<a href="story.html">WHAT'S THE STORY?</a>
</li>
<li>
<a href="table.html">INVESTMENT SOLUTIONS</a>
</li>
</ul>
</div>
</div>
<div class="main_menu">
<div class="align">
<ul>
<li>
<a href="index.html">HIGHLIGHTS</a>
</li>
<li>
<a href="story.html" class="active">WHAT'S THE STORY?</a>
</li>
<li>
<a href="table.html">INVESTMENT SOLUTIONS</a>
</li>
</ul>
</div>
</div>
<div class="main_menu">
<div class="align">
<ul>
<li>
<a href="index.html">HIGHLIGHTS</a>
</li>
<li>
<a href="story.html">WHAT'S THE STORY?</a>
</li>
<li>
<a href="table.html" class="active">INVESTMENT SOLUTIONS</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
|
рони, спасибо большое за помощь =) , но есть один баг в твоем решении, например, если ширина экрана 375px и первый пункт активен, то меню становится в 2 ряда, и не центрируется, сейчас попробую разобраться..
|
Рони, решил вопрос таким образом:
.align{
width: 400%;
text-align: center;
position: relative;
left: -150%;
}
Еще раз огромное спасибо=) |
| Часовой пояс GMT +3, время: 02:32. |