ایجاد منوی درختی دسته بندی وردپرس فقط با css

miraziz · مرداد 97

سلام. دوستان من با راهنمایی آقای علیزاده گرانقدر می‌خواهم یک منوی درختی برای وردپرس آماده کنم که کلا با css باشه. البته چند یرادی است که طی تاپیک حل میشه. شاید بعدا دیگران هم ازش استفاده کردند.

آقای علیزاده من کدهای آماده زیر را بر حسب نیازم تنظیم کردم. فقط نمی تونم راست چینش کنم. یعنی می خوام مثل تصویر زیر بشه. هرچی از float و text-align استفاده کردم نتونستم حل کنم. میشه شما راهنمایی کنین.

treem.jpg.7c8ed0b5db280e58328fbc364081015d.jpg

<!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 · مرداد 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;
}

miladalizadeh · مرداد 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

miraziz · مرداد 97

در 36 دقیقه قبل، miladalizadeh گفته است :

وقت بخیر

داخل تگ html کد دایرکشن رو تعریف کنید

یعنی به این شکل

موفق و سربلند باشید

در 41 دقیقه قبل، davoodjafary گفته است :

سلام

این کد رو استفاده کن

دوستان با direction راست چین شد فقط هنوز before و after یا همان - و + سمن چپ باقی مونده اند. اونا را چگونه بیارم سمت راست؟

miladalizadeh · مرداد 97

در 4 دقیقه قبل، miraziz گفته است :

دوستان با direction راست چین شد فقط هنوز before و after یا همان - و + سمن چپ باقی مونده اند. اونا را چگونه بیارم سمت راست؟

درود

عبارت content:'+'; و content:'-'; رو داخل کد ها سرچ کنید و float:left هارو به float:right تغیر بدین

miraziz · مرداد 97

در 13 دقیقه قبل، miladalizadeh گفته است :

درود

عبارت content:'+'; و content:'-'; رو داخل کد ها سرچ کنید و float:left هارو به float:right تغیر بدین

ممنون. بله درست شد. و با کمی تغییر margin دقیقا سر جایش قرار گرفت. فقط ها من چگونه دسته بندی وردپرس را در کدهای بالا به جای level0 اضافه کنم؟

به صورتی که اگر رابطه دسته‌های ما به این صورت باشه مادر --> فرزند1--> فرزندفرزند1 وقتی مخاطب به مطلبی از دسته فرزندفرزند1 مراجعه می کند دسته فرزند1 باید باز باشد. برای مثال به عکس زیر توجه کنین: من به مطلبی از دسته «برتولت برشت» مراجعه کرده ام و کل لیست دسته با توجه به اون اتوماتیک باز شده است. اینکار با css عملی است

5b7b08e16ec79_Screenshot(77).png.53692b5495c2b15346580b817056406a.png

miladalizadeh · مرداد 97

در 2 دقیقه قبل، miraziz گفته است :

ممنون. بله درست شد. و با کمی تغییر margin دقیقا سر جایش قرار گرفت. فقط ها من چگونه دسته بندی وردپرس را در کدهای بالا به جای level0 اضافه کنم؟

به صورتی که اگر رابطه دسته‌های ما به این صورت باشه مادر --> فرزند1--> فرزندفرزند1 وقتی مخاطب به مطلبی از دسته فرزندفرزند1 مراجعه می کند دسته فرزند1 باید باز باشد. برای مثال به عکس زیر توجه کنین: من به مطلبی از دسته «برتولت برشت» مراجعه کرده ام و کل لیست دسته با توجه به اون اتوماتیک باز شده است. اینکار با css عملی است

درود

این موردو اینجوری نمیتونم راهنمایی کنم

نیاز به کد نویسی داره که اگه تمایل داشتین با هزینه براتون انجام میدم

در صورت تمایل واتساپ در تماس باشید

coldrolledcoil · مرداد 97

با سلام

میتونید از افزونه megaMenu برای ساختار درختی استفاده کنید

من ی نمونه توی سایت مرکزآهن دیدم

و البته این افزونه را با جوملا برای سایت خودم هم یاده کردم

اگر خواتین نمونه کد را براتون قرار میدم

ورود

ایجاد منوی درختی دسته بندی وردپرس فقط با css

پست های پیشنهاد شده

miraziz 26

لینک به ارسال

davoodjafari 34

لینک به ارسال

miladalizadeh 257

لینک به ارسال

miraziz 26

لینک به ارسال

miladalizadeh 257

لینک به ارسال

miraziz 26

لینک به ارسال

miladalizadeh 257

لینک به ارسال

coldrolledcoil 0

لینک به ارسال

به گفتگو بپیوندید

فهرست بخش ها

فعالیت ها