jQuery फ्लाईआउट मेनू। अपने माता-पिता से बाहर एक तत्व तोड़ना - एचटीएमएल, सीएसएस, shopify

मैं एक Shopify परियोजना पर काम कर रहा हूँ।मैं डिजाइनर नहीं हूँ। मुझे दुकान के लिए फ्लाईआउट मेनू बनाना है। समस्या दो गुना है। सबसे पहले, फ्लाईआउट को व्यूपोर्ट के नीचे तक विस्तार करने की आवश्यकता है। दूसरा, मैं नेविगेशन डिव में सब कुछ एक साथ बंडल करना चाहता हूं, लेकिन मुझे यह समझने की ज़रूरत है कि तत्व को अपने माता-पिता से कैसे तोड़ना है और फिर इसे बिना किसी स्थान के बाकी सामग्री पर "परत स्वयं" करना है।

मैंने सोचा कि मैं सिर्फ सीएसएस के साथ मेनू छुपाएं औरफिर रोलओवर पर इसे अन-छुपाने के लिए jQuery का उपयोग करें। मुझे नहीं लगता कि यह काम करेगा हालांकि। मुझे नहीं पता कि फ्लाईआउट को कैसे व्यवस्थित किया जाए, इसलिए यह सब कुछ चारों ओर schlep नहीं है।

यहां साइट अब है: https://hodkiewicz-zieme-and-hirthe180.myshopify.com/

यहां "यह कैसा दिखना चाहिए: http://tinypic.com/r/35hnyox/6

यहां वर्तमान में एनएवी कॉलम में क्या है। मैं शायद संरचना बदल दूंगा।

<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-->

उत्तर:

जवाब के लिए 3 № 1

प्रश्न में आवश्यक सटीक कार्यक्षमता के साथ वांछित आउटपुट यहां दिया गया है।

कोड के लिए बेवकूफ देखें: http://jsfiddle.net/NNfUb/2/

डेमो: http://jsfiddle.net/NNfUb/2/embedded/result

सीएसएस:

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

});

मैंने आपकी प्रतिलिपि बनाकर उपरोक्त पहेली बनाई हैअपने वेबपृष्ठ से स्रोत कोड और उस पर काम करते हैं। मैंने पूर्ण ऊंचाई कार्यक्षमता बनाई है जो सामग्री की ऊंचाई तक ऊंचाई ले रही है और स्क्रीनशॉट में प्रदान किए गए वांछित डिज़ाइन के अनुसार उप-लिंक दिखा रही है। यदि आपको किसी भी बदलाव या वृद्धि की आवश्यकता है तो आपको सीएसएस या कोड को ट्वीक करने की आवश्यकता है। यह प्रत्येक व्यूपोर्ट पर काम करेगा।

ध्यान दें: यदि कोई समस्या है तो कृपया मुझे बताएं। मुझे उम्मीद है कि यह आपकी समस्या का समाधान करेगा क्योंकि मैंने अलग-अलग दृष्टिकोण का उपयोग किया है।


उत्तर № 2 के लिए 1

position: absolute निकटतम गैर-स्थिर-स्थित पूर्वजों के सापेक्ष स्थिति बनाता है। तो, अगर आप नेविगेशन बदलते हैं ul सेवा मेरे position: relative, और फ्लाईआउट करने के लिए position: absolute, आप फ्लाईआउट मेनू की स्थिति सेट करने में सक्षम होंगे मुख्य नेविगेशन के सापेक्ष। इसका मतलब है कि यदि आप पृष्ठ का आकार बदलते हैं, तो भी फ्लाईआउट सही जगह पर होगा।

#navigation {
position: relative;
}

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

(आप भी सेट कर सकते हैं #navbar या #navigation > li सेवा मेरे position: relative बजाय।)

आपको अभी भी स्थिति और अन्य शैलियों के साथ परेशान करने की आवश्यकता होगी, लेकिन उम्मीद है कि यह आपको सही रास्ते पर सेट करेगी।


उत्तर № 3 के लिए 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)
}

संबंधित सवाल
सबसे लोकप्रिय