ラインを使ったスタイリッシュなメニュー26パターン Line Menu Styles

cap2

Line Menu Stylesはラインを使ったスタイリッシュなメニュー26パターンです。

ライン要素をデザインに取り入れることで、斬新なメニューを実装しています。

レスポンシブにも対応していて、スマホではメニューが縦に並んで見えます。

cap88

いずれも、CSSとJavascriptだけで実装可能です。

スポンサーリンク

デモ

デモページを用意しました。

ダウンロード

サイトの「Download source」ボタンからダウンロードできます。

cap

実装方法

まずは、ダウンロードしたフォルダにあるcomponent.cssを読み込みます。

デザインを整えるためにスタイルを調整します。demo.cssを読み込んでもいいのですが、余計な要素が入っているので、最低限に削って、下記だけでも大丈夫です。リンクカラーなどは変更してください。

htmlは下記のようになります。h2の「id=”Alonso”」とnavの「class=”menu menu–alonso”」の部分を変更することで、様々なスタイルを適用することが可能です。

最後に、classie.jsを読み込みます。必ず、</body>タグの直前に配置してください。

以上で完了です。

ドキュメント

スポンサーリンク
Line Menu Styles – ラインを使ったスタイリッシュなメニュー26パターン

人気の記事

コメントを投稿する

  • Posted on 2016.02.10
  • Views 746