美しいオーバーレイメニューを実装できる「Responsive overlay menu」 – bl6.jp
Responsive overlay menuはレスポンシブに対応した美しいオーバーレイメニューを実装することができるフレームワークです。画面全体にオーバーレイがかかり、その中に好きなメニューを作成することができます。 以下はResponsive overlay menuのフル版のデモになります。 デモ 右上にあるハンバーガーメニューをクリックすると、フェードで画面全体にオーバーレイがかかりメニューが表示されます。 余白をたっぷり取ってあるので、スッキリして見やすいデザインですね。レスポンシブなのでスマホからでも見やすいです。 ベースとなるマークアップはこんな感じです。 <div class="menu-btn"> <a class="btn-open" href="javascript:void(0)"></a> </div> <div class="overlay"> <!-- ここに
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
レスポンシブメニューを実装出来るjQueryプラグイン「MeanMenu」をワードプレスに導入・カスタマイズした話 | OBOLOG
このたび、スマホ環境でヘッダーにメニューを表示させるため「MeanMenu」というjQueryプラグインを導入しました。参考になるかは分かりませんが、カスタマイズして実装するまでを書いてみたいと思います！ バージョンはワードプレス本体4.7、MeanMenu2.0.8で動作確認できておりますが、当ブログにおいては既に使用をやめ、また当ブログでは動かなくなってしまったのでデモページの公開も取りやめております。 →動いているのが確認できた（バージョンはワードプレス本体4.8.0、MeanMenu2.0.8）ため再度デモページへのリンクを張っておきます（2017年8月5日） 元々レスポンシブメニューはあったけど…… 当ブログで使用中のワードプレステーマには「画面幅○○px以下専用メニュー」がはじめから用意されていました。（画面幅によってメニューA・Bの表示/非表示がdisplayの値によって切り
[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js
ダウンロードファイルのデモ Slideout.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="index.css"> </head> <body> ... <script src="slideout.min.js"></script> </body> Step 2: HTML ナビゲーション（#menu）とコンテンツ（#panel）を実装します。 idは変更可能です。 <nav id="menu"> ナビゲーション </nav> <main id="panel"> コンテンツ </main> Step 3: JavaScript オプションを定義し、スクリプトを実行します。 <script> var slideout = new Slideout({ '
![[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b5913f9bdd8179129a0b710a9473540ea14fc5c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030902.gif)
Simple Effects for Drop-Down Lists | Codrops
A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects. Today we want to share some simple drop-down list effects with you. The idea is to transform a normal select input into something more appealing with a jQuery plugin. The expanding of the options will happen with a transition and parameters can be configured in a way to achieve unique effects. A
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
