miraziz 26 ارسال شده در مرداد 97 گزارش بازنشر ارسال شده در مرداد 97 (ویرایش شده) سلام. دوستان من با راهنمایی آقای علیزاده گرانقدر میخواهم یک منوی درختی برای وردپرس آماده کنم که کلا با css باشه. البته چند یرادی است که طی تاپیک حل میشه. شاید بعدا دیگران هم ازش استفاده کردند. آقای علیزاده من کدهای آماده زیر را بر حسب نیازم تنظیم کردم. فقط نمی تونم راست چینش کنم. یعنی می خوام مثل تصویر زیر بشه. هرچی از float و text-align استفاده کردم نتونستم حل کنم. میشه شما راهنمایی کنین. <!DOCTYPE html> <html> <head> <style type="text/css"> body { margin: 30px; font-family: sans-serif; } #fontSizeWrapper { font-size: 16px; } #fontSize { width: 100px; font-size: 1em; } /* ————————————————————– Tree core styles */ .tree { margin: 1em; } .tree input { position: absolute; clip: rect(0, 0, 0, 0); } .tree input ~ ul { display: none; } .tree input:checked ~ ul { display: block; } /* ————————————————————– Tree rows */ .tree li { line-height: 1.2; position: relative; padding: 0 0 1em 1em; list-style-type:none; } .tree ul li { padding: 1em 0 0 1em; } .tree > li:last-child { padding-bottom: 0; } /* ————————————————————– Tree labels */ .tree_label { position: relative; display: inline-block; background: #ccc; padding: 2px 7px; border-right: 2px solid #000 } label.tree_label { cursor: pointer; } label.tree_label:hover { color: #666; } /* ————————————————————– Tree expanded icon */ label.tree_label:before { background: #000; color: #fff; position: relative; z-index: 1; float: left; margin: 0 1em 0 -2em; width: 1em; height: 1em; border-radius: 1em; content: '+'; text-align: center; line-height: .9em; } :checked ~ label.tree_label:before { content: '–'; } /* ————————————————————– Tree branches */ label.tree_label:after { border-bottom: 0; } .tree li:last-child:before { height: 1em; bottom: auto; } .tree > li:last-child:before { display: none; } .tree_custom { display: block; background: #eee; padding: 1em; border-radius: 0.3em; } </style></head> <body> <ul class="tree"> <li> <input type="checkbox" id="c5" /> <label class="tree_label" for="c5">Level 0</label> <ul> <li> <input type="checkbox" id="c6" /> <label for="c6" class="tree_label">Level 1</label> <ul> <li><span class="tree_label">Level 2</span></li> </ul> </li> <li> <input type="checkbox" id="c7" /> <label for="c7" class="tree_label">Level 1</label> <ul> <li><span class="tree_label">Level 2</span></li> <li> <input type="checkbox" id="c8" /> <label for="c8" class="tree_label">Level 2</label> <ul> <li><span class="tree_label">Level 3</span></li> </ul> </li> </ul> </li> </ul> </li> </ul> </body> </html> ویرایش شده مرداد 97 توسط miraziz نقل قول لینک به ارسال
davoodjafari 34 ارسال شده در مرداد 97 گزارش بازنشر ارسال شده در مرداد 97 در 11 دقیقه قبل، miraziz گفته است : سلام. دوستان من با راهنمایی آقای علیزاده گرانقدر میخواهم یک منوی درختی برای وردپرس آماده کنم که کلا با css باشه. البته چند یرادی است که طی تاپیک حل میشه. شاید بعدا دیگران هم ازش استفاده کردند. آقای علیزاده من کدهای آماده زیر را بر حسب نیازم تنظیم کردم. فقط نمی تونم راست چینش کنم. یعنی می خوام مثل تصویر زیر بشه. هرچی از float و text-align استفاده کردم نتونستم حل کنم. میشه شما راهنمایی کنین. <!DOCTYPE html> <html> <head> <style type="text/css"> body { margin: 30px; font-family: sans-serif; } #fontSizeWrapper { font-size: 16px; } #fontSize { width: 100px; font-size: 1em; } /* ————————————————————– Tree core styles */ .tree { margin: 1em; } .tree input { position: absolute; clip: rect(0, 0, 0, 0); } .tree input ~ ul { display: none; } .tree input:checked ~ ul { display: block; } /* ————————————————————– Tree rows */ .tree li { line-height: 1.2; position: relative; padding: 0 0 1em 1em; list-style-type:none; } .tree ul li { padding: 1em 0 0 1em; } .tree > li:last-child { padding-bottom: 0; } /* ————————————————————– Tree labels */ .tree_label { position: relative; display: inline-block; background: #ccc; padding: 2px 7px; border-right: 2px solid #000 } label.tree_label { cursor: pointer; } label.tree_label:hover { color: #666; } /* ————————————————————– Tree expanded icon */ label.tree_label:before { background: #000; color: #fff; position: relative; z-index: 1; float: left; margin: 0 1em 0 -2em; width: 1em; height: 1em; border-radius: 1em; content: '+'; text-align: center; line-height: .9em; } :checked ~ label.tree_label:before { content: '–'; } /* ————————————————————– Tree branches */ label.tree_label:after { border-bottom: 0; } .tree li:last-child:before { height: 1em; bottom: auto; } .tree > li:last-child:before { display: none; } .tree_custom { display: block; background: #eee; padding: 1em; border-radius: 0.3em; } </style></head> <body> <ul class="tree"> <li> <input type="checkbox" id="c5" /> <label class="tree_label" for="c5">Level 0</label> <ul> <li> <input type="checkbox" id="c6" /> <label for="c6" class="tree_label">Level 1</label> <ul> <li><span class="tree_label">Level 2</span></li> </ul> </li> <li> <input type="checkbox" id="c7" /> <label for="c7" class="tree_label">Level 1</label> <ul> <li><span class="tree_label">Level 2</span></li> <li> <input type="checkbox" id="c8" /> <label for="c8" class="tree_label">Level 2</label> <ul> <li><span class="tree_label">Level 3</span></li> </ul> </li> </ul> </li> </ul> </li> </ul> </body> </html> سلام این کد رو استفاده کن body { direction: rtl; } 1 نقل قول لینک به ارسال
miladalizadeh 257 ارسال شده در مرداد 97 گزارش بازنشر ارسال شده در مرداد 97 (ویرایش شده) در 17 دقیقه قبل، miraziz گفته است : سلام. دوستان من با راهنمایی آقای علیزاده گرانقدر میخواهم یک منوی درختی برای وردپرس آماده کنم که کلا با css باشه. البته چند یرادی است که طی تاپیک حل میشه. شاید بعدا دیگران هم ازش استفاده کردند. آقای علیزاده من کدهای آماده زیر را بر حسب نیازم تنظیم کردم. فقط نمی تونم راست چینش کنم. یعنی می خوام مثل تصویر زیر بشه. هرچی از float و text-align استفاده کردم نتونستم حل کنم. میشه شما راهنمایی کنین. <!DOCTYPE html> <html> <head> <style type="text/css"> body { margin: 30px; font-family: sans-serif; } #fontSizeWrapper { font-size: 16px; } #fontSize { width: 100px; font-size: 1em; } /* ————————————————————– Tree core styles */ .tree { margin: 1em; } .tree input { position: absolute; clip: rect(0, 0, 0, 0); } .tree input ~ ul { display: none; } .tree input:checked ~ ul { display: block; } /* ————————————————————– Tree rows */ .tree li { line-height: 1.2; position: relative; padding: 0 0 1em 1em; list-style-type:none; } .tree ul li { padding: 1em 0 0 1em; } .tree > li:last-child { padding-bottom: 0; } /* ————————————————————– Tree labels */ .tree_label { position: relative; display: inline-block; background: #ccc; padding: 2px 7px; border-right: 2px solid #000 } label.tree_label { cursor: pointer; } label.tree_label:hover { color: #666; } /* ————————————————————– Tree expanded icon */ label.tree_label:before { background: #000; color: #fff; position: relative; z-index: 1; float: left; margin: 0 1em 0 -2em; width: 1em; height: 1em; border-radius: 1em; content: '+'; text-align: center; line-height: .9em; } :checked ~ label.tree_label:before { content: '–'; } /* ————————————————————– Tree branches */ label.tree_label:after { border-bottom: 0; } .tree li:last-child:before { height: 1em; bottom: auto; } .tree > li:last-child:before { display: none; } .tree_custom { display: block; background: #eee; padding: 1em; border-radius: 0.3em; } </style></head> <body> <ul class="tree"> <li> <input type="checkbox" id="c5" /> <label class="tree_label" for="c5">Level 0</label> <ul> <li> <input type="checkbox" id="c6" /> <label for="c6" class="tree_label">Level 1</label> <ul> <li><span class="tree_label">Level 2</span></li> </ul> </li> <li> <input type="checkbox" id="c7" /> <label for="c7" class="tree_label">Level 1</label> <ul> <li><span class="tree_label">Level 2</span></li> <li> <input type="checkbox" id="c8" /> <label for="c8" class="tree_label">Level 2</label> <ul> <li><span class="tree_label">Level 3</span></li> </ul> </li> </ul> </li> </ul> </li> </ul> </body> </html> وقت بخیر داخل تگ html کد دایرکشن رو تعریف کنید یعنی به این شکل <html dir="rtl"> موفق و سربلند باشید ویرایش شده مرداد 97 توسط miladalizadeh 1 نقل قول لینک به ارسال
miraziz 26 ارسال شده در مرداد 97 مالک گزارش بازنشر ارسال شده در مرداد 97 در 36 دقیقه قبل، miladalizadeh گفته است : وقت بخیر داخل تگ html کد دایرکشن رو تعریف کنید یعنی به این شکل موفق و سربلند باشید در 41 دقیقه قبل، davoodjafary گفته است : سلام این کد رو استفاده کن دوستان با direction راست چین شد فقط هنوز before و after یا همان - و + سمن چپ باقی مونده اند. اونا را چگونه بیارم سمت راست؟ نقل قول لینک به ارسال
miladalizadeh 257 ارسال شده در مرداد 97 گزارش بازنشر ارسال شده در مرداد 97 در 4 دقیقه قبل، miraziz گفته است : دوستان با direction راست چین شد فقط هنوز before و after یا همان - و + سمن چپ باقی مونده اند. اونا را چگونه بیارم سمت راست؟ درود عبارت content:'+'; و content:'-'; رو داخل کد ها سرچ کنید و float:left هارو به float:right تغیر بدین 1 نقل قول لینک به ارسال
miraziz 26 ارسال شده در مرداد 97 مالک گزارش بازنشر ارسال شده در مرداد 97 در 13 دقیقه قبل، miladalizadeh گفته است : درود عبارت content:'+'; و content:'-'; رو داخل کد ها سرچ کنید و float:left هارو به float:right تغیر بدین ممنون. بله درست شد. و با کمی تغییر margin دقیقا سر جایش قرار گرفت. فقط ها من چگونه دسته بندی وردپرس را در کدهای بالا به جای level0 اضافه کنم؟ به صورتی که اگر رابطه دستههای ما به این صورت باشه مادر --> فرزند1--> فرزندفرزند1 وقتی مخاطب به مطلبی از دسته فرزندفرزند1 مراجعه می کند دسته فرزند1 باید باز باشد. برای مثال به عکس زیر توجه کنین: من به مطلبی از دسته «برتولت برشت» مراجعه کرده ام و کل لیست دسته با توجه به اون اتوماتیک باز شده است. اینکار با css عملی است نقل قول لینک به ارسال
miladalizadeh 257 ارسال شده در مرداد 97 گزارش بازنشر ارسال شده در مرداد 97 در 2 دقیقه قبل، miraziz گفته است : ممنون. بله درست شد. و با کمی تغییر margin دقیقا سر جایش قرار گرفت. فقط ها من چگونه دسته بندی وردپرس را در کدهای بالا به جای level0 اضافه کنم؟ به صورتی که اگر رابطه دستههای ما به این صورت باشه مادر --> فرزند1--> فرزندفرزند1 وقتی مخاطب به مطلبی از دسته فرزندفرزند1 مراجعه می کند دسته فرزند1 باید باز باشد. برای مثال به عکس زیر توجه کنین: من به مطلبی از دسته «برتولت برشت» مراجعه کرده ام و کل لیست دسته با توجه به اون اتوماتیک باز شده است. اینکار با css عملی است درود این موردو اینجوری نمیتونم راهنمایی کنم نیاز به کد نویسی داره که اگه تمایل داشتین با هزینه براتون انجام میدم در صورت تمایل واتساپ در تماس باشید نقل قول لینک به ارسال
coldrolledcoil 0 ارسال شده در مرداد 97 گزارش بازنشر ارسال شده در مرداد 97 با سلام میتونید از افزونه megaMenu برای ساختار درختی استفاده کنید من ی نمونه توی سایت مرکزآهن دیدم و البته این افزونه را با جوملا برای سایت خودم هم یاده کردم اگر خواتین نمونه کد را براتون قرار میدم نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .