フルスクリーン表示するjQueryのレスポンシブメニュー｜Gimmick log
公開日：2017.12.25 更新日：2020.05.13 jQuery, ナビゲーション ウィンドウ幅が一定の幅になるとハンバーガーメニューになり、クリックするとフルスクリーンで表示するレスポンシブなメニューを作成しました。 ハンバーガーメニューのエフェクトはNx World様のコードをお借りしています。 サンプル See the Pen レスポンシブでフルスクリーン表示するメニュー; by ponzu (@ponzu😉 on CodePen. ↓別ウィンドウで見たい方はこちら デモページ html htmlでは、スマホ表示になった時用のハンバーガーメニュー .nav-buttonと、PC表示、スマホ表示共通のナビゲーション用のコード .nav-wrap を記述します。 <div class="header"> <div class="logo">SITE NAME</div> <a
iziModalでjQueryのモーダルウィンドウを実装する｜Gimmick log
TOPjQuery iziModalでjQueryのモーダルウィンドウを実装する iziModalでjQueryのモーダルウィンドウを実装する 公開日：2016.09.02 更新日：2020.05.20 jQuery, モーダルウィンドウ 簡単な設定でリッチなアニメーションやカスタマイズが可能なモーダルウィンドウのjQueryプラグインiziModalをご紹介します。 ライセンスはApache License 2.0です。 サンプル ファイルの準備 必要なファイルを読み込む 配布元のサイトからjsとcssデータをダウンロードして、html内で読み込みます。 必要なファイルはダウンロードデータの以下に格納されています。（2016年9月現在） iziModal-master ├ css │└ iziModal.min.css └ js └ iziModal.min.js <link rel="
jQuery slimMenu - A lightweight responsive and multi-level navigation menu plugin.
slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly. With slimMenu, you'll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus. slimMenu does both job for you and it's only 5KB(2.5KB minified)! Features: Multi-level nested menus. 100% mobile responsive men
notifyME
notifyMe, is a simple js plugin for notifications in pages.What's notifyMe? notifyMe is a simple plugin that i created for fun and learning for fixed notifications in pages. He works when a button is clicked, errors, validations, info and everything you want. How to use Call the stylesheet with the styles <link rel="assets/css/notifyme.css" type="text/css" /> For use this plugin is necessary add
クリップボードにコピーの実装は難しい？「zClip」が一発解決 - Noise of Web Programming
ブラウザからクリップボードに文字列をコピーする機能を実装したく調べた結果、便利なJSライブラリがあったので書いておく。 zClip 最初はブラウザからクリップボードにコピーする機能はJSで簡単に実装できるもんだと思っていたが、実はそうではなかった。そのような機能を提供しているのはIEだけであり、他のブラウザではJSのみではコピーすることが出来ないようだ（Chromeでクリップボードにコピーする実装方法という記事をいくつか読んだが、提供しているデモがそもそも動いていなかった...僕の環境のせいかもしれないが）。 そんな意外に難しいクリップボードコピーを簡単に実現してくれるのが「zClip」である。 Flashを使うことでコピー機能を実現しているようだ。このライブラリのみでIE、Firefox、Chromeなどクロスブラウザ対応している。すばらしい。 zClip.jsの使い方 使い方は色々ある
[JS]サイドバーを左右からスライドさせるごくシンプルなスクリプト -Simple Sidebar
サイドバーを左右どちらからでもアニメーションでスライドさせるシンプルなjQueryのプラグインを紹介します。 デモ：Material Design Simple Sidebarの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jquery.simplesidebar.js"></script> </head> Step 2: HTML サイドバーにはid/classを付与し、コンテンツ内にボタンを設置します。 //position-relative if this wrapper has no positi
![[JS]サイドバーを左右からスライドさせるごくシンプルなスクリプト -Simple Sidebar](https://cdn-ak-scissors.b.st-hatena.com/image/square/c459cc2f4db5b1da3c75aa960dd4238b0628cb55/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014081901-01.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
