Off-Canvas Menu Effects | Codrops
Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations. Today we’d like to share a couple of styles and effects for off-canvas menus. The off-canvas sidebar is widely used and we have already created some effect inspiration before. Like with everything, style evolves and today we want to show a new set of modern effects for your inspiration. Different
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
[JS]コンテンツを効果的にナビゲートするjQueryのプラグインのまとめ
スマフォ・タブレットでよく見かける三本線のナビゲーションをはじめ、コンテンツをスライドしてかっこいいアニメーションで表示されるサイドバー、1ページで構成されたサイト用のナビゲーションなど、あなたの大切なコンテンツを効果的にナビゲートするjQueryのプラグインを紹介します。
CSSだけで作る「多階層」なドロップダウンメニュー
以前書いた「CSSだけで作る動きのあるドロップダウンメニュー｜Webpark」という記事が検索エンジン経由でそこそこアクセスがあり、よく質問をいただきます。そのなかで多階層にできないのかという質問があったので作ってみました。 IE7の場合擬似要素が使えませんので、次の階層があることを示す矢印が表示されません。ドロップダウンの機能はIE7でも問題ありませんので、IE7に対応させる場合は矢印を画像にするなどすればよいと思います。 それではHTMLからいきます。 HTML かなり長くなるのでメニュー1の部分だけ載せています。 <ul id="dropmenu"> <li><a href="#">メニュー1</a> <ul> <li><a href="#">子メニュー</a> <ul> <li><a href="#">孫メニュー</a></li> <li><a href="#">孫メニュー</a>
びよ〜んと弾むのが気持ちいい！タブレット・スマフォで使いたいナビゲーション -Bounce Menu
タップすると、びよ〜んと弾んでナビゲーションが表示されるタブレット・スマフォ向けに実装してみたいナビゲーションを紹介します。 Bounce Menu 左下をタップで動作します。 実装はこんな感じです。 HTML <div class="device"> <div class="screen"> <div class="menu"> <ul> <li class="lock"><a href="">Lock</a></li> <li class="share"><a href="">Share</a></li> <li class="download"><a href="">Download</a></li> </ul> </div> <div class="toggle"> <div class="x"></div> <div class="y"></div> </div> <div cl
Building a Circular Navigation with CSS Transforms | Codrops
A tutorial on how to create a circular navigation using CSS transforms. In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique. Like I mentioned, there’s going to be some b
Multi-Level Push Menu | Codrops
An experimental push menu with multi-level functionality that allows endless nesting of navigation elements. Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, somethin
アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル:phpspot開発日誌
Responsive Retina-Ready Menu | Codrops アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル アイコンフォントなら拡大縮小しても劣化はないということで、CSSとJavaScriptを使ってうまくアイコンもリサイズして綺麗にレスポンシブに、更にRetinaにまで対応してくれるデモです。 UIデザイナーな方はやること増えて大変ですが、チュートリアルをベースにライブラリも出てくれば対応は楽になりそうですね。 それにしても色んなテクニックやディスプレイが出てきたりと、この業界考えることが増えて大変ですね 関連エントリ 3DのソーシャルメディアボタンをCSS3で作成するチュートリアル モダンなサイトを作成するためのCSS3チュートリアル集 テキストを円形に描画するチュートリアル WEBデザイナーなら見ておくべきCSS3のアニ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://mmenu.frebsite.nl/
プラグインやチュートリアル 25