jQuery 超簡単且つ軽量にプルダウン型メニューを実現する方法 | Stronghold Archive
どうもこんにちは。今回のtipsは…【超簡単且つ軽量にプルダウン型メニューを実現する方法】です。 コード jqueryで8行と、とても軽い仕様になっていますのでよろしければご活用ください。 $(function(){ $(‘.nav’).hover(function(){ var nav = $(this).find(‘li’).length; $(this).not(‘:animated’).animate({‘height’:24 * nav + ‘px’},’fast’); },function(){ $(this).animate({‘height’:’24px’},’fast’); }); }); HTML <div id="menu"> <ul id="menuBody"> <li> <ul class="nav"> <li class="head">MANU1</li> <l
使いやすくなった！UI素材とテクニック集／CSS jQuery版
作成：2013/12/9 更新：2014/11/01 無料素材 > アプリを作るとき、クライアントさんのナビサイト、サービスを作るときにユーザーの満足度を上げれないか、使いやすく見やすく、コンバージョンを上げれないかと調べていたら、役に立ちそうなものが沢山ありました。今回はボタンやフォーム、ナビゲーションなどウェブサイトなどを使っていて楽しいと感じてもらうための素材やサンプルをcss/jQuery中心にまとめます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．円形 ２．タブ ３．ナビゲーション ４．アコーディオン ウィンドウ ５．モーダルウィンドウ ６．フローティングウィンドウ ７．Dialog(ダイアログ) ８．フォーム＋バリデーション ボタン ９．Toggle (トグルボタン) １０．Switch (スイッチボタン) １１．Scrubbe
jQueryでアコーディオンパネルを簡単に自作する方法
javascriptとjQueryの基本的な使い方についてまとめてきたので、実際に実用的なものを作ってみます。 まずはWebでもよく使うアコーディオンパネル。ECサイトのカテゴリーリストの開閉なんかでも使われることが多いです。ただ、プラグインを導入するほどでもないようなちょっとしたことが多いのでさくっと自作してみることにします。 jQuery自作するシンプルなアコーディオンパネル ここでは以下のような要件を満たす機能を実装します。 要素をクリックするとリストを表示 表示中の要素をクリックすると閉じる 表示中は−ボタン、閉じてるときは＋ボタンを表示 今回ボタンにはFontAwesomeを使用します。HTMLの方はあまり深く考えず構造だけ作っていけばOK。リストは通常時に閉じてるのでcssでdisplay: noneを指定しておきます。 HTML <!DOCTYPE html> <html l
クリックやタップで開閉するアコーディオンメニューを設置する方法 | TechMemo
jQueryを使って、アコーディオンメニューを設置する方法を紹介いたします。 アコーディオンメニューというのは、クリックやタップ(スマートフォン)でアコーディオンのように開閉するメニューのことです。 これだけ聞いてもわかりにくいと思うので、簡単なデモページを用意しました。こちらで動きをチェックしてみていただければと思います。 デモページを見る このデモページに設置したアコーディオンメニューをもとに解説していきます。 ステップ1. メニューリストのマークアップ まずは、HTMLで入れ子のリストを作成します。 <ul class="acordion"> <li><span class="trigger none-submenu">メニュー1</span> <ul class="submenu"> <li><a href="">サブメニュー1</a></li> <li><a href="">サブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
