jQueryを使わずにスライドメニューを実装しよう | Webクリエイターボックス

2020/04/06 22 users jQuery モバイルサイズ Webクリエイターボックス

2020年4月6日 CSS, JavaScript スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 このようにボタンをクリックすると横からひゅ... 続きを読む

CSSで組んだドロップダウンメニューとスライドメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

2016/02/14 349 users CSS コピペ Yukihy Life メニュー 作り方

以前、メニューバーをトグルメニューと両立してレスポンシブスタイルにするカスタムを書きました。 www.yukihy.com トグルメニューは、ボタンを押すと上下にスライドするようなものでしたが、　現在このブログでやっているみたいに、横からのスライドにして、なおかつPC版では子メニューも設定できるようにしてみたいと思います！ カスタマイズを行う際は、必ず以前のコードをメモ帳などにバックアップをとって... 続きを読む

ブラウザの幅全体をメイングラフィックにするスライドショーを作成する【jQuery連載11】 | HTML5でサイトをつくろう

2015/05/08 43 users スライダー 両側 メイングラフィック 前後 前回

前回は、クリックで開閉するスライドメニューを作成しましたが、今回はメイングラフィックスペースをグラフィカルにするスライダーを作成します。 ページ上部のメイングラフィックスペースに複数の情報を表示させるようにするスライドショーを作成する。今回は、メインの画像が中央に、その両側には前後のグラフィック画像に黒い半透明の画像が被さった状態で表示されるスライダーを作成します。 前後の画像が両側に表示されるた... 続きを読む

JavaScript - jQueryでスライドメニュー（横から出てくるやつ）を実装する - Qiita

2015/04/04 39 users jQuery Qiita github.com https

スライドメニューを実装できるjQueryプラグインを書いたので、使い方をメモします。 ダウンロード https://github.com/kami30k/jquery.sidemenu.js https://github.com/kami30k/jquery.sidemenu.js/archive/master.zip デモ 使い方 まず、必要なファイルをインクルードします： <link rel=... 続きを読む

スマートフォン版はてなブックマークに「スライドメニュー」を追加しました - はてなブックマーク開発ブログ

2014/10/16 43 users ブックマーク はてなブックマーク開発ブログ 導線 touch

本日、スマートフォン版はてなブックマークに「スライドメニュー」を追加しました。スマートフォン版はてなブックマークは、以下のURLからご利用いただけます。http://b.hatena.ne.jp/touch 各機能への導線の整備 スライドメニューでは、はてなブックマークの各機能への導線を整理し、目的のページに素早くたどり着けるようにしました。また、人気エントリーやマイホットエントリーを表示するだけ... 続きを読む

ヌルヌルの秘訣はCSS！Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』｜ウェビメモ

2013/08/27 194 users キータ ウェビメモ Qiita PageSlide 秘訣

以前『スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました 』という記事を書きましたが、今回は『Qiita [キータ] – プログラマの技術情報共有サービス 』にてGoogleでも採用されているCSS3のアニメーションを使ったスライドメニューというものを発見したのでご紹介します。 jQueryプラグイン『jSlideMenu』 な... 続きを読む

Googleから学ぶ ヌルヌルサクサクなスライドメニュー #JavaScript #CSS - Qiita [キータ]

2013/06/07 647 users ネイティブアプリ並 アニメーション 実装 キータ ブラウザ

スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装... 続きを読む

position: fixed;でサイドに固定してjQueryでスライドして現れるメニュー｜Webpark

2011/04/12 67 users fixed jQuery Webpark position

では、設置方法を説明してみます。 固定されたスライドメニューの作成 まず、head内でjQueryを読み込みます。もちろんjQueryは自分のサーバーにアップしてもかまいません。 ... 続きを読む