Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- الشرح: https://www.imintweb.com/2019/07/how-to-make-blog-labels-on-the-form-of-a-list-sliding-v2.html
-->
<div class="general">
  <header>
    <h1>قائمة التسميات</h1>
    <span>شرح تغير شكل أداة التسميات الى قائمة منزلقة الأصدار الثاني</span>
  </header>
  <main>
    <div class="container">
      <div class="template">
        <div class="template-blog">
          <div class="template-widget">
            <h2 class="template-widget__title">مثال لمقال</h2>
            <div class="template-widget__content">
              <div class="example-grid flex wrap align-items-start">
                <div class="example-grid__item far fa-image"></div>
                <div class="example-grid__item far fa-image"></div>
                <div class="example-grid__item far fa-image"></div>
                <div class="example-grid__item far fa-image"></div>
                <div class="example-grid__item far fa-image"></div>
                <div class="example-grid__item far fa-image"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="template-sidebar">
          <div class="template-widget" id="Label50">
            <h2 class="template-widget__title">قائمة التسميات</h2>
            <div class="template-widget__content">
              <div class="iLabels">
                <input id="labeldrop" class="labeldrop" type="checkbox">
                <label class="iLabels__button" for="labeldrop">اختيار التسمية</label>
                <nav class="iLabels__nav">
                  <div class="iLabels__dropdown">
                  <a class="iLabels__link" target="_blank" href="https://www.imintweb.com/search/label/%D8%A3%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=8">إضافات بلوجر
                  <span class="iLabels__num">8 مواضيع</span></a>
                  <a class="iLabels__link" target="_blank" href="https://www.imintweb.com/search/label/%D8%AE%D8%B7%D9%88%D8%B7?&max-results=8">خطوط
                  <span class="iLabels__num">75 موضوع</span></a>
                  <a class="iLabels__link" target="_blank" href="https://www.imintweb.com/search/label/%D9%82%D9%88%D8%A7%D9%84%D8%A8%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=8">قوالب بلوجر
                  <span class="iLabels__num">17 موضوع</span></a>
                  <a class="iLabels__link" target="_blank" href="https://www.imintweb.com/search/label/CSS?&max-results=8">Css
                  <span class="iLabels__num">11 مواضيع</span></a>
                  <a class="iLabels__link" target="_blank" href="https://www.imintweb.com/search/label/Javascript?&max-results=8">Javascript
                  <span class="iLabels__num">18 مواضيع</span></a>
                  <a class="iLabels__link" target="_blank" href="https://www.imintweb.com/search/label/HTML?&max-results=8">HTML
                  <span class="iLabels__num">7 مواضيع</span></a>
                  <a class="iLabels__link" target="_blank" href="https://www.imintweb.com/search/label/%D8%B3%D9%8A%D9%88?&max-results=8">سيو
                  <span class="iLabels__num">9 مواضيع</span></a>
                  <a class="iLabels__link" target="_blank" href="https://www.imintweb.com/search/label/%D8%AA%D8%B5%D9%85%D9%8A%D9%85?&max-results=8">تصميم
                  <span class="iLabels__num">33 مواضيع</span></a>
                  </div>
                </nav>
              </div>
            </div>
          </div>
          <div class="template-widget">
            <h2 class="template-widget__title">مثال لأداة</h2>
            <div class="template-widget__content">
              <div class="example-grid__item far fa-image"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer><a href="https://www.imintweb.com" target="_blank">تم نطويره  <i class="fas fa-code"></i> بـ <i class="fas fa-heart"></i> بواسطة  <span class="by">Mint Web</span></a></footer>
    </div>
              
            
!

CSS

              
                
#Label50
  position: relative !important
  z-index: 10
  overflow: initial !important
  .widget-content
    position: relative !important
    z-index: 10
    overflow: initial !important

.labeldrop:checked ~ .iLabels__button::before
  position: fixed
  top: 0
  left: 0
  width: 100%
  z-index: 800
  content: ""
  cursor: default
  height: 100%

.widget.Label
  overflow: initial !important
  .widget-content
    overflow: initial !important

.labeldrop
  display: none

.iLabels
  font-size: 14px
  position: relative

.iLabels__button
  display: flex
  justify-content: space-between
  align-items: center
  border-radius: 3px
  cursor: pointer
  font-weight: 500
  transition: color 0.3s
  &::after
    content: ""
    width: 8px
    height: 8px
    display: block
    border-right: 3px solid
    border-bottom: 3px solid
    transform: rotate(45deg)
    transition: 0.3s transform

.iLabels__nav
  height: 0
  position: absolute
  top: 100%
  z-index: 9999
  width: 100%
  padding-top: 1em
  opacity: 0
  transition: transform .3s,visibility .3s,opacity .3s
  transform: translate(0, 2em)
  visibility: hidden

.iLabels__dropdown
  overflow-y: auto

.iLabels__link
  display: flex
  align-items: center
  justify-content: space-between
  font-weight: 500

.labeldrop:checked ~
  .iLabels__button::after
    transform: rotate(-135deg)
  .iLabels__nav
    visibility: visible
    opacity: 1
    transform: translate(0, 0)
    height: auto

.iLabels__nav::before
  content: ""
  display: block
  top: 8px
  position: absolute
  right: 1em
  width: 14px
  height: 14px
  z-index: -1
  transform: rotate(-45deg)


.iLabels__button
  padding: 1.2em
  background: rgba(0, 0, 0, 0.05)
  color: rgba(38, 50, 56, 0.5)
  &:hover
    color: rgba(38, 50, 56, 0.75)

.iLabels__dropdown,
.iLabels__nav::before
  background-color: #fff
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
 
.iLabels__dropdown
  border-radius: 3px
  max-height: 450px
  &::-webkit-scrollbar
    width: 6px
  &::-webkit-scrollbar-track
    background-color: rgba(0, 0, 0, 0.1)
  &::-webkit-scrollbar-thumb
    background-color: rgba(0, 0, 0, 0.4)

.iLabels__link
  padding: .8em 1em
  color: rgba(0, 0, 0, 0.5)
  border-bottom: 1px solid rgba(0, 0, 0, 0.05)

.iLabels__num
  color: rgba(0, 0, 0, 0.25)
  font-size: .9em
  font-weight: 700
              
            
!

JS

              
                
              
            
!
999px

Console