2

現在、流動的なレイアウトでサイトを構築しています。ウィンドウのサイズが変更されたり、さまざまな幅でロードされたりすると、それ自体を調整できる標準的な水平ナビゲーションが実際に付属している主流の流動的なテンプレートはありません.

私は、オンライン チュートリアルや、同様の問題に取り組もうとする他の Stack Overflow ソリューションを調べてきましたが、非常に巧妙で非常に近いものもありますが、ブロックのようなホバー効果を処理できるものはありませんa {display:block; padding:10px 40px;} a:hover {background:#ccc;}。他の人は、ウィンドウの幅に合わせて調整される同じ幅のブロックリンクを作成する巧妙な方法を使用します。ただし、これは十分に正確ではなく、リンク ブロック間で同じ幅を作成するつもりはありませんが、リンク間で左右のパディングを同じにするつもりです。リンク間の距離が同じであるため、これははるかに正確です。

CSSでこれを行うことをあきらめました。おそらく、他の誰かが可変パディングを処理するためのソリューション、またはそれに非常に近いものを持っています。いずれにせよ、jQuery で作業を試みることにしました。

私は実際に jQuery を書いたことはありませんが、何年もの間、いくつかのプラグインを使用してきました。投稿する前に、少なくとも何か考えてみるべきだと思いました。ユーザーがページの読み込み時だけでなく、ウィンドウのサイズを変更した場合に、その場で調整する機能を追加することは可能でしょうか。また、私が行った方法に何か問題があるかどうかも疑問に思っています。

ここに私がたどり着いた場所へのリンクがあります: http://jsfiddle.net/XZxMc/3/

HTML:

<div class="container">
    <div class="row">                        
        <div class="twelvecol">
            <ul>
                <li><a href="#">short</a></li>
                <li><a href="#">longer</a></li>
                <li><a href="#">even-longer</a></li>
                <li><a href="#">really-really-long</a></li>
                <li><a href="#">tiny</a></li>  
            </ul>               
        </div>
    </div>
</div>

CSS:

.container {
    background:#ccc; 
    font-family:arial, helvetica;
}

.row {
    width: 100%;
    max-width: 700px; 
    min-width: 600px; 
    margin: 0 auto;
    overflow: hidden;
    background:white;
}

.row .twelvecol {
    width:100%; 
    float:left;
}

ul {
    text-align:center;
}

ul li {
    display:inline-block;     
    zoom:1; 
    *display: inline;
}

ul li a {
    padding:12px 39px;
    display:block;
}

a {text-decoration:none;}
a:hover {background:blue; color:white;}

JavaScript:

// Initial left/right padding of links set in css
var paddingIni = 39;
// Initial max-width of .row
var widthIni = 700; 
// Number of links multiplied by 2; 2 because we will be reducing the padding by multiples of 2px total, 1px left, 1px right
var linkQ = 5*2; 

// Current width of link container
var twelveWidth = $(".row .twelvecol").width(); 
// (Initial width / 10) - (Current width / 10); this gives us how much to subtract from our inital padding of 39
// Is there anything wrong with the way this is written?
var paddingSub = (widthIni/linkQ)-(twelveWidth/linkQ); 
// Simply subtracting above computation from our inital padding of 39
var paddingNew = paddingIni-paddingSub;

$("ul li a").css("padding-left",paddingNew);
$("ul li a").css("padding-right",paddingNew);

また、誰かがこれが機能しない理由を説明しても構わない場合は、1 つの方程式ですべてを実行しようとしています。

var whyisthiswrong = 39 - ( (700/(5*2)) / ($(".row .twelvecol").width()/(5*2)) );
4

2 に答える 2

1

参照： jsFiddle

追加/削除されたアイテムにコメントを付けてjsFiddleを編集し、流動的なナビゲーションメニューが正しく機能するようにしました。

特に、ナビゲーションバーのオンザフライ更新を処理するために、を使用white-space: nowrap;し.container、を削除min/max widthし.row、jQueryリスナーを使用しました。.resize();


改訂： ステータスの更新：    jsFiddleの新しいメソッド（チュートリアル）

私はあなたの目的に別の角度からアプローチしました。不要なもの（ボックス化されたブレッドクラム）を操作する代わりに、パディングの割り当てに正面から取り組みました（外側から）。

注： ブレッドクラムボタンが示されています。

私が使用したプロセスは次のとおり
です。1。すべてのブレッドクラムが1行に含まれるHTMLレイアウトを作成します。パディングなし、マージンなし、生のリンクのみ。
2.次に、残りのスペースをピクセル単位で測定します。これは、使用可能なパディングの合計になります。
3. HTMLナビゲーションマークアップで、使用されているパディングスパンの数を動的にカウントします。
4.使用可能なパディングの合計は、パディングスパンで除算されます。これが共有部分になります。
5.使用可能なパディング全体からの共有部分が設定されますオンpage load＆ウィンドウresizeイベント。

この方法は、コードを見ると簡単に理解でき、大騒ぎせずに簡単に変更したり、カスタム調整したりできます。拡張ノートが含まれています。Chrome、Firefox、IE8で問題なくテストされました。


jQueryの高度に最適化されたバージョン： 

function fluidNavBar(){
    $('.breadcrumbPadding').css('width',0);
    if($('.links').width() < $('body').width()){
        $('.breadcrumbPadding').css('width', $('.navPaddingTotal').width() / $('.breadcrumbPadding').size());
    }
}

// RUN ON PAGE LOAD
window.onload = function() {
    $('.navBar').css('min-width', $('.links').width());
    fluidNavBar();
};

// RUN ON WINDOW RESIZE
$(window).resize(function() {
    fluidNavBar();
});


更新されたjsFiddleには、比較のために下部に固定されている以前のナビゲーションバーが表示されます。

フレーバーを選択してください：
jQueryオリジナルチュートリアル
コメントなしの
jQueryjQueryコード高度に最適化され
たjQueryオリジナルチュートリアル+スタイル

jQueryこれは本当に必要なものですデモ
jQueryこれは本当に必要なものですデモ（サイズが大きく自動中心化されているため）

于 2012-07-17T04:50:56.147 に答える
1

HTML 部分では、水平方向のナビゲーションを 1 つだけにする予定がある場合は、id があることを確認します。また、これは必要ないと思います：

<div class='twelvecol'><ul>...</ul></div>

あなたは同じことをすることができます

<ul id='hmenu' class='twelvecol'>...</ul>

CSS に関しては、並べ替えられていないリストに表示ブロックまたはインライン ブロックがあることを確認するだけです (水平であり、したがってインラインであるため)。このようにして、私が正しければ、リスト項目の CSS ハックを取り除くこともできます。

この投稿によると、ウィンドウのサイズを変更するときにテキストのサイズを自動的に変更しますか (フォントサイズ)? jQuery 部分でウィンドウのサイズ変更をトリガーするには、次を使用します。

$(function() {
    // trigger once dom is ready
    resizeMe();
    // trigger on window resize
    $(window).bind('resize', function()
    {
        // your resize function
        resizeMe();
    }).trigger('resize');
});

var resizeMe = function(){
    // your stuff here
};

JSON パラメーター文字列を使用して一度に CSS を調整するか、パディングのみの場合に調整できます。

$("#hmenu li a").css("padding", "12px " + paddingNew + "px 12px " + paddingNew + "px");

また

$("#hmenu li a").css({"padding-left": paddingNew, "padding-right": paddingNew});

px 連結についてはわかりません。必要ないかもしれません。

jsfiddle を追加しました。「結果ウィンドウ」のサイズで遊んで、何が起こるかを確認できます: http://jsfiddle.net/tive/tKDjg/

于 2012-07-17T00:26:23.357 に答える