つくりてのざれごと

現在拙サイト・ブログ等で使用中の「上下に展開・格納する縦型メニューjQuery」はかなり煩雑で、今回整理して簡略化させることに成功。 縦型メニューのHTML <ul> <li> <span id="accordion01" class="accordion" >news</span> （ここに「+」または「−」が挿入される） <ul id="subNavi01" class="subNavi" > <li><a href="#">ESZETT</a></li> <li><a href="#">TYPŒ</a></li> <li><a href="#">LETTER-PRESS</a></li> </ul> </li> <li> <span id="accordion02" class="accordion" >works</span> （ここに「+」または「−」が挿入される） <ul id="subNavi02" class="subNavi" > <li><a href="#">web design</a></li> <li><a href="#">web demo</a></li> <li><a href="#">print</a></li> </ul> </li> <li> <span id="accordion03" ...

今回の 拙サイト 全面改修の際追加したメニュー横の＋−表示が切替るjQueryの詳説をば。 実際どのようなものかは、この拙ブログのサイドメニューも同じ仕様なのでご覧あれ。 メニュー右に「＋」を追加して、メニュー展開時にこれが「−」に変わり、メニュー収納時にまた「＋」になるようなメニュー展開・収納jQuery。この「＋」「−」はいわば飾りなのでHTML上には書きたくない、しかしjQueryの特性上、CSSの疑似要素〔:after〕をセレクターとして呼べないこともあって、「＋」「−」の切替え方に難儀。当初、〔toggle(fn1, fn2, ..., fnN)〕を使用しようと考えたがjQuery 1.9からこれが廃止されたことを知り愕然。（詳細は jQuery Core 1.9 Upgrade Guide | jQuery を参照） 他に手はないかと色々調べた結果、jQueryの〔 after() 〕と〔 replaceWith() 〕が使えそうと判断。〔after()〕は指定したセレクターの後ろにHTML文字列などを挿入するもの、〔replaceWith()〕は指定したセレクターのHTML文字列などを置換するもの。この2つを組み合わせて「＋」「−」の切替えを可能にした。 以下に使用例を。 HTML <ul> <li><span id="accordion02" >works</span> <ul id="subNavi02" > <li><a href="#">web design</a></li> <li><a href="#">web demo</a></li> <li><a href="#">print</a></li> <li><a href="#">letter carving</a></li> </ul> </li> ...

ちょっと思うところあって7回目の 拙サイト 全面改修を挙行。 今回は見映えなどの大幅変更というよりも細かい箇所の改装が主目的だったが、構造見直しのためHTMLは全取っ替え。以下に今回の改修点を列挙。 横幅を960pxから1200pxへ ヘッダおよびサイドメニューの固定化 不要になったページの削除 「上に戻る」ボタンの削除 メニュー展開時のアイコンのアニメ追加 文字詰めjQueryの追加 横幅変更 横幅は現状1200pxでも大丈夫と（勝手に）判断し変更。そのついでに今まで左寄せにしていたレイアウトを左右中心揃えに。そのTIPSはネット上に沢山転がっているので割愛。 サイドメニュー固定 ウェブ、ショウジン さんの記事「 サイドメニューとフッターメニューをCSSのposition:fixedで固定する例 ＊一応「IE6」もいける。 」を参考にした。深謝！ サイドメニューに該当するCSS #side { width: 100%; float:left; position: fixed; overflow: auto; background-image: url("../images/common/eszett_logo01.jpg"); background-repeat: no-repeat; background-position: 3.6rem top; } #sideWrapper {width: 180px;} 上記赤字の「position: fixed;」を追加することでサイドメニューは固定される。 そして、今回の密かな目玉である「eſzett」ロゴを背景に追加しこれもサイドメニューと共に固定させるために、上記青字を追加。幅100％はサイト全体の横幅に対する設定で、これにより背景ロゴはサイドメニューに設定しているにも関わらず中途で切れずに（サイドメニュー自体は#sideWrapperにて幅180pxに設定）表示される。 コンテンツ部分のCSS #main { width: 900px; float: right; overflow: auto; position: relative; margin-bottom: 6rem; } コンテンツ部分のCSSにて、赤字の「float: r...

最近制作した案件にて採用したHOVER以外のボタンが薄くなる縦型ナビについて解説をば。 今回参考にさせていただいたのは、 webOpixel さんの記事「 jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種 」内の「 8.マウスオーバー以外のボタンを薄くする。 」であります。深謝。 メインナビのみの縦型ナビ HTML <ul id=" mainNavi "> <li><a href="#">works</a></li> <li><a href="#">projects</a></li> <li><a href="#">bibliography</a></li> <li><a href="#">contact</a></li> <li><a href="#">about</a></li> </ul> ※URLは見やすさのために#に置き換えて省略。 CSS #mainNavi { width: 192px; ・・・・1：必須 text-transform: uppercase; ・・・・2：任意 border-bottom: dotted 1px #BAC3C9; ・・・・3：任意 } #mainNavi li {border-top: dotted 1px #BAC3C9;} ・・・・4：任意 #mainNavi li a { display: block; ・・・・5：必須 padding: 0.8em 0.5em 0.5em; ・・・・6：必須 } CSS指定の留意点： width指定をしないとwidth: 100%;に同じとなり可能な限りの幅になる。 今回のナビではラテン文字全てを大文字に指定したので。 今回は...

拙サイトの新デザインでナビをサイドに配置したので、jQueryで、ナビをスクロールさせず固定してしまおうと思い立つ。参考にさせてもらったのは次のエントリ。 スクロールについてくる要素とその可動範囲の指定。あれ？この場合ついていかない要素ってことになるのかな？ | Memorandum Book - written by Ravenala 深謝。参考エントリ内の説明通りに設定すれば万事動きます。 で、拙サイトはHOMEボタンをeszettロゴのみに設定しているので、スクロールするとHOMEボタンだけ無くなることになる。そこで、スクロールダウンしてヘッダのeszettロゴが見えなくなった時点で新たにeszettロゴを出現、またスクロールアップしてヘッダのeszettロゴが見える直前に新たなeszettロゴを隠すというギミックを追加。 $(function(){ var memuPosi = $("固定するナビのクラス名またはID名").offset(); var menuTopMargin = 24; var targetScrollValue = memuPosi.top - menuTopMargin; $("eszettロゴのID名").hide(); //新たに出現させるロゴの初期状態（隠した状態） $(window).scroll(function() { var wScrollvalue = $(window).scrollTop(); if(wScrollvalue > targetScrollValue){ $("固定するナビのクラス名またはID名").css({ position: "fixed", top: menuTopMargin }); $("eszettロゴのID名").fadeIn(800); //フェードイン800ミリ秒でロゴを出現 } else{ $("固定するナビのクラス名またはID名").css({ position: "absolute", top: "0" }...