Какое оно должно быть на чистом css или с JS сама реализации кнопки анимации открыть/закрыть ? Как оно должно работать, кто-то скажет какой варик выберешь такой и будет ну я типа первый верстаю вообще шаблон и меня даже самые тупые вопросы интересуют пока учусь, как лучше и т.д.. Варик 1 на чистом css https://codepen.io/kretzm/pen/guwEf?editors=0110 Варик 2 за счет js https://codepen.io/porsake/pen/omggbV
Чрезмерная погоня за идеалом сильно замедляет процесс и повышает вероятность того, что работа будет брошена. Делай как умеешь. Всё придет со временем. По теме: Погоня за "на чистом CSS" хороша только в академических целях. На практике - в боевых проектах нужно идти по пути наименьшего сопротивления. Клиенту глубоко насрать, на чем работают твои кнопочки. Они должны быть красивыми, быть красиво и плавно анимироваными и должны РАБОТАТЬ ТАК, КАК ОЖИДАЕТСЯ.
Тут я полностью согласен хотел бросить раз 20 уже все, но держусь и постараюсь дойти до послденего я типа разбил на несколько этапов это дело типа завершить полностью один потом забить на время поднять через недели 2-3 второй и третий я не хватаюсь за все сразу я пытаюсь понять что-то одно создать его хорошим потом отдохнуть и взяться за другую часть потом 3 и слепить все в кучу потом все наработки
У вас нет варианта на чистом CSS (да в общем то и не нужно изобретать велосипед). В обоих примерах кнопка изменяется за счет добавления/удаления класса. И делает это javascript. Ну а дальше просто применяются стили, соответствующие этому классу. В 1 варианте требуется библиотека jquery, а во втором - нет.