コピペで参照できるおしゃれなメニュー、ナビゲーションデザイン13選!


ほとんど多くのホームページではメニュー、ナビゲーションを用意していることでしょう。しかし、少し作るのに苦労するものだと思います。
ここでは、Codepenで見つけたおしゃれなメニュー、ナビゲーションをご紹介します。
またscssをcssに変換してご利用したい方は、以下のサイトをご利用ください。

http://www.sassmeister.com/

1.CSS3/Javascript Pure Dropdown Menu

See the Pen CSS3/Javascript Pure Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.

2. CSS Responsive animated Accordion

See the Pen CSS Responsive animated Accordion by Chris Wright (@chriswrightdesign) on CodePen.

3.Gooey Menu

See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen.

4.Navigation Bar by Jan Kaděra

使い道難しいがすごいですね!

See the Pen Navigation Bar by Jan Kaděra by Katy DeCorah (@katydecorah) on CodePen.

5.Elastic CSS navigation

See the Pen Elastic CSS navigation by Daniela B (@violelune) on CodePen.

6.Material flex header

See the Pen Material flex header by Atticus Koya (@OfficialAntarctica) on CodePen.

7.Side Sliding Menu CSS

See the Pen Side Sliding Menu CSS by Eduard L. (@EduardL) on CodePen.

8.Sliding Vertical Nav

横から出てくるメニューです!リンク先を変えるなどもできるので汎用性あるよいメニューデザインですね!コピペで動きます。/p>

See the Pen Sliding Vertical Nav by alassetter (@alassetter) on CodePen.

9.Animated menu

CSSのみでかかれた横から出てくるおしゃれなナビゲーションメニューです!コピペで動きます。/p>

See the Pen Animated menu by lsgrrd (@lsgrrd) on CodePen.

10.Slide Icon Menu

CSSのみでかかれた横から出てくるおしゃれなナビゲーションメニューです!コピペで動きます。/p>

See the Pen Slide Icon Menu by Hugo DarbyBrown (@hugo) on CodePen.

11.Side nav play

CSSのみでかかれた横から出てくるおしゃれなナビゲーションメニューです!コピペで動きます。/p>

See the Pen Side nav play by Michael Arestad (@MichaelArestad) on CodePen.

12.iOS style sliding menu

横からナビゲーションが出てくるデザインです。!コピペで動きます。/p>

See the Pen iOS style sliding menu by Jason Howmans (@jasonhowmans) on CodePen.

13.Animated toolbar icons

中にあるアイコンを変えてSNSアイコンにするなどが良いかも!汎用性は高いですね。

See the Pen Animated toolbar icons by Daniela B (@violelune) on CodePen.

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です