Я пытаюсь создать "приятное" меню CSS, используя (главным образом) CSS, но с небольшим количеством jQuery а также:
Моя общая идея:
+------------------------+
| |
| |
| +---+ |
| | | |
| |___| | <-- Hover this center piece
| |
| |
| |
+------------------------+
+------------------------+
| _ |
| |\ | <-- All start moving up to top of screen
| \ +---+ |
| | | |
| |___| |
| |
| |
| |
+------------------------+
+------------------------+
| +---+ |
| | | |
| |___| |
| |
| || All, but one |
| || moves down |
| \/ |
| |
+------------------------+
+------------------------+
| +---+ |
| | | |
| |___| |
| |
| One stays, |
| +---+ the rest move this way
| | | ---> |
| |___| |
+------------------------+
+------------------------+
| +---+ |
| | | |
| |___| ^ | The rest move up
| | |
| | |
| +---+ +---+ |
| | | | | |
| |___| |___| |<-- Another stays
+------------------------+
Complete:
+------------------------+
| +---+ +---+ |
| | 1 | | 4 | |
| |___| |___| |
| |
| |
| +---+ +---+ |
| | 2 | | 3 | |
| |___| |___| |
+------------------------+
Однако это предполагает, что будет четыре дочерних элемента div. Поэтому я пытаюсь создать способ "определить угол/положение" в jQuery (который, если честно, не работает слишком хорошо).
Аналогичный дизайн:
Итак, в конце концов, поскольку есть четыре divs, они будут находиться на расстоянии 90 градусов от центра (360/4 divs = 90 градусов друг от друга).
Если бы были, скажем, шесть дочерних div,
360/6 = 60 degrees
Таким образом, они будут равномерно распределены с интервалом 60 градусов.
Я также добавлю анимацию между ними, поэтому поэтому я играю с поворотами и т.д., но я просто не могу понять, как это сделать:
Мой текущий образец:
$(".wrap").hover(function(){
var x =$(this).children().length; //Counts '.circles'
var degree = 360 / x; //Gets angle
var percent = 100 / x;
var curPercent = percent;
$(this).children().each(function (index) {
$(this).css("transform","rotate(" + degree*index + "deg)");
$(this).css("top",percent + "px");
$(this).css("left",percent + "px");
percent = percent + curPercent;
});
});
.wrap{
height: 300px;
width: 300px;
background: red;
position: relative;
transform-origin: center center;
transition: all 0.8s;
}
.wrap:hover .circle{
top: 0;
left: 0;
}
.circle{
transition: all 0.8s;
position: absolute;
height: 50px;
width: 50px;
top: calc(50% - 25px);
left: calc(50% - 25px);
background: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="circle">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>