Az4zell0

// Вариант 1. Привязываем контекст и первые по порядку параметры
function someFunk(a, b, event) {
	console.log(a, b, event);
}
element.addEventListener('click', someFunk.bind(null, 1, 2));

// Вариант 2. Используем интерфейс EventListener
function someFunk(event) {
	console.log(this.a, this.b, event);
}
element.addEventListener('click', {handleEvent: someFunk, a: 1, b: 2});

Для блока слева создай отдельный элемент на странице. Например, div с id "menu". В него помещай все, что тебе нужно. Умеешь подключать JQuery? На всякий случай, объясню.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <!-- JQUERY -->

Вот эту строчку впихни в head своей страницы. Теперь у нас подключен JQuery.
Что мы делаем дальше? Дальше нам надо отловить клик по нашему "бутерброду" и после клика, собственно, и выдвинуть менюху. Как это делается:

$(document).ready(function() {
  $("#menu").click(function() {
    $(this).addClass("show");
  });
});

Этот код просто выдели в отдельный .js файл (ну и подключи его как простой .js скрипт, разумеется. Только он должен быть подключен после того, как подключишь JQuery).

Короче, что мы сделали: мы отловили клик по этому элементу и повесили на него функцию, которая к нашему div'у добавит класс "show". Дальше уже чистый css.

#menu {
/* тут твои стили */
left: -350px;
}

#menu.show {
/* тут твои стили */
left: 0px;
}

Я думаю, суть ясна. Когда у менюхи появляется класс "show", то тогда мы просто "выдвигаем" ее из-за левого края страницы. По желанию можно сделать это плавным:

#menu {
/* тут твои стили */
transition: left ease 0.2s;
left: -350px;
}

#menu.show {
/* тут твои стили */
left: 0px;
}

Кстати, этот код написан под менюху, шириной в 350px.

Теперь ее надо закрыть. Тут 2 способа. Хотя нет, 3.
Можно отловить в нашем скрипте уход мышки с элемента и просто убрать класс "show" (mouseleave, removeClass()). А можно отловить клик по НЕэлементу див. Это тоже в JQ.
А можно еще расставить флаги, и контролировать, когда меню открыта, при нажатии на бутерброд, делать одно, и когда закрыта - другое.

Ну компоненты должны быть подключены на странице, что бы можно было их править.
Из публичной части правый верхний угол, переключаете "Режим правки" в положение "Включено".
И дальше при наведении курсора на компонент всплывает обрамление в виде рамки и в верхнем левом углу обрамления, появляется менюшка, откуда вы можете вызвать свойства компонента.
А вообще на оф.сайте битрикса есть подробная документация, с тестами на усвоение. Советую прочитать.
dev.1c-bitrix.ru/docs/php.php
Начните по порядку с "Контент менеджера", если вы разработчик не прыгайте сразу дальше, да, глядя в доку, из раздела "контент-менеджерам", вы можете сказать, что это вы уже знаете, однако, дочитайте каждый курс до конца и пройдите тест, если не смогли пройти, значит вы не знаете материал или не поняли его.

Для начала я бы посоветовал Вам всё-таки нагнать некоторую бесполезную массу в группу, создать фундамент для дальнейшего набора. Так как обычный пользователь вряд ли пойдёт в группу, в которой всего 20 человек. Для этого можно использовать, как Вы их назвали, биржи с заданиями.
Разместите ссылку на группу на своём сайте, осветите её в новостях, пригласите посетителей сайта активно туда вступать, можно даже не бескорыстно.
Потом не забудьте пригласить своих друзей, друзей друзей и пообщаться с пользователями похожих групп. Друзей попросить сделать репост. Это небольшое количество пользователей, но они будут достаточно верные, иногда даже активные.
А потом уже можно начинать активную таргетинговую рекламу или рекламу постами в группах.
Так вы добудете, хоть и не быстро, но качественную, живую аудиторию. Но всё это при условии, что сама группа будет актуальна, с грамотными и интересными постами.

Попробуйте добавить

-webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;

Это решает многие проблемы с transition и transform

Вы меня прям заинтересовали:)
Вот как-то так:
jsfiddle.net/Kaqn8/1

Только тут используется CSS3 добавьте префиксы для разных браузеров в border-radius

У меня точно такая же ситуация как и у тебя. Но начал я неожиданно, когда увидел на youtube уроки от Sorax-а. Посмотрел, рассказывает очень быстро, но те кто разбираются в js, говорят что курс больше подходит для тех, кто что-то о js уже знает и хочет вспомнить или узнать остальные подробности. Так вот первые уроки несложные, но потом нужно практиковаться, чтобы понять. Так что если книги читать не очень любишь, идеальный вариант. Я никогда и нигде не видел бесплатных уроков по каким-либо языкам в интернете такого уровня. Так что советую. Но начал я его, как не странно, смотреть не с JS, а с уроков CSS и узнал очень много полезной информации, которой раньше не знал подняв свой уровень вёрстки.
Вообщем, надеюсь чем-то помог. Вот youtube канал, вот группа на vk.com со всеми обновлениями.
Буду следить за топиком, так как сам не прочь почитать литературу, чтобы понять js.

input/output?
это ж как-бы основа всех основ )))