اضافة تبويبات داخل التدوينة CSS فقط

اضافة تبويبات داخل التدوينة CSS فقط

اضافة تبويبات داخل التدوينة إضافة جميلة و رائعة جدا

معاينة الإضافة

إضافة الاداة

اتجه الى قالب تحرير HTML ابحث عن هذا الوسم

]]></b:skin> و ألصق الكود التالي فوقه

 /* Frame */
.tabs-frame {
    position: absolute;
    top: -25%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    height: 50px;
    margin: auto;
    display: block;
    text-align: Right;
}
/* Tabs */
.tabs-frame .tab {
    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    display: block;
}
/* Tabs Radio */
.tabs-frame .tab .radio {
    display: none;
}

.tabs-frame .tab .tab-button {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 15px;
    height: 15px;
    margin: auto;
    border-radius: 100%;
    border: 0 double #f74545;
    background: #f74545;
    display: block;
    -webkit-transition: .15s linear;
}

.tabs-frame .tab .radio:checked + .tab-button {
    border: 6px double #d4d9e1;
    background: #f74545;
}

.tabs-frame .tab .tab-button:hover {
    background: #f74545;
}

/* Tabs Frame */
.tabs-frame .tab .tab-frame {
    position: absolute;
    top: 100%;
    left: -126px;
    width: 300px;
    border-radius: 5px;
    background: #fff;
    display: block;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    text-align: Right;
    line-height: normal;
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .3);
    -webkit-transition: opacity .3s linear,
    -webkit-transform .3s linear;
    -webkit-transform: translate(0, -10%);
}

.tabs-frame .tab .tab-frame:before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent #fff;
    display: block;
}

.tabs-frame .tab .radio:checked ~ .tab-button ~ .tab-frame {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    -webkit-transform: translate(0, 0);
}

.tabs-frame .tab .tab-frame p {
    padding: 0 20px;
    margin: 20px 0;
} 

استخدام الإضافة في التدوينات

اجعل وضع الكتابة HTML و ألصق الكود التالي في المكان المناسب لك

مع تغيير الكلمات بمايناسبك

 <section class="tabs-frame">
  <article class="tab">
    <input type="radio" id="tab_1" class="radio" name="tab_group_1" />
    <label for="tab_1" class="tab-button"></label>
    <section id="tab_frame_1" class="tab-frame">
      <p>...التبويب 1...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_2" class="radio" name="tab_group_1" />
    <label for="tab_2" class="tab-button"></label>
    <section id="tab_frame_2" class="tab-frame">
      <p>...التبويب 2...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_3" class="radio" name="tab_group_1" checked />
    <label for="tab_3" class="tab-button"></label>
    <section id="tab_frame_3" class="tab-frame">
      <p>...التبويب 3...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_4" class="radio" name="tab_group_1" />
    <label for="tab_4" class="tab-button"></label>
    <section id="tab_frame_4" class="tab-frame">
      <p>...التبويب 4...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_5" class="radio" name="tab_group_1" />
    <label for="tab_5" class="tab-button"></label>
    <section id="tab_frame_5" class="tab-frame">
      <p>...التبويب 5...</p>
    </section>
  </article>
</section>