ザリガニデザインオフィス

ハンバーガーボタンジェネレーターを作りました

Vueの練習も兼ねてハンバーガーボタンジェネレーターを作りました。

使い方

使い方はいたって簡単で、ハンバーガーボタンの縦、横、線の太さを入力するだけで自動的HTML、CSS、jQueryのコードが生成されます。あとは、それを使いたいところにコピーするだけでOKです。

数値を入力するとリアルタイムで反映されるので、数字を変えながらボタンを作ることもできます。

カラーコードを入れれば色もカスタマイズできます。

今後の予定

いくつかアップデートをしたいと思っており、まずはレスポンシブ対応します。現在はjQueryのみですがバニラJSのコードも生成できるようにします。(あと、裏側のVueロジックが汚いのでリファクタリングします)

Vueの教本最初の70Pだけ読んで作ったものなのでv-modelとmethodsで作ってますが、それだけでもこんなものが作れるVueってすごいです。