Mary Солнечная

самый простой - это сделанный своими руками.

(если можно на codepen покажите )

Сначала выложи то, что у тебя не получается, а потом проси помощи.
Если нужен готовый код - это на фриланс.

PS: Не знаю, в чем тут сложность. Вообще простейший блок.

uglify-js стоит, а gulp-uglifyjs — нет.

$('.bar').on('change', function () { /* биндим событие на изменение ползунка */
    $('.clouds').each( function() { /* выбираем все тучки и для каждой выполняем следующее */
      this.top = $('.bar').value() * this.top;  /* здесь изменяем координату как вам удбно */
    });
  } );

такой устроит ?

Считать количество символов и после нужного количества прятать

Я использую Gulp.js. И вам советую. С помощью него можно собирать полностью свое окружение со всеми компиляциями и изменениями. Через PhpShtorm тоже можно, но это работает только с этой IDE PhpShtorm а значит не столь универсально. Если вникнуть в Gulp то со своим проектом можно делать все.
gulpjs.com - go!
https://www.youtube.com/watch?v=vW51JUVT66w&t=1883s - вот пойдет для начала

В работе использую sass, стили каждого блока выношу в отдельный файл, где сначала описывается основные стили блока, а ниже media queries. Как писали выше, удобней в одном месте смотреть и редактировать поведение блока.

Касаемо процесса верстки, у всех он разный, некоторые накидывают html на всю страницу, а потом занимаются чисто css для него. Я практикую такой подход, верстаю от блока к блоку. Например начинаю с шапки, накидал html и сразу же все css и media для нее, протестировал везде, проверил, все шик, перешел к следующему блоку. С таким подходом, вам не мешают другие не отстиленные блоки, вы работаете только с одной частью страницы и концентрируетесь только для работы с ней. В добавок вы сразу протестили на всех разрешениях и больше к этому блоку не возвращаетесь.

Сейчас учу тоже JS.
Кому как, мне очень хорошо дается изучение по видео от Специалиста. Борисов "препод от Бога", объясняет сложные вещи буквально на яблоках.
Начинал c learn.javascript.ru мега ресурс, но сейчас пользую как справочник. Хотя начинал учить по нему

Я давно уже не использую на сайтах графику для создания стрелочек и прочих декораций. Для этих целей хорошо подходят иконочные шрифты по типу FontAwesome.

С помощью него вывести такую стрелочку можно написав такой код:
<i class="fa fa-chevron-right"></i>

Само же меню лучше полностью реализовать на CSS:

@import url(http://site.at.ua/css/fontawesome.css); /* Подключили шрифт с иконками */

ul.menu {list-style: none; width: 200px; position: relative;}
ul.menu li a {display: block; line-height: 30px;}
ul.menu a.submenu:before {font: 14px 'FontAwesome'; content: '\f054'; margin: 0 10px; float:right; line-height:30px;}
ul.menu li:hover {background: whitesmoke;}
ul.menu li ul {list-style: none; display: none;position: absolute; top: 0; left: 200px; width: 200px;}
ul.menu li:hover ul {display: block;}

А в HTML только указываем разметку меню:

<ul class="menu">
    <li>
        <a href="#" class="submenu">Подпункт</a>
        <ul>
            <li><a href="#">Ссылка</a></li>
        </ul>
    </li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
</ul>

Вот целый сайт посвященный дизайну меню.