JSを使わずにアニメーションしながら展開するドロワーメニュー(スライドメニュー)の実装方法 | UNORTHODOX WORKBOOK | Blog
Javascriptを使わずに、HTMLとCSSだけでアニメーションしながら展開するドロワーメニュー(スライドメニュー)を実装する方法です。 クリックでドロワーメニューを展開させる場合、jQuery等でちょっとしたプログラムを組むのが一般的だと思いますが、以下の方法では、スクリプトを一切使わずにドロワーメニューを出したり隠したりしています。 タイトルで「アニメーションしながら」とありますけど、これについてはおまけみたいなもので、あくまでも「ドロワーが出現するきっかけをCSSでやる」がメインになります。なので、アニメーションについてはあまり触れていませんがご了承ください。一応、アニメーションも全てCSSだけでやっていまして、こちらのエントリーで紹介しているものを使用しています。 JSを利用しないドロワーメニュー まずは以下のデモをご覧ください。 JSを使用しないドロワーメニューのデモ デモ右
ハンバーガーメニューを表示する時、背景を固定する方法 - Qiita
やること あらゆるOSにおいて、スクロールがあるハンバーガーメニューを表示している間、背景のスクロールは動かないようにする。 まえおき 基本的に、スクロールさせるには overflow : scroll;、スクロールをしないようにするにはoverflow: hidden;を使うことが一般的。 アプリケーションのhtmlタグには初期値でoverflow : scroll;がついている。 そのため、わざわざoverflow : scroll;を当てなくてもスクロールできるようになっている。 ###ちなみに htmlタグにoverflow: hiddenをつけてみてください。ほとんどの場合、スクロールがを防げます。 このほとんどというのがどういうことか後ほどわかります。 #実装前のCSSとJSのコード ##ハンバーガーメニューのCSS .humburger-menu { /*スクロールするように
jQuery tabbed Plugins | jQuery Script
Free jQuery tabbed Plugins All the Free jQuery Plugins about 'tabbed' are listed here. DemoDownload jQuery Plugin For Automatically Creating Tabs - autotabs 08/21/2014 - Layout - 3436 Views autotabs is a simple jQuery plugin for automatically creating a tabbed pane to display the content which is broken into logical sections. Simple Responsive jQuery Tabs Plugin With Fade Effects 07/16/2014 - Layo
アイデア満載！レスポンシブ対応のナビゲーションを実装するチュートリアルのまとめ
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
現在閲覧しているページへのリンクをハイライトできるjQueryプラグイン「currentPage」:phpspot開発日誌
これは必見のCSS3のBox Shadow等を使って描画されたオブジェクト描画例い... 次の記事 ≫：フレッシュなWordPressテーマ１００ MagicEdit - currentPage: A jQuery plugin to add "current" to nav links 現在閲覧しているページへのリンクをハイライトできるjQueryプラグイン「currentPage」。 一般的なナビゲーションの場合、現在いるページにハイライトをすることで、どこにいるか、分かりやすく表示することが多いですね。 これをサーバサイドでやると分岐が増えてソースが見にくくなってしまう。 例えばphpなら次のような処理がリンクごとに発生して超めんどくさい。 <?php if ($_SERVER['REQUEST_URI'] == "aaa.php") { ?> <em>aaa</em> <?php
HTML5ホームページテンプレート無料配布 [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
Using jQuery and XML to Populate a Drop-Down Box – Think2Loud
Next you’ll need a simple XML file to load. Here is the one that I used : dropdown.xml option a option b option 1 option 2 option 1a option 2b Now that you’ve created your XML, add a form with a select box to the HTML page. I simply replaced everything within the body tag from our index.html from the previous article. Once the XML is ready, jump back into the index.html file. You’ll need to update
スクロールしてもついてくるサイドメニューをjQueryとCSSで作るチュートリアル
jQueryを使って短いコードで実装できる、スクロールしてもサイドにアニメーションをつけて固定するサイドメニューのチュートリアルが公開されていましたので、参考にサンプルを作ってみました。 作り方 細かいコードはチュートリアルページにありますのでご参照下さい。 ついてくるようにしたいサイドのdivに対してposition:absoluteで配置します。ヘッド内でjQueryを読み込みます。続けて下記のコードを記入します。 ＊＊＊追記＊＊＊ 11行目の変数offsetの中身を、menuYloc+$(document).scrollTop()+”px” にしていましたがブラウザにより座標を取得できない可能性があった為、 menuYloc+$(window).scrollTop()+”px” に変更しました。 <script type="text/javascript" src="jquery.j
JavaScriptライブラリjQueryで簡単サブメニュー「Horizontal Subnav with CSS」
twitter facebook hatena google pocket マウスがメニューに乗った時にそのカテゴリのサブメニューを表示させるテクニックがあります。 JavaScriptライブラリのjQueryを使用すると簡単に実現可能です。 via：Horizontal Sub-nav with CSS & jQuery - Subnavigation Tutorial - CSS Tutorial - jQuery Tutorial sponsors 使用方法 まず以下のようなメニュー部分を記述します。 <ul id="topnav"> <li><a href="#">Home</a></li> <li> <a href="#">About</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a hr
Slide Subnavigation Menu
Changelog Version 1.1 Fixed error in ie7 Added animation speed as a setting Added hide on mouseover as a setting, this requires an outer container to be added. Download Page Example code to load the plugin and settings $(function(){ $.slidenav({ animspeed: 'medium', //Any of the stanard jQuery animation speed variables, 'medium' by default hideonout: 'true' //Either true or false, 'true' by defaul
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://diglog.org/javascript/1172.html
その記憶が頭から離れません。 - 質問・相談ならMSN相談箱