*

PC LIFE

ホーム >  Web制作 > 
変化を付ける小技 MENU 

サイトに動きや変化を付けて、見易く又快適な表示などの小技

「HTML5とCSS3の組合せ」とQueryを中心にしたページ。
尚、JavaScriptについては、各種のケースを記述したページ

  • MENU
  • 説明
  • WordPressとJquery
  • WordPressの元でjQueryを利用する際の注意事項など
  • ボックスの背景色変更
  • マウスを重ねると背景色が変わり、マウスが外れると元に戻る
  • サイドメニュー固定
  • 下にスクロールするとサイドメニューが上に消えていく現象を回避する対策
  • ドロップダウンメニュー
  • メインメニューにマウスを重ねると第2階層のメニューを表示、マウスが離れると消える
  • ページ先頭へスクロールのリンク
  • WIndows画面にページ先頭に戻るボタンを設置し、クリックでスクロールしながら、ページ先頭にリンクする設定。スクロールにjQueryを使用。
  • 画像に重ねて現在日時を表示
  • ヘッダー画像の右に表示されている現在の日付と時刻を表示する。日時表示は、JavaScriptを使用
  • 画像に文字列や別画像を重ねる
  • 背景画像の中に文字列(テキスト)と画像を重ねて表示。ポイントは別画像のCSS設定。
  • 簡単なアニメーション Transition
  • CSS3で簡単に利用出来るアニメーション transition の紹介
  • CSSでドロップダウンメニュー
  • CSSだけで縦型のドロップダウンメニューを作るこのサイトでの事例紹介。表示のコントロールは、数行で出来るのでとても簡単。
  • 上部ヘッダーやメニューを固定
  • 下にスクロールすると、上部のヘッダーやメニューが画面から消えてしまう状況を回避する方策です。特にメニューが上部に残って表示されていると、サイト閲覧の操作感が向上します。