ラインを使ったスタイリッシュなメニュー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>タグの直前に配置してください。

以上で完了です。

ドキュメント

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 786