Home > TagScript > html、css、Java

ベクトルドロー・レベルゼロ

グローバルメニュー

グローバルメニューの実装例へのリンク

メニュー素材として、どのように、htmlとcssを使用するかが説明しているサイトへのリンクです。

まとめサイト

まず、まとめサイトへのリンクを集めます。

CSSだけで作る動きのあるドロップダウンメニュー(外部サイト)

グローバルメニューのデザインに使えるCSSテクニックまとめ(外部サイト)

気になったものをピックアップ

まとめサイトの中から、理解しやすいもの、気に入ったデザインのものをピックアップします。 そして、実験用のページに、実際に、実装し、実装方法を覚えていきます。そして、自分の好みに変更し、自分のサイトに取り入れます。

リストタグで横並びのメニューを作る(外部サイト)

レスポンシブデザインに対応していない、サイズ固定の最もシンプルなメニューです。

メニューリンクの自動生成

自動生成メニューの作り方(JavaScript使用)(外部サイト)

メニューの各項目のデータ(題名、リンク先パス、メニューに使う画像など) を設定しておくだけで、 全ページで共通に利用できる折りたたみ可能な便利なメニューを自動生成する

開閉可能パネル/リスト・ビュー/ナビゲーション・バーを使いこなそう(外部サイト)

モバイル向けのサイト向けのJQueryの作成記事です。

ドロップダウンリストメニュー

CSSだけで作る動きのあるドロップダウンメニュー(外部サイト)

  

よくあるスタイルのドロップダウンメニューです。よくあるのは、使いやすいからです。

[JS]スピード調節可能な開閉式ナビゲーション -Slashdot Menu(外部サイト)

階層を持つ、開閉式のサイド・メニューです。

ナビゲーションの開閉ができるドロップダウンリスト

モバイル端末では、ボタン式のナビゲーションでは、表示領域を圧迫するので、ボタンでメニューを開閉するスタイルのメニューが使われることがあります。

クリックで開閉するスライド・ナビゲーション「bigSlide」(外部サイト)

クリックすると左側にメニューが開きます。

[jQuery]レスポンシブに対応したナビゲーションを作ってみました。(外部サイト)

PC表示では、通常のドロップダウンリスト、ブラウザのウィンドウを小さくすると、メニューが開閉式になります。 この紹介したサイトのメニューに使用されているものだと思います。

TinyNav.js(原文リンク)

軽量で簡単にナビゲーションを切り替えて表示できるjQueryのプラグインです。最小時は、リストボックスになります。

このエントリーをはてなブックマークに追加

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011-2015 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」