これ メガ ドロップダウン メニューは 私が 愛用する のだ.

チュートリアルだから コストマイジングすることは まどろみ 気難しいが 言葉だ.

今日も 直す 仕事が まどろみ 生じたが 頭が まどろみ 痛くて そのまま チュートリアルを 翻訳することに 決心した. その間は そのまま 行った 使ってばかり したが 今度には たいてい 番(回) まともに 勉強して ボール 強いことで 言葉だ.

それでは これから 翻訳 手始めだ. これ 文を 見れば これ 人の メガ ドロップ ダウン メニューも コストマイジングすること 易しい ことだ.

Mega Drop Down Menus w/ CSS & jQuery

4wheelparts.com を 再デザインする 過程で, 私は 多い リストと カテゴリーを 寝る 扱う 数 ある 新しい 方法を 探求して 見ることに 決心した. 私は 何 枝 研究を したし, eコマース サイトで “メガ ドロップ ダウン メニュー”と 呼ぶ 新しい トレンドに 注目した.

使用性 専門家である ゼイコブ ニルスンの 言葉を 入って 見れば, メガ ドロップ ダウン メニューは テスト 結果, スケールが 大きい ウェブサイトで 效果的だったと する. 私は 違う 方法で これ テクニックを 具現する 実験を 日 見ることに した. そして 私が これ 方法を どうに ギルォッヌンジ 共有するように する.

一般的な ドロップ ダウン メニューが 使用性 問題で 一杯な のを 勘案する 時, 新しい 形態の ドロップダウン メニューを お勧めする のは まどろみ ためらわれる.(it takes a lot for me to recommend a new form of drop-down.) するが 私たち テスト ビデオを 見れば メガ ドロップ ダウン メニューが 下で 開かれる 一般的な ドロップダウン メニューより ましだ. したがって, 私は 違う ものなどに 大海 警告を しながら 一つを お勧めする 数 ある. – Jakob Nielson – Alert Box

彼の 文で, ドロップ ダウン メニューは マウスが 上がった 時(hover)わ 下がった 時(out) メニューが 開かれる 時間に 少少の ディレーが あると するという のを 読んだ 時, 私は これ 仕事に Hover Intent Jquery pluginを 使うと 心に決めた.

デモ 表示[これ 人 ブログが 全部で 消えた]

ステップ 1. 基礎工事 – HTML

その間 私が たいてい あらゆる ナビゲーション チュートリアルのように, 手始めは 手順ない リスト(ul)を 作る のだ. 私が CSS Spriteを 使う ことの だから, あらゆる リストには 自分ばかりの クラス人が 付いて あると する. [訳者 株: 一つの 大きい イメージに あらゆる イメージを 殴って 打ちこんで, cssで バックグラウンド 位置を 調整して イメージを 表示する ことだ. イメージを 一つだけ ダウンすれば なること だから http 要請を 減らして 竝び 数 ある.]

<ul id="topnav">
    <li><a href="#" class="home">Home</a></li>
    <li><a href="#" class="products">Products</a></li>
    <li><a href="#" class="sale">Sale</a></li>
    <li><a href="#" class="community">Community</a></li>
    <li><a href="#" class="store">Store Locator</a></li>
</ul>

ステップ 2. 基礎 スタイル 雑記 – CSS

私たち ドロップ ダウン メニューが absolute positioningを 使う ことの だから, リスト アイテムには relative positioningこれ 付けられて あると する. テキストは text-indent 値段を -9999px 路 与えて だ 中 見える 所で 送って 捨てるように する. 私たちは ナビゲーション リンクを 皆 イメージで 取り替える のだ. リンク別で それぞれ イメージを 与えて 言葉だ.

ul#topnav {
	margin: 0; padding: 0;
	float:left;
	width: 100%;
	list-style: none;
	font-size: 1.1em;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	position: relative; /*--重要だ--*/
}
ul#topnav li a {
	float: left;
	text-indent: -9999px; /*--テキストを ページ 外で 送って なくす--*/
	height: 44px;
}
ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; } /*--Hover 状態--*/
ul#topnav a.home {
	background: url(nav_home.png) no-repeat;
	width: 78px;
}
ul#topnav a.products {
	background: url(nav_products.png) no-repeat;
	width: 117px;
}
ul#topnav a.sale {
	background: url(nav_sale.png) no-repeat;
	width: 124px;
}
ul#topnav a.community {
	background: url(nav_community.png) no-repeat;
	width: 124px;
}
ul#topnav a.store {
	background: url(nav_store.png) no-repeat;
	width: 141px;
}

ステップ 3. メガ サーブ ナビゲーション HTMLを 作る

メイン ナビゲーション リンクの ところで 後に “sub” クラスを [持った 要素を] 追加する. そして 彼 中に 手順ない リスト(ul)を つまんで 入れる. それぞれの 手順ない リスト(ul)銀 メガ ドロップ ダウンの ネビ コラムで 作動する のだ.

<ul id="topnav"> <li><a href="#" class="home">Home</a></li>
    <li>
    	<a href="#" class="products">Products</a>
        <strong><div class="sub"></strong>
            <ul>
                <li><h2><a href="#">Desktop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Laptop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
        <strong></div></strong>
    </li>
    <li><a href="#" class="sale">Sale</a></li> <li><a href="#" class="community">Community</a></li> <li><a href="#" class="store">Store Locator</a></li> </ul>

ステップ 4. メガ サーブ ナビゲーション スタイリング – CSS

サーブ メニューを 上位 メニューの 左側 下端に 正確に 位置させること ため, .sub コンテナに absolute 位置を セッティングして 与えると する. top銀 44px路 して, left増えた 0で 与える. スタイルを のために, ブラウザーが 支援する 場合には 丸い 角が なるように する.(ファイアフォックス, クロム, サファリ)

リスト 中に リストが ある 場合 衝突する CSS 要素を 被って 竝び 必要が あるという 点を 憶えなさい. 下の コードの 柱石を 参考しなさい.

ul#topnav li .sub {
	position: absolute; /*--重要だ--*/
	top: 44px; left: 0;
	z-index: 99999;
	background: #344c00 url(sub_bg.png) repeat-x; /*--Background グラデ−オント--*/
	padding: 20px 20px 20px;
	float: left;
	/*--右側 下端 丸い 角--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	display: none; /*--js街 消えて ある 焚く 隠す.--*/
}
ul#topnav li .row { /*--竝びを 変えると する 場合--*/
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 10px;
}
ul#topnav li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: 150px;
	float: left;
}
ul#topnav .sub ul li {
	width: 100%; /*--親 li 速成を 覆って 使う--*/
	color: #fff;
}
ul#topnav .sub ul li h2 { /*--サーブ ナビゲーションの h2--*/
	padding: 0;  margin: 0;

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。