ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時(メニューが展開しているときなどのアクティブ時)のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
![CSSで実装するハンバーガーメニュークリック時のエフェクト 10+ - NxWorld](https://cdn-ak-scissors.b.st-hatena.com/image/square/32cf955c3c83de2e8ba7a992698cf95b2dbbf75b/height=288;version=1;width=512/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2F12-css-hamburger-menu-active-effect.png)
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時(メニューが展開しているときなどのアクティブ時)のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
Hamburger Menu Icons (Three Line Menu Icon / Navicon) Different Ways A universal symbol for “menu” has been on a lot of people’s minds lately. (“Navicon”, get it?!). Jordan Moore wrote up a big article on it for Smashing Magazine. Jeremy Keith wrote about it. Stuart Robson wrote about it. Tim Kadlec wrote about it. If you want to read more about the thinking behind this stuff and see examples, rea
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生! 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
jQuery Navobile by Made by Made レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」 レスポンシブ関連のライブラリは色々でてますが、これは便利かも、と思ったプラグイン。 通常のPCモード 幅を狭くするとナビゲーションメニューが現れます クリックでアプリ風のメニューに変身 必要最低限さっくりと入れておくと便利そうなプラグインですね 関連エントリ PCでもスマホでもスワイプで画像が遅れるスライドショー実装jQueryプラグイン「Swipeshow」 スマホ関連のリモートホストのまとめ スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 スマホ・タブレットの判別ができるPHPクラスライブラリ「PHP Mobile Detect」
(最終更新: 2016-10-14) デモ: https://sutara79.github.io/demo-simple-foldable-list/ ソースコード: https://github.com/sutara79/demo-simple-foldable-list/ 解説下記のリスト要素を開閉式メニューにしたい場合。 <ul id="main_menu"> <li><a href="#">見出し1</a> <ul> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー1</a></li> </ul> </li> <li><a href="#">見出し2</a> <ul> <li><a href="#">サブメニュー2</a></li> <li><a hre
jQueryで現在開いているページのURLの一部を取得して、body class="ココ" に入れちゃえという話。 jQueryプラグイン jQuery-URL-Parserについて jQuery-URL-Parserは、URLをパースしてくれるjQueryのプラグインです。 以下は簡単にどこを取れるか書いています。詳しくはjQuery-URL-Parserで確認してくださいね。 URL attributes 「.attr()」 https://example.com/folder/dir/index.html?item=value ・/folder/dir/index.html ・/folder/dir/ ・index.html Query string parameters 「.param()」 https://example.com?sky=blue&grass=green ・'bl
よく、今いるページの時はメニューがアクティブになっていてわかりやすい表示をするUIがあります。 例えば今いるURLがメニューのURLと同じURL、つまり 今いるURLと、メニューのaタグURL http://example.com/index.html にいる時はクラスに active 要素を付加したいという場合があるとします。 単純に各々メニュー部分にその時のURL時でのHTMLにクラスをつけてあげれば良いのですが、 これでは何とも面倒ですし、変更が伴うとその度に修正しなければなりません。 そこでjQueryを使って処理します。 サンプルコード jQueryを使っていますので、先にjQueryファイルを読み込んである事が条件です。 var url = document.URL.split('/'); $('ul li a').each(function(){ var menu_href
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
39 Well-Designed Navigation Menu Bar PSD Files - UI よくデザインされたナビゲーションメニューバーのPSD素材39。 次のような美しいナビゲーションメニューのPSD素材が多数。 デザインに迷った際や、こういうデザインのやり方があったのかという参考に使えそうです 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 PSD形式のフレッシュなフリーアイコン素材37 JavaScriptからPhotoshopファイルの情報をパースできる「psd.js」 iPhone、Android、WindowsPhone等のPSD素材集
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
Demo 3 背景のカラーがアイテムごとに異なります。 実装 HTML メニューはリスト要素で実装されており、二つのspan要素を内包したa要素とimg要素がアイテムに含まれています。 <ul class="mh-menu"> <li> <a href="#"> <span>Art Director</span> <span>Henry James</span> </a> <img src="images/1.jpg" alt="image01"/> </li> <!-- ... --> </ul> CSS Demo 1では、「.mh-menu li」には背景カラーとして「rgba(255,255,255, 0.8)」が割り当てられています。ホバー時にはこれが淡いブルー「rgba(225,239,240, 0.4)」になります。 .mh-menu li:hover a{ backgroun
CSS3 animated dropdown menu - RedTeamDesign CSS3単体でアニメーションするドロップダウンメニューを実装 ドロップダウンをCSSのみでしかもクオリティもよく実現できているサンプルです JavaScriptがいい加減にせい、というぐらいの出来になっております 選択肢が広がるというのはいいことですね 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 Google+風のボタンUIセット&ドロップダウン
cssやプログラミングcss+jQuery jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Do
JavaScriptライブラリでリッチなUIを手軽に作れるようになったのはいいけど、最近ではそれもすっかりマンネリ気味。そろそろ、ほかのWebデザイナーとは違うデザインを取り込んで何とか差をつけたい――。そんなときは、国内のデザイン誌やブログではなく、海外サイトに目を向けてみてはどうでしょうか。たとえば、優れたWebサイトを紹介している「dzineblog」というブログなら、海外のWebデザインのトレンドをいち早くチェックできます。 そのdzineblogの膨大なコンテンツの中から、今回注目するのが、「10 Websites That use JavaScript Animation Effectively!!」という少し前のエントリー。JavaScriptによるアニメーションエフェクトを上手に使っているサイトを取り上げており、その中から、「Playground Blues」をピックアップ
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers 向こう半年の間でメガメニューがいたるWebサイトにあらわれるだろうという予測がSitePoint: Mega Menus: the Next Web Design Trendで紹介されている。予測のベースになっているのはJakob Nielsen氏が23日に公開したMega Drop-Down Navigation Menus Work Wellのようだ。Jakob Nielsen氏はNielsen Norman Groupの会長を務めるとともに、Webデザインユーザビリティの権威として名が通っている人物。 Mega Menus: the Next Web Design TrendではWebデザイナがナビゲーションをデザインする場合はたいだい次の
Index of /demos NameLast modifiedSize Parent Directory - windows.html2010-02-26 19:13 9.1K ttabs.html2010-02-26 19:13 1.0K tooltip.html2010-02-26 19:13 3.2K sort_tabs.html2010-02-26 19:13 2.1K sort_lists.html2010-02-26 19:13 1.6K sort_floats.html2010-02-26 19:13 2.9K sort.html2010-02-26 19:13 5.2K slideshow.html2010-02-26 19:13 4.1K slider_resize.html2010-02-26 19:13 1.8K slider_minmax.html2010-0
Designrific - Mostafa Mourad from Egypt - Blog: 71 CSS menus for free CSSで作成されたサイトのメニューサンプル集。 サイトのデザインにとってメニュー部分は重要な箇所になってきます。そのメニュー部分のサンプル集。 多くのリソースから自分の作りたいサイトにあったナビゲーションを選んで使えますね。 11 CSS navigation menus 12 more CSS Navigation Menus. 14 Free Vertical CSS Menus 2-level horizontal navigation Absolute Lists Accessible Image-Tab Rollovers ADxMenu A drop-down theme Bookend Lists Bulletproof Slants C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く