<head>
<style>
.slider_menu_div {
width: 100px;
height: 30px;
font-weight: bold;
color: #fff;
background: #f00;
position: absolute;
}
#start_m {
left: 650px;
top: 480px;
cursor: pointer;
}
#m_div_1 {
left: 150px;
top: 80px;
}
#m_div_2 {
left: 250px;
top: 120px;
}
#m_div_3 {
left: 350px;
top: 160px;
}
#m_div_4 {
left: 450px;
top: 200px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// сначала все собираем в кучу и прячем
var start_pos_x = $('#start_m').css('left'); // в эту точку блоки будут собраны на старте
var start_pos_y = $('#start_m').css('top');
var slide_speed = 1500; // скорость выстраивания блоков милисекунды
var m_div_arr = [];
$('.slider_menu_div').each(function(i){
var curid = this.id.split('_')[2];
var p_top = $('#m_div_'+curid).css('top');
var p_left = $('#m_div_'+curid).css('left');
m_div_arr[i] = [p_top,p_left];
// собираем блоки в стартовую точку
$('#m_div_'+curid).css({'top':start_pos_y, 'left':start_pos_x, 'visibility':'hidden'});
});
// возвращаем все блоки на свои места согласно купленных билетов
$('.someclass').click(function () { //Ловим клик по классу someclass
$('#start_m').css({'visibility':'hidden'}); //спрячем кликер
$('.slider_menu_div').each(function(i){
var curid = this.id.split('_')[2];
$('#m_div_'+curid).css('visibility','visible');
$('#m_div_'+curid).animate({'top':m_div_arr[i][0], 'left':m_div_arr[i][1]}, slide_speed);
});
return false;
});
});
</script>
</head>
<body>
<div id="start_m" class="slider_menu_div someclass">Click Me!</div>
<div id="m_div_1" class="slider_menu_div">1 menu item</div>
<div id="m_div_2" class="slider_menu_div">2 menu item</div>
<div id="m_div_3" class="slider_menu_div">3 menu item</div>
<div id="m_div_4" class="slider_menu_div">4 menu item</div>
</body>
</html>
Вопрос по JS красивостям
Задачка встала из существующих примеров реализовать след. менюшку:
Сначала все части (они будут div блоками) находятся в одном месте сайта. Кликаем на них
и вуаля, дивы плавно раздвигаются (вправо влево по диагонали, это нужно гибко) выстраивается красивое меню
вобщем наверное алгоритм должен быть следующим:
на старте все блоки на своих местах по css.
Он лоад скрипт сгребает все блоки в стартовую точку.
Кликом, плавно раскидавает все блоки на свои стартовые места в заданном порядке. Плааааавно....
Может есть на jquery решение готовое? Кто знает?
Сначала все части (они будут div блоками) находятся в одном месте сайта. Кликаем на них
и вуаля, дивы плавно раздвигаются (вправо влево по диагонали, это нужно гибко) выстраивается красивое меню
вобщем наверное алгоритм должен быть следующим:
на старте все блоки на своих местах по css.
Он лоад скрипт сгребает все блоки в стартовую точку.
Кликом, плавно раскидавает все блоки на свои стартовые места в заданном порядке. Плааааавно....
Может есть на jquery решение готовое? Кто знает?
вот такой вариант наклипал, получилось интересно, но есть один недочет который мне лично режет глаза - это появление всех элементов одновременно.
Если кто посоветует как поправить буду благодарен
Если кто посоветует как поправить буду благодарен
Код: