slidetoggle без использования jquery
Добрый день дорогие форумчане, нужна ваша помощь.
Для мобильной версии сайта, мне надо сделать выпадающее меню (при клике на ссылку, slidedown или slidetoggle) но только без использования jquery. Я перелопатил уже весь интернет в поисках нужного скрипта, но то что я нахожу, либо не становится на сайт, либо вообще не работает. Может кто-то сможет помочь выковырять slidetoogle из библиотеки jquery или расскажет как можно и вовсе обойтись без него используя нативный js. Заранее большое спасибо за помощь -) P.s эту тему - видел. Но скрипт который там представлен, чрезвычайно долго выезжает (чем это вызвано - не знаю) =( |
Aligatro,
Основы программной анимации на JavaScript или тут http://learn.javascript.ru/js-animation#основы-анимации а уж на форуме этих slidetoogle без jquery вагон и маленькая тележка |
Aligatro, на CSS3 подойдёт?
|
Мне на чем угодно подойдет =) Даже с фиксированной высотой (а не display:block - display:none). Я просто почти закончил пилить мобильную версию сайта и на slidedown/slidetoggle застопорился, не хочу подгружать 100кб ради 1 анимации =)
Мне нужно реализовать простое выезжающее моб меню - не более -) P.s рони, спасибо за материал. А не могли бы Вы пожалуйста подсказать, какие настройки в последнем приведенном скрипте необходимо сменить, дабы блок по умолчанию был скрыт и только при клике открывался. Просто я полный профан в js, сам - не разберусь. Спасибо. P.s.s А вырезать из jquery slidetoggle реально? Или придется половину библиотеки переносить и получится пирова победа? |
Aligatro,
строка 100--- var n = 1; строка 131 ---- <ul id='right_menu' style="height: 0px; display: none"> |
<style>
div{
height: 100px;
background: red;
overflow: hidden;
transition: height 2s;
}
div.collapsed{
height: 0;
}
</style>
<button id="button">Toggle</button>
<div id="sample"></div>
<script>
button.onclick = function() {
sample.classList.toggle('collapsed');
}
</script>
classList может быть не во всех браузерах - смотри на caniuse.com и если что подключай костыль или пиши свои функции работы с классами. transition дублируй с префиксами -webkit, -moz, -ms. Вобще, с animation возможносей больше. |
Цитата:
|
Рони, спасибо огромное. Не пойму почему, сделал в точности так же, но не сработало (первая идея которая пришла мне в голову кстати), наверное где-то ошибся.
danik, спасибо что откликнулись, сейчас опробую Ваш вариант. А по поводу костылей, это явно не в моих силах. Я только еле-еле начинаю понимать что из себя js представляет. Еще даже синтаксис не до конца выучил. Всем огромнейшее спасибо за помощь, даже не знаю сколько бы я еще времени потратил в поисках ответа если бы не вы. Благодарю. |
Aligatro,
<!DOCTYPE HTML>
<html>
<head>
<title> </title>
<meta charset='utf-8'>
<style>
html, body{
height:100%;
margin:0;
padding:0;
}
#right_menu, li{
margin:0;
padding:0;
display:block;
}
#right_menu{
overflow: hidden;
width:70px;
height:125px;
background-color:#cccccc;
border:2px solid;
border-color: #dddddd #bbbbbb #bbbbbb #dddddd;
padding-left:50px;
}
li{
width:65px;
margin:5px;
font-family:arial, sans-serif;
font-size:10pt;
text-indent:5px;
}
li:hover{
background-color:navy;
color:white;
}
#b{
top:50px;
left:10px;
}
</style>
<script>
function animate(opts) {
clearInterval(opts.el.timer);
var start = new Date;
var delta = opts.delta || linear;
var height = parseFloat(opts.el.style.height);
opts.el.timer = setInterval(function() {
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1;
opts.step( delta(progress),height );
if (progress == 1) {
clearInterval(opts.el.timer);
opts.complete && opts.complete();
}
}, opts.delay || 20);
}
function elastic(progress) {
return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress)
}
function linear(progress) {
return progress
}
function quad(progress) {
return Math.pow(progress, 2)
}
function quint(progress) {
return Math.pow(progress, 5)
}
function makeEaseInOut(delta) {
return function(progress) {
if (progress < .5)
return delta(2*progress) / 2
else
return (2 - delta(2*(1-progress))) / 2
}
}
function makeEaseOut(delta) {
return function(progress) {
return 1 - delta(1 - progress)
}
}
window.onload = function() {
var input = document.getElementById("b");
var menu = document.getElementById("right_menu");
var body = document.body;
var n = 1;
input.onclick = function(){
n ^= 1;
var to = n ? 0 : 125,
display = n ? "none" : "block";
!n && (menu.style.display = display)
animate({
el : menu,
duration: 1000,
delta: makeEaseInOut(linear),
step: function(delta,height) {
menu.style.height = delta*(to-height)+height+"px";
},
complete : function() {menu.style.display = display}
})
};
body.onclick = function(event){
var event = event || window.event;
var target = event.target || event.srcElement;
if(target!=input && target!=menu &&!n && target.tagName != 'LI') input.onclick()
}
}
</script>
</head>
<body>
<input type='button' id='b' value = 'Click'>
<ul id='right_menu' style="height: 0px; display: none">
<li>Effect 1</li>
<li>Effect 2</li>
<li>Effect 3</li>
<li>Effect 4</li>
</ul>
</body>
</html>
|
рони, на мобилу самый лучший вариант - это css3.
И кто же для анимации setInterval использует, в наши то дни..  Есь же requestAnimationFrame... |
| Часовой пояс GMT +3, время: 22:04. |