Vertical accordion menu using jQuery and CSS3
thinsoldier If anyone needs this to allow multiple areas to be open at the same time just make this small change to the JS /*jQuery time*/ $(document).ready(function(){ $(“#accordian h3″).click(function(){ //slide up all the link lists // $(“#accordian ul ul”).slideUp(); //slide down the link list below the h3 clicked – only if its closed if(!$(this).next().is(“:visible”)) { $(this).next().slideDo
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
Easing Functions Cheat Sheet
Easing functions specify the rate of change of a parameter over time. Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor. This page helps you choose t
スマホ対応のjQueryベースのイメージスライダー – ヒビヅレ
jQuery Touch Swipe Slider イメージ 現在KARA-FULLのトップで使っているスライダーはjQueryベースで拡張性の高いSliderKitというのを使っているんですが、スマートフォン対応を考えるとちょっと使いにくさを感じたのでスワイプ（フリック）などの動作に対応したTouchSwipeというタッチデバイスをベースにイメージスライダーを作成しました。 俗にいうjQueryプラグインってやつです。 このTouchSwipeの便利なところはタップやスワイプだけでなく2本指でのスワイプにも対応しているという点です（使ってませんが）。ただあくまでこのプラグインはタッチデバイス用のプラグインなのでスライダーなどの機能は自分で作る必要があります。 という訳で作ったのがコチラ。 Demo：jQuery Touch Swipe Slider – jQuery animation
mb.CSSAnimate
Animate using CSS3 transition instead of the default jQuery.animate method. It provides a fallback to the default animate method if CSS3 is not supported by the browser. here is the call for this example: the "DIV" code: the function: var cH = $(window).height(); var cW = $(window).width(); $.fn.test = function() { var cH = $(window).height(); var cW = $(window).width(); return this.each(function(
jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
List of Free CSS3 and jQuery Menus Plugins – eWebDesign
見るだけでもワクワクする、CSS3とjQueryのかっこいい7つのエフェクト
http://www.ryancollins.me/?p=589
SlideFinder -Web開発者向け日本語スライドまとめ-
http://www.designwalker.com/2010/05/css3.html