4

私はShopifyプロジェクトに取り組んでいます。私はデザイナーではありません。お店のフライアウトメニューを作る必要があります。問題は2つあります。まず、フライアウトをビューポートの下部まで拡張する必要があります。次に、Navigation Divですべてをバンドルしたいのですが、要素を親から切り離し、要素を移動せずに残りのコンテンツに「レイヤー化」する方法を理解する必要があります。

CSSでメニューを非表示にしてから、jQueryを使用してロールオーバー時にメニューを再表示すると思いました。私はそれがうまくいくとは思いません。フライアウトを配置する方法がわからないので、周りのすべてが無駄になることはありません。

これが今のサイトです： https ：//hodkiewicz-zieme-and-hirthe180.myshopify.com/

これがどのように見えるべきかです：http：//tinypic.com/r/35hnyox/6

現在nav列にあるものは次のとおりです。おそらく構造を変更します。

<div id="navbar" class="green">
    <ul id="navigation">
    {% for link in linklists.main-menu.links %}
        <li><a class="green" href="{{ link.url }}">{{ link.title }}</a></li>
    {% endfor %}
        <li><a class="green" href="#">{{ linklists.packard.title }}</a>
            <ul class="sub-menu">
                    <li><a class="green" href="#">-1930 Speedster</a></li>
                    <li><a class="green" href="#">-1929-31 Super 8</a></li>
                    <li><a class="green" href="#">-Late 1931-32 Super 8</a></li>
                    <li><a class="green" href="#">-1929-31 Standard 8</a></li>
                    <li><a class="green" href="#">-Late 1931-32 Standard 8</a></li>
                    <li><a class="green" href="#">-Rare Parts</a></li>
                    <li><a class="green" href="#">-745 Parts</a></li>
            </ul>
        </li>
        <li><a class="green" href="#">{{ linklists.cadillac.title }}</a>
            <ul class="sub-menu">
                <li><a class="green" href="#">-1932-33 V12 &amp; V16</a></li>
                <li><a class="green" href="#">-1934-37 V12 &amp; V16</a></li>
            </ul>
        </li>

        <li><a class="green" href="/cart">Cart</a></li>
        <li><a class="green" href="/checkout">Check Out</a></li>
    </ul><!--Navigation--><!--Navigation-->

    <ul class="sub-navs">
        <ul class-"sub-nav">
            <li>Carburetor</li>
            <li>Parts</li>
            <li>Manifolds</li>
            <li>Accessories</li>
            <li>Sculpture</li>
        </ul>
    </ul>

    <img id="#navbar-logo" src="{{'logo.png' | asset_url}}">
    <p id="nav-phone" class="black center bold">775.842.4282</p>
    <p class="black center nav-small bold">packardcarbs@gmail.com</p>
    <p class="black ce

nter nav-small bold">Sparks, NV USA</p>
</div><!--Navbar-->
4

3 に答える 3

3

これは、問題に必要な正確な機能を備えた望ましい出力です。

コードについてはフィドルを参照してください：http：//jsfiddle.net/NNfUb/2/

デモ： http： //jsfiddle.net/NNfUb/2/embedded/result

CSS：

#content
{
    position:relative;
}

#flyout_container
{
    position:absolute;
    width:175px;
    top:0;
    left:0;
    background:#107042;
    display:none;
}

.sub-nav
{
    padding:0;
    margin:0;
    display:none;
}

.sub-nav li
{
    padding:5px 5px 5px 10px;
    display:block;
    color:#fff;
    font-size:14px;
    font-weight:bold;
}

jQuery：

$(document).ready(function(){
        var container = $("<div id='flyout_container'>");
        container.appendTo($("#content"));
        var contentHeight = $("#content").height();
        container.css({"height": (contentHeight + 10) + "px"});

        $("a#show_sub_nav_1").mouseover(function(){
            $("#sub_nav_1").appendTo(container).show();
            container.toggle();
            //container.show();
            var fromTop = parseInt($(this).offset().top);
            $("#sub_nav_1").css({"margin-top": (fromTop - 205) + "px"});
        });

        $("#flyout_container").mouseleave(function(){
            $("#flyout_container").hide();
        });

    });

私はあなたのウェブページからあなたのソースコードをコピーすることによって上記のフィドルを作成し、それに取り組んでいます。コンテンツの高さまでの高さを取得し、スクリーンショットで提供される希望のデザインに従ってサブリンクを表示するフルハイト機能を作成しました。変更や拡張が必要な​​場合は、cssまたはコードをtweekする必要があります。すべてのビューポートで機能します。

注：問題が発生した場合はお知らせください。私は別のアプローチを使用したので、これがあなたの問題を解決することを願っています。

于 2012-12-25T17:14:58.200 に答える
1

要素の位置を絶対位置に変更すると、ドキュメントの流れを中断することなく、要素を正確に配置できます。

.flyout {
    position: fixed;
    left: 0px; (number of pixels from the left edge of the document)
    top: 0px;  (number of pixels from the top edge of the document)
}
于 2012-12-19T05:21:37.400 に答える
1

position: absolute最も近い非静的に配置された祖先を基準にして位置を作成します。したがって、ナビゲーションulをposition: relativeに、フライアウトをに変更すると、メインナビゲーションに対するposition: absoluteフライアウトメニューの位置を設定できるようになります。つまり、ページのサイズを変更しても、フライアウトは適切な場所に表示されます。

#navigation {
  position: relative;
}

.flyout {
  position: absolute;
  top: 0;
  left: 100%;
}

#navbar（または#navigation > liをposition: relative代わりに設定することもできます。）

あなたはまだポジショニングや他のスタイルを少しいじる必要がありますが、うまくいけばそれはあなたを正しい道に導くでしょう。

于 2012-12-24T21:39:20.383 に答える