2012-04-11 13 views
5

मैं एक परिपत्र मेनू बनाने के लिए देख रहा हूं और अब तक, मैं सर्कुलर पोजिशनिंग जावास्क्रिप्ट के साथ काम कर सकता हूं लेकिन फिर भी शुद्ध सीएसएस विकल्प प्राप्त करने में दिलचस्पी लेता हूं।यह सीएसएस मेनू कैसे बनाया गया है?

मेरे शोध में मैंने इस मेनू की खोज की: http://www.cssplay.co.uk/menus/cssplay-round-and-round.html

ताकि मेनू प्रत्येक इंडेक्स को एक इंडेक्स (पी 1, पी 2, पी 3 ...) के साथ एक वर्ग देकर किया गया हो तो उप मंडल के बच्चों में कक्षाएं (एस 1, एस 2, एस 3 ...) होती हैं। फिर आइटम हैं -webkit- अपनी कक्षा से जगह में बदल दिया।

क्या तत्वों पर क्लिक्स को हार्डकोड किए बिना और प्रत्येक प्रकार के सीएसएस नियमों को लिखने के बिना ऐसा करने का कोई तरीका है? यदि नहीं, तो जेएस के साथ ऐसा करने का सबसे अच्छा तरीका क्या है?


क्या मैं बिल्कुल द्वारा वांछित प्रभाव अब तक

मैं हासिल किया है स्थिति जावास्क्रिप्ट के साथ तत्वों, फिर भी मैं वास्तव में समाधान के इस शैली में दिलचस्पी नहीं है। कोड लगता है: वास्तविक कोड

var circles = document.getElementsByClassName('circle'); 
var radius = circles.style.height/2; 

for(var i = 0; i < circles.length; i++) { 
    var items = circles.children; 
    for(var i = 0; i < items.length) { 
     items.style.left = 0 + cos((i/items.length) * 360) * radius; 
     items.style.top = 0 + cos((i/items.length) * 360) * radius; 
    } 
} 

style.width की वापसी का उद्देश्य प्रकृति की वजह से थोड़ा अधिक जटिल है, लेकिन एक उदाहरण के रूप में इस आप चीजों का सार देना चाहिए।

+2

बस अपनी जानकारी के लिए, यह पथ आईओएस ऐप से पथ मेनू के रूप में भी जाना जाता है। गुगलिंग जो आपको ट्यूटोरियल खोजने में मदद कर सकती है, शायद। –

+0

आपने जो कुछ भी किया है? – Starx

+0

@ डैन प्रिंस क्षमा करें मुझे गलत समझा जाना चाहिए! शुभकामनाएं! – captainrad

उत्तर

1

आप nth-of-type छद्म-वर्ग का उपयोग कर सकते हैं।

ul.circles:hover li.p1 { ... } 
ul.circles:hover li.p2 { ... } 
ul.circles:hover li.p3 { ... } 
... 

के बजाय उदाहरण के लिए आप

ul.circles:hover li:nth-of-type(1) { ... } 
ul.circles:hover li:nth-of-type(2) { ... } 
ul.circles:hover li:nth-of-type(3) { ... } 
... 

उपयोग कर सकते हैं और इस तरह से एचटीएमएल (p1, p2, p3 ...) और (S1, S2, S3 ...) वर्गों को दूर ।

दुर्भाग्यवश, आपको अभी भी मेनू में आइटमों की संख्या जानने और प्रत्येक आइटम के लिए नियम लिखने की आवश्यकता है।

यदि सीएसएस में एक और अधिक सुरुचिपूर्ण समाधान संभव था, तो display: table-row जैसे कुछ होना होगा जहां पंक्ति एक सर्कल के चारों ओर लपेटी जाएगी। यदि आप प्रत्येक ली के परिवर्तन को पिछले एक के सापेक्ष बना सकते हैं तो आप रास्ते का हिस्सा बनने में सक्षम हो सकते हैं।

+0

हाँ, यह अभी भी उतना ही सुरुचिपूर्ण नहीं है जितना मैं ढूंढ रहा था। हार्डकोडिंग के साथ एक ही समस्या मौजूद है। –

+0

मुझे लगा कि यह आपके लिए खबर नहीं होगी, लेकिन यह आपके प्रश्न का एकमात्र हिस्सा है जिसका समाधान है, AFAIK। मैंने अपने उत्तर को एक पैराग्राफ के साथ अपडेट किया है कि एक और अधिक सुरुचिपूर्ण समाधान कैसा दिख सकता है। यदि उनमें से कोई भी सराहनीय लगता है, तो उप-समस्या को हल करने के तरीके के बारे में एक नया प्रश्न पूछने पर विचार करें। –

+1

यह एक अच्छा विचार की तरह लगता है। मैं इसे देख लूंगा, चीयर्स! –

0

यदि आप वास्तव में पागल होना चाहते हैं, तो आप हमेशा CSS in the DOM बना सकते हैं।

संबंधित मुद्दे