5

それで、私はしばらくの間 CSS メニューを「収集」してきました (別の用語は「借用」、さらに別の用語は「露骨にぼったくり」です)、それらから学び、潜在的に自分自身のリートネスの一部を再利用してきました。プロジェクト。

古い学校の HTML 純粋主義者である私は、スタイル付き<ul>の と<ol>のアイデアが大好きです。より優れたメニューやタブ インターフェイスでは、アクセシビリティやセマンティックの健全性などの理由から、この方法を使用する傾向があります。私は主にこの方法が気に入っています。なぜなら、この方法は HTML ソースをきれいに保つためです。

ここで、CSS Zen Garden などの最も柔軟な例から推定した 1 つの「マスター」マークアップ パターンに合わせて、CSS メニューのコレクションを実際にリファクタリングしました。次のようになります。

<div class="menustyle">
<ul>
    <li class="current"><a href="#" title="Page 1"><span>Home</span></a></li>
    <li><a href="#" title="Page 2"><span>Toys</span></a></li>
    <li><a href="#" title="Page 3"><span>About Us</span></a></li>
    <li><a href="#" title="Page 4"><span>Contact</span></a></li>
</ul>
</div>

<span class="clearit" /><br />

(最後の 'clearit' スパンは、clear:bothそれを必要とするメニューの後に設定するために使用されます)

<div>とにかく、多くのサイトでこのマークアップcurrentのバリエーションを見てcurrentき<a>まし<li>た<span>. 誰もがメニュー マークアップを行う独自の方法を持っているようですが、それはほんの少しだけ異なります。

とにかく、多くのメニューをいじった後、上記が思いついたものですが、これには実際に確立されたベストプラクティスがあるかどうかを理解しようとしています. ある時点で単純な CSS メニュー ファウンドリーをセットアップしたいと考えています。さらに先に進む前に、マークアップに関する入力を取得するとよいでしょう。

編集: Javascript メニューに関する質問ではありません。スクリプト化された優れたメニューがあり、サブメニュー、より高度なアニメーションとホバー タイミング、ショートカット キー、ドロップ シャドウ、その他すべてを使用できることを知っています。しかし、メニューの 90% はこれらの機能を必要とせず、スタイリングとホバー効果に CSS を使用する方がはるかに優れています。

4

4 に答える 4

4

span タグを削除する以外は問題ないと思います。

セットアップでテキストのスタイルを設定できるため、それらを使用する理由はありません。

li a {/*styles*/}

また、削除できるはずです

<span class="clearit" /><br />

セクションも。div 内の ul だけをフロートさせようとしている場合は、div を廃棄することもできます。他の理由でクリアが必要な場合は、

<br clear="all"/>
于 2009-01-28T04:45:09.157 に答える
2

ULのクラスを使用できますclearfix（スパンをクリアする代わりに）：

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}

これで、メニューは次のようになります。

<div class="menustyle">
<ul class="clearfix">
.....

もちろん、これらのプロパティを UL に直接追加して、html コードの変更を避けることができます :)

于 2009-01-28T20:20:36.863 に答える
1

サブメニューに興味がある場合は、YUI ライブラリをチェックすることをお勧めします。マークアップからクロスブラウザ互換のサブメニューを提供します。

http://developer.yahoo.com/yui/examples/menu/index.html

于 2009-01-28T09:57:19.243 に答える
1

CSS メニューは 2005 年以降の面倒な作業です。すべてのクロスブラウザー互換性、IE J​​avaScript 修正ファイルなど。具体的には、あなたの質問に答えるために: IE7 は非リンクでの :hover をサポートしておらず、IE6 はまだサポートする必要があるため、3 年前と今日では違いはありません。

最近は、jQuery をダウンロードし、Superfishプラグインをインストールして、次のコードを含めるだけです。

$(function() {
  $("ul.menu").superfish();
});

そして完了。IE6 でも動作します (機能が少ない)。

于 2009-01-28T05:03:58.930 に答える