jQuery-Flyout-Menü. Brechen eines Elements aus seinem Elternteil - html, css, shopify

Ich arbeite an einem Shopify-Projekt.Ich bin nicht der Designer. Ich muss ein Flyout-Menü für den Laden machen. Das Problem ist zweifach. Zunächst muss das Flyout bis zum unteren Rand des Ansichtsfensters reichen. Zweitens möchte ich alles zusammen in der Navigationsabteilung bündeln, aber ich muss herausfinden, wie man das Element aus seinem Elternteil herausbricht und dann "sich selbst" über den Rest des Inhalts "schichtet", ohne es zu bewegen.

I thought I"d just hide the menu with CSS and Verwenden Sie dann jQuery, um es beim Rollover auszublenden. Ich denke nicht, dass das funktionieren wird. Ich weiß nicht, wie ich das Flyout positionieren soll, damit es nicht alles umschwirrt.

Hier ist die Seite jetzt: https://hodkiewicz-zieme-and-hirthe180.myshopify.com/

So sollte es aussehen: http://tinypic.com/r/35hnyox/6

Hier ist, was ist in der Nav-Spalte derzeit. Ich werde wahrscheinlich die Struktur ändern.

<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="/images/{{"logo.png" | asset_url}}">
<p id="nav-phone" class="black center bold">775.842.4282</p>
<p class="black center nav-small bold">[email protected]</p>
<p class="black ce

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

Antworten:

3 für die Antwort № 1

Hier ist die gewünschte Ausgabe mit exakt benötigter Funktionalität gefragt.

Siehe Geige für Code: http://jsfiddle.net/NNfUb/2/

Demo: 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();
});

});

Ich habe die obige Geige erstellt, indem ich dein kopiert habeQuellcode von Ihrer Webseite und arbeiten daran. Ich habe die volle Höhe Funktionalität erstellt, die Höhe bis zur Höhe des Inhalts und zeigt die Unterlinks nach Ihrem gewünschten Design in Screenshot zur Verfügung gestellt. Sie müssen die CSS oder Code tweek, wenn Sie Änderungen oder Verbesserungen benötigen. Es funktioniert in jedem Ansichtsfenster.

Hinweis: Falls irgendwelche Probleme auftreten, lass es mich wissen. Ich hoffe, dass dies Ihr Problem lösen wird, weil ich einen anderen Ansatz verwendet habe.


1 für die Antwort № 2

position: absolute macht die Position relativ zum nächsten nicht statisch positionierten Vorfahren. Also, wenn Sie die Navigation ändern ul zu position: relativeund das Flyout zu position: absolute, können Sie die Position des Flyout-Menüs einstellen relativ zur Hauptnavigation. Das bedeutet, dass das Flyout auch dann an der richtigen Stelle bleibt, wenn Sie die Größe der Seite ändern.

#navigation {
position: relative;
}

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

(Sie könnten auch einstellen #navbar oder #navigation > li zu position: relative stattdessen.)

Du wirst noch ein wenig mit der Positionierung und anderen Stilen herumspielen müssen, aber das bringt dich hoffentlich auf den richtigen Weg.


1 für die Antwort № 3

Wenn Sie die Position des Elements auf absolut ändern, können Sie es genau positionieren, ohne den Fluss des Dokuments zu unterbrechen.

.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)
}

Speisekarte