यह मेरे द्वारा बनाई गई कलम है: http://codepen.io/helloworld/pen/ogwqpX?editors=101
इससे पहले कि आप नारंगी तीर पर क्लिक करें मैंने ईवी = "साइडबार" को प्रदर्शित करने के लिए सेट किया है: कोई नहीं;
जब आप नारंगी तीर को क्लिक करते हैं तो यह बाईं ओर 200px चलता है और साइडबार डिस्प्ले गुण "ऑटो" पर सेट हो जाता है।
संपूर्ण एनीमेशन वह नहीं है जो मैं चाहता हूं।
मैं चाहता हूँ कि पूरे साइडबारकोर्नर + दसाइडबारहैंडल / साइडबार, साइडबारहैंडल के स्थान से शुरू होकर 200px तक बाईं ओर जाता है। फिलहाल एनीमेशन साइडबार के दाईं ओर से शुरू होता है और इस प्रकार एनीमेशन खराब दिखता है।
मैं फ़्लायआउट / दराज के व्यवहार को कैसे खोला और बंद किया जा सकता है?
एचटीएमएल
<div id="view" style="height:400px;">
<div style="height:100%;background:black;" class="col-xs-3">
column 3
</div>
<div style="height:100%;background:red;" class="col-xs-4">
column 4
</div>
<div id="availableSidebarColumn" style="padding:0;background:yellow;height:100%;" class="col-xs-1">
<div class="sidebarClosed" id="sidebarContainer" style="position:absolute;z-index:10; display:table;height:100%;width:30px;background:green;">
<div id="sidebarHandle" style="border:1px solid black;cursor:pointer;background-color: orange;width:100%;display: table-cell;height:100%;vertical-align: middle;font-size:32px;" class="text-center glyphicon glyphicon-chevron-left">
</div>
<div id="sidebar" style="display:none;border:1px solid black;background:orange;height:100%;width:200px">
<div style="background:lightblue;height:10%;">navigation</div>
<div style="background:lightgreen;height:90%;">content</div>
</div>
</div>
</div>
<div style="height:100%;background:pink;" class="col-xs-4">
column 4
</div>
</div>
सीएसएस
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
जे एस
$(function () {
$("#view").height(400);
$("#sidebarHandle").click(function () {
$("#sidebarHandle").toggleClass("glyphicon-chevron-right glyphicon-chevron-left");
$("#sidebarContainer").animate({right:"200px"},350); // 200px is the width of the sidebar
$("#sidebar").css("display", "auto");
});
});
उत्तर:
जवाब के लिए 2 № 1अगर मैं सही ढंग से समझ गया, जब आप उस हैंडल पर क्लिक करते हैं, तो कुछ सामान को बाईं ओर से दाईं ओर स्लाइड करना चाहिए, और जब आप इसे फिर से क्लिक करते हैं तो इसके विपरीत।
- डिस्प्ले को किसी से भी न हटाएं
#sidebar - कुछ अतिरिक्त सीएसएस इसकी दृश्यता, चौड़ाई: 0 + अतिप्रवाह: छिपाएंगे
- जब इसके खुलने, चौड़ाई के बीच एक टॉगलक्लास सेट करें: आवश्यक चौड़ाई, और जब इसके बंद हो जाएं, तो चौड़ाई पर वापस स्विच करें: 0;
- और इसके बारे में thats।
शायद यह js के माध्यम से किया जा सकता है, उस चौड़ाई को चेतन की तरह, एक निश्चित समय में, मैंने उपयोग किया है transition यह चेतन करने के लिए।
मैंने "अतिरिक्त सीएसएस का उपयोग किया है, सीएसएस टैब में, आप देख सकते हैं।" डेमो यहाँ और उम्मीद है कि यह आपकी मदद करेगा
ठीक है, क्योंकि आप दराज की चौड़ाई जानते हैं औरट्रिगर की चौड़ाई, आप इसके कंटेनर के लिए एक चौड़ाई निर्धारित कर सकते हैं। इस स्थिति को देखते हुए, मैंने "अपने मूल सीएसएस को थोड़ा बदल दिया है, ट्रिगर और दराज दोनों के लिए, निरपेक्ष स्थिति के लिए, इसलिए मैं चौड़ाई, या बाएं / दाएं सहारा को चेतन कर सकता हूं। इस तरह से आसान।"
मैंने इस उदाहरण को स्पष्ट करने के लिए 2 उदाहरण दिए हैं,उम्मीद है कि इस बार मुझे यह सही मिला :) मार्कअप संरचना मूल रूप से एक ही है, केवल आईडी / वर्ग के नाम अलग हैं (आईडी नाम बहुत लंबे थे जो और व्हाट्सएप का ट्रैक रखने के लिए)।
इसकी जाँच पड़ताल करो यहाँ डेमो, और मुझे पता है कि यह कैसे जाता है।
अद्यतन v3
दराज को दाईं ओर धकेल दिया गया था, क्योंकि मेरे मूल उदाहरण में, मैंने उन 2 दराज के बीच कुछ मार्जिन निर्धारित किया है, ताकि बेहतर हो कि क्या हो रहा है।
अब जेड-इंडेक्स मुद्दों के लिए, इसके सुंदरसरल, चूँकि दराज को 200px दाईं ओर धकेला गया था, यह उसके बगल वाले सिबलिंग के नीचे गिर गया होगा, इसलिए आपको उनके आदेश को पलटने के लिए कुछ z- इंडेक्स जोड़ना होगा।
इसके अलावा, ड्रावर में कुछ स्थिर चौड़ाई निर्धारित थी (Iलगता है कि 200 px), हालांकि यदि आप चाहते हैं कि यह इसके माता-पिता के अंदर समाहित हो, तो आप माता-पिता को चौड़ाई, इसे दराज में सेट कर सकते हैं और यह ठीक होना चाहिए।
इसकी जाँच पड़ताल करो यहाँ नया पेन