Форум

Aligatro · #1 (**permalink**) 18.02.2014, 01:49

Добрый день дорогие форумчане, нужна ваша помощь.

Для мобильной версии сайта, мне надо сделать выпадающее меню (при клике на ссылку, slidedown или slidetoggle) но только без использования jquery. Я перелопатил уже весь интернет в поисках нужного скрипта, но то что я нахожу, либо не становится на сайт, либо вообще не работает. Может кто-то сможет помочь выковырять slidetoogle из библиотеки jquery или расскажет как можно и вовсе обойтись без него используя нативный js.

Заранее большое спасибо за помощь -)

P.s эту тему - видел. Но скрипт который там представлен, чрезвычайно долго выезжает (чем это вызвано - не знаю) =(

рони · #2 (**permalink**) 18.02.2014, 02:29

Aligatro,
Основы программной анимации на JavaScript
или тут
http://learn.javascript.ru/js-animation#основы-анимации
а уж на форуме этих slidetoogle без jquery вагон и маленькая тележка

ruslan_mart · #3 (**permalink**) 18.02.2014, 03:43

Aligatro, на CSS3 подойдёт?

Aligatro · #4 (**permalink**) 18.02.2014, 19:33

Мне на чем угодно подойдет =) Даже с фиксированной высотой (а не display:block - display:none). Я просто почти закончил пилить мобильную версию сайта и на slidedown/slidetoggle застопорился, не хочу подгружать 100кб ради 1 анимации =)

Мне нужно реализовать простое выезжающее моб меню - не более -)

P.s рони, спасибо за материал. А не могли бы Вы пожалуйста подсказать, какие настройки в последнем приведенном скрипте необходимо сменить, дабы блок по умолчанию был скрыт и только при клике открывался. Просто я полный профан в js, сам - не разберусь. Спасибо.

P.s.s А вырезать из jquery slidetoggle реально? Или придется половину библиотеки переносить и получится пирова победа?

рони · #5 (**permalink**) 18.02.2014, 20:28

Aligatro,
строка 100--- var n = 1;
строка 131 ---- <ul id='right_menu' style="height: 0px; display: none">

danik.js · #6 (**permalink**) 18.02.2014, 20:31

<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 · #7 (**permalink**) 18.02.2014, 20:32

Сообщение от Aligatro

P.s.s А вырезать из jquery slidetoggle реально? Или придется половину библиотеки переносить и получится пирова победа?

Тогда тебе стоит обратить внимание на zepto.js

Aligatro · #8 (**permalink**) 18.02.2014, 20:36

Рони, спасибо огромное. Не пойму почему, сделал в точности так же, но не сработало (первая идея которая пришла мне в голову кстати), наверное где-то ошибся.

danik, спасибо что откликнулись, сейчас опробую Ваш вариант. А по поводу костылей, это явно не в моих силах. Я только еле-еле начинаю понимать что из себя js представляет. Еще даже синтаксис не до конца выучил.

Всем огромнейшее спасибо за помощь, даже не знаю сколько бы я еще времени потратил в поисках ответа если бы не вы. Благодарю.

рони · #9 (**permalink**) 18.02.2014, 20:47

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>

danik.js · #10 (**permalink**) 18.02.2014, 21:11

рони, на мобилу самый лучший вариант - это css3.
И кто же для анимации setInterval использует, в наши то дни..

Есь же requestAnimationFrame...

Форум

Справочник

Discord чат

Курсы javascript