detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ | かちびと.net
Result detailsタグを使った開閉コンテンツのスタイリングサンプル集です。 JSは開閉時のアニメーションに使用されているので、無くても開閉やアイコンのアニメーションに影響はありません。 css [data-css-icon] { --animdur: .3s; --loading-animdur: 0.8s; --animtf: ease-in; --bdw: 2px; --bdrs: 50%; --bgc: transparent; --c: currentcolor; --dots-bgc: silver; --dots-size: 0.5rem; --icon-size: 1rem; --size: 2.5rem; align-items: center; cursor: pointer; display: flex; justify-content: space-betw
menuFlip – jQuery Plugin for Flipping Navigation
August 11, 2011 menuFlip is a jQuery plugin for adding a ‘flipping’ effect to text based navigational menu items when hovered over without needing to use background images, which can be a pain. Download View source on GitHub Menu Example Home Web Blog Contact HTML All you need is this simple markup. <ul id="flip_nav"> <li><a href="/home">Home</a></li> <li><a href="/web">Web</a></li> <li><a href="/
CSSでタブ切り替えする方法
CSSでタブ切り替えを実現する方法を紹介します。 １．はじめに 「:target擬似クラスのまとめ」でエントリーしたとおり、リンク先のコンテンツのスタイルをCSSで変更することが可能になりました。 この擬似クラスを使って、これまでjQueryなどで実現していたタブ切り替えをCSSだけで行うことができるようになります。 ということで、簡単なサンプルを作ってみました。 サンプル このサンプルは「CSS3-Only Tabbed Area」に掲載されていたものをベースに、必要最小限な内容に修正したものです。 動作はFirefoxとChromeで確認しています。 ２．ソースコード サンプルのソースコードは下記のとおりです。ざっくりですがCSSの各セレクタには役割をコメントでいれてます。 <meta charset="UTF-8" /> <style> * { margin: 0; padding:
【★★★ - ｊＱｕｕｅｒｙ】 - クリックで開くアコーディオンメニュー
スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。 シンプルなコードで動作しますので、実装してみてはいかがでしょうか。 デモページ DEMO 説明 今回は2種類のアコーディオンを紹介します。 1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。 なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。 JS $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); $(".accordion dt"
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
jQuery ---- タブ(画像置換タイプ) - Qiita
jQueryを使ってタブを作ってみます。 このサンプルは自分で使うことを想定してるので作りが少々自分設定になってるますが、サンプル事態はきちんと動きました。 完成品イメージ↓ tab001に完成品をアップしておいたので動きはこっちで見てください。 ファイル構成 index.htmlHTMLのタグのみで、JavaScriptやCSSは外部ファイルで読み込みです。 selector.jsタブをクリックしたときの動きを扱う用のJavaScriptです。 selector.css今回のタブ用のCSSです。 コード <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
びよ〜んと弾むのが気持ちいい！タブレット・スマフォで使いたいナビゲーション -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
iOS7のかっこいいエフェクトを使ってコンテンツとナビゲーションを切り替えるスクリプト -iOS7 Zoom
iOS7のさまざまなシーンで利用されているズームを使って、コンテンツからナビゲーションを切り替えるjQuery+CSS3のかっこいいエフェクトを紹介します。 デモのアニメーション コンテンツから左上のボタンをタップ・クリックすると、ズームを使ってコンテンツを縮小し、ナビゲーションをダイナミックに表示します。 デモはデスクトップだけでなく、スマフォのブラウザでも動作します。 実際の動作は、下記ページで試してください。 iOS7 Zoom - out Side Nav Reveal スクリプトはjQueryを使って、下記のスクリプトを記述します。 (function($) { jQuery(document).ready(function() { $('.toggleMenu').click(function() { var windowHeight = $(window).height();
[CSS]アイデアが面白い、ボタンに次々とメッセージを表示するスタイルシート -Story Button
[CSS]アイデアが面白い、ボタンに次々とメッセージを表示するスタイルシート -Story Button Story Button こういうボーナス的なトリックって、面白いですよね。 気がついたビジターだけが楽しめたり、ボタンクリックへの背中を一押しするようなメッセージを入れるのもいいかもしれません。 実装は、簡単です。 HTML a要素で実装したボタンに、メッセージの数分のa要素を量産します。 デモでは、10のメッセージが表示されます。 <div class="button"> <a class="first"> Keep hovering me </a> <a class="slidein"> how are you today? </a> <a class="slidein two"> I'm doing well </a> <a class="slidein three"> tha
[JS]既存のナビゲーションを簡単にレスポンシブ対応のトグル型にするスクリプト -Naver
水平型など、今使用しているナビゲーションをスマフォやタブレットで表示した際に、トグル型ナビゲーションに自動で変更するjQueryのプラグインを紹介します。 スマフォ時の表示 Naverの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <link rel="stylesheet" href="jquery.fs.naver.css" type="text/css" media="all" /> <script src="jquery.fs.naver.js"></script> Step 2: HTML HTMLはナビゲーションの要素を指定できるように実装します。 ※ここでは、navで指定。 <nav> <a href="#">Home</a>
{:navgoco} Demo Page
navgoco {:navgoco} is a simple JQuery plugin which turns a nested unordered list of links into a beautiful vertical multi-level slide navigation, with ability to preserve expanded submenus between sessions by using cookies and optionally act as an accordion menu. Tweet Homepage | GitHub | JQuery | ReadMe | Changelog v0.2.1 - You can also click the caret/arrow on the right to toggle submenus! - Par
[JS]スライドさせるだけでなくもう一手間加えて、ぐぐぐっとかっこよくナビを表示するスクリプト -Box Lid Menu
Toybox Box Lid Menuの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトを</body>の上あたりに外部ファイルとして記述します。 <head> ... <link rel='stylesheet' type='text/css' href='css/box-lid.css'> </head> <body> ... ... <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <script src='js/jquery.box-lid.min.js'></script> </body> Step 2: HTML 左のナビゲーションとコンテンツをdiv要素などで配置し、並列の構造で実装します。 <div class='box-lid-menu'> <div cl
Contract web dev by day & Indie hacker by night! | AaronLumsden.com
PureDigital I have a passion and thirst for learning new technologies to keep up-to-date with modern web development. Certified Laravel Developer I fuss over creating software that not only looks and feels great but that are user friendly and adaptable to changing user needs. I’ve been bringing web ideas to life in a planned and managed way since 2009. I'm also a certified Laravel developer by Lar
[CSS]ヘッダをホバーするとナビゲーションがスライド表示されるスタイルシート（スクリプト無し）
スクリプトを使わずに、ヘッダをホバーすると非表示だったナビゲーションがアニメーションで表示させるスタイルシートのテクニックを紹介します。 デモページのアニメーション 通常時は細めのヘッダとコンテンツがあるだけで、ヘッダをホバーすると、非表示だったナビゲーションがアニメーションでスライドして表示されます。 デモのようなナビゲーションだけでなく、他のコンテンツを設置することももちろん可能です。 実装 Step 1: HTML ヘッダ部分は最初に表示されている要素、非表示の要素の2つが配置されています。 <div id="topbar"><a href="http://designshack.net">Back to Design Shack</a> <div id="tophiddenbar"> Other Links: <a href="http://designshack.net/cate
[JS]4種類のエフェクトを備えたタブを簡単に実装できるスクリプト -Tabulous.js
デモ：Flip Tabulous.jsの使い方 実装は非常にシンプルで、エフェクトの設定も簡単です。 Step 1: 外部ファイル 当スタイルシート、「jquery.js」と当スクリプトをhead内に記述します。 <link href='tabulous.css' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="tabulous.js"></script> Step 2: HTML HTMLは非常にシンプルで、タブをリスト要素、コンテンツをdiv要素で実装し、divで内包します。
[JS]スマフォ・タブレットでの利用を前提に作られたタブを実装するスクリプト -Tabby
Demo: 垂直型のタブ タブレットやデスクトップなどの広いスクリーンでは垂直型で右側にコンテンツが表示され、小さいスクリーンでは水平型に表示されます。 Tabbyの使い方 ステップは2つです。 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトとjQueryをbodyの下あたりに記述します。 <head> ... <link rel="stylesheet" href="tabby.css" type="text/css"> </head> <body> ... <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script src="tabby.js"></script> </body> Step 2: HTML HTMLはデモをベースに紹介します。 Demo: ベーシックタイプ
Chromeで開いている全てのタブを一瞬で隠せる拡張機能「PanicButton」 : 二十歳街道まっしぐら
PanicButtonは瞬時にタブを隠せる拡張機能です。 仕事をサボって趣味のサイトを閲覧してたら、突然上司が現れた！！ やばい、ページを閉じないと・・・！ たとえばこういった場面で活用できます。 便利な点は、ワンクリックでタブを全部閉じれるのはもちろんのこと、 閉じたタブをもう一度開き直す機能があるところです。 閉じたタブを記憶してくれて、ワンクリックで復元できるのは便利。 以下に使ってみた様子を載せておきます。 まず「PanicButton」にアクセスしましょう。 Chromeに拡張機能をインストールしましょう。 インストールすると、このようにPanicButtonが拡張機能一覧に並びます。 試しに複数個のタブを開いてみましょう。 そして、PanicButtonをポチッ。瞬く間にすべてのタブが閉じられます。 そして閉じると新しいタブが1つ開いた状態に。 PanicButtonは緑色にな
CSS だけで作るタブ切替ユーザインタフェース （float 使用版）
1つ前のエントリーで、:target 疑似クラスを利用した CSS だけで作るタブ切替 UI を実装してみるテストしてみました。詳しいことは下記のエントリーをご覧ください。 CSS だけで作るタブ切替ユーザインタフェース 先のエントリーで作ったサンプルは、position: absolute; を使って、各タブの内容を重ねちゃった上で表示を切り替えるっていう方法を使ったのですが今回は、float プロパティを使ったサンプルを紹介してみます。 実際のサンプルは下記に。 CSS だけで作るタブ切替ユーザインタフェース サンプル 最新の Firefox、Google Chrome、Safari、Opera など、:target 疑似クラスに対応したブラウザであれば問題なく動作するはず。IE は IE9 以降のみ。その他、スマートフォンなどでは動作に問題ないと思います。 HTML はほぼ変更なし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designrazzi.com/2013/css-tab-menus/