TOP  >  WebService  >  CSS3・jQueryで表現するクリエイティブなメニュー「64 jQuery CSS3 Menu Plugins and Tutorials」
2014年01月21日

CSS3・jQueryで表現するクリエイティブなメニュー「64 jQuery CSS3 Menu Plugins and Tutorials」

殆どのwebサイトで使用されるメニューは、サイト全体のレイアウトにばかりに手を回しがちで、どうしてもデザインがワンパターンになってしまうことも多いと思います。そんな時是非利用したい、CSS3・jQueryで表現するクリエイティブなメニュー「64 jQuery CSS3 Menu Plugins and Tutorials」を今回は紹介したいと思います。

jqmenu1
（Responsive Multi-Level Menu – Demo 1）

シンプルで定番として利用できるもの、動きが凝ったもの、形状が個性的なものなど、いろいろなタイプのメニューがまとめられているので、サイトに動きを出したり、ちょっとした仕掛けを取り入れたい時に便利に利用できます。

詳しくは以下

jqmenu3

Circular Navigation – Demo 2 | Codrops
円形の珍しい形がとても印象的なメニュー。円をクリックすると各メニューが出現する形状になっています。
　
　
　
　
　
jqmenu2

Slide Down Box Menu with jQuery and CSS3 | Codrops
メニューにボックス状の写真を取り入れることができます。使用する写真で印象を変えることもできそうです。
　
　
　
　
　　
jqmenu4

Hexagon menu | CSSDeck
六角形の珍しい形のメニューはフラットテイストのデザインなので、今主流のデザインにぴったり。
　
　
実際に使用することで、新しいCSS3・jQueryの機能を学ぶこともできそうですね。いろいろ試しながら実際に取り入れてみてはいかがでしょうか。

64 jQuery CSS3 Menu Plugins and Tutorials | Designbeep

※当サイトのに掲載されている一部画像、スクリ－ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。
posted 10:52  |  
Category: WebService   
tag: CSS3 jQuery menu plugin Tutorial チュートリアル プラグイン メニュー
このエントリーをはてなブックマークに追加

関連記事

Default Thumbnailフォームをカスタマイズできる jQueryプラグインまとめ「13 Effective Free jQuery Plugins that Enhance Your Forms」 CSS3とjQueryで実現する55のタブメニュー「55+ Free CSS3 jQuery Tab Menu Plugins」 ユーザーフレンドリーにするための40の新しいjQueryプラグイン「40 Fresh jQuery Plugins To Make Your Website User Friendly」 デザインに動きや機能性を簡単に取り入れられる HTML5&CSS3チュートリアル「Useful And Fresh HTML5 & CSS3 Tutorials」

Sponsor

最近の記事

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください 【商用可】アナログ感のあるドローイングフリーフォント「THRONE」 アイコンサイズやカラーを選んでSVGで出力できる「ICONSVG」 子どもをイメージしたフリーフラットアイコンセット「Download free Childhood flat icons set」 クリエイター向けモックアップテンプレートまとめ「15 Free Hero & Scene Creator Mockup Templates for Photoshop」 バレンタインを楽しく演出するフリーアイコンセット「50 free valentines themed icons」 インスタグラムの投稿をおしゃれに彩るフリーテンプレートまとめ「10 Free Instagram Story Templates」 花を抽象的にイメージしたパターン素材「Art Dimension abstract patterns」 個性的なラインナップを楽しめるフリーアイコンセット「Emojious Icons」 最新のクリエイティブなフリーフォントまとめ「20 New Free Fonts For 2019」

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ－ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに！をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る