VERTICAL NAVIGATION MENU II

メニュー右に「＋」を追加して、メニュー展開時にこれが「−」に変わり、メニュー収納時にまた「＋」になるような縦型ナビ。『WEB制作の現場で使う JQUERYデザイン入門』p.244〜p.245の「サンプル1」を参考に、＠ITの記事『JQUERYのアコーディオン効果の使い方・作り方（2/3）』のコラム「jQueryのslideDown / slideUp / fadeIn / fadeOutメソッドの正体」を踏まえたもの。
解説は、拙ブログ「上下に展開・格納する縦型メニューJQUERYの簡略化に成功」にて。

←DEMOは左のメニュー自体がそれ

KERNING: PUNCTUATIONS & PARENTHESES

  • HTML, CSS & jQuery Coding
  • Reference & Special Thanks: fladdict
  • May, 2013

句読点・括弧類の連続する場合の詰め処理をしたく、ペアカーニングを任意に設定できてしかも2つの括弧類連続を設定するだけで括弧類が3つ以上連続してもちゃんと詰めてくれるfladdictさんのFLAutoKerning.jsというスクリプトを丸々活用（深謝！）。句読点および括弧類は独自に配列にて組合せを自動生成させた。デモでは、文字詰めと詰め解除が切替可能なボタンも設置。
解説は、拙ブログ「HTMLで文字詰め出来るJAVASCRIPTとJQUERY」にて。

DEMO PAGE

HEADING MARGINS

見出しのマージン設定の仕方について、『文字の組方ルールブック ヨコ組編』の「見出しの構造と組方」を眺めていて、自動計算出来るかもと思いjQueryメインに適宜JavaScriptを組み込みスクリプトなるものを書いてみた。デモでは、見出しの上下マージン比を1:1と8:5に切替可能なボタンも設置。
解説は、拙ブログ「JAVASCRIPTとJQUERYで文字サイズ・行高・行取り・見出し行数から見出しのマージンを自動計算」にて。

DEMO PAGE

VERTICAL NAVIGATION MENU I

  • Design, HTML, CSS & jQuery Coding
  • Reference & Special Thanks: WEBOPIXEL
  • April, 2013

メニューの1つをマウス・ホーバーするとそれ以外のボタンが薄くなる縦型ナビ。WEBOPIXELさんの「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」内の「8.マウスオーバー以外のボタンを薄くする。」のほぼ全てを参照しつつ（深謝！）、背景色変更を加味したものを作成。
解説は、拙ブログ「JQUERYでHOVERした以外の文字が薄くなる縦型ナビに背景色変更も加味」にて。

DEMO PAGE