شرح تغير شكل أداة التسميات الى قائمة منزلقة

/*! Widget: mLabels v2 | by www.imintweb.com */#MintLabel,#MintLabel .widget-content{position:relative!important;z-index:10;overflow:initial!important}.labeldrop:checked~.mLabels-button::before{position:fixed;top:0;right:0;width:100%;z-index:800;content:"";cursor:default;height:100%}.widget.Label,.widget.Label .widget-content{overflow:initial!important}.labeldrop{display:none}.mLabels{font-size:14px;position:relative}.mLabels-button{display:flex;justify-content:space-between;align-items:center;border-radius:3px;cursor:pointer;font-weight:500;transition:color .3s}.mLabels-button::after{content:"";width:8px;height:8px;display:block;border-left:3px solid;border-bottom:3px solid;-webkit-transform:rotate(45deg);transform:rotate(45deg);transition:.3s -webkit-transform;transition:.3s transform;transition:.3s transform,.3s -webkit-transform}.mLabels-nav{height:0;position:absolute;top:100%;z-index:9999;width:100%;padding-top:1em;opacity:0;transition:visibility .3s,opacity .3s,-webkit-transform .3s;transition:transform .3s,visibility .3s,opacity .3s;transition:transform .3s,visibility .3s,opacity .3s,-webkit-transform .3s;-webkit-transform:translate(0,2em);transform:translate(0,2em);visibility:hidden}.mLabels-dropdown{overflow-y:auto}.mLabels-link{display:flex;align-items:center;justify-content:space-between;font-weight:500}.labeldrop:checked~.mLabels-button::after{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.labeldrop:checked~.mLabels-nav{visibility:visible;opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0);height:auto}.mLabels-nav::before{content:"";display:block;top:8px;position:absolute;left:1em;width:14px;height:14px;z-index:-1;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.mLabels-button{padding:1.2em;background:rgba(0,0,0,0.05);color:rgba(38,50,56,0.5)}.mLabels-button:hover{color:rgba(38,50,56,0.75)}.mLabels-dropdown,.mLabels-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)}.mLabels-dropdown{border-radius:3px;max-height:450px}.mLabels-dropdown::-webkit-scrollbar{width:6px}.mLabels-dropdown::-webkit-scrollbar-track{background-color:rgba(0,0,0,0.1)}.mLabels-dropdown::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.4)}.mLabels-link{padding:.8em 1em;color:rgba(0,0,0,0.5);border-bottom:1px solid rgba(0,0,0,0.05)}.mLabels-num{color:rgba(0,0,0,0.25);font-size:.9em;font-weight:700}

<b:widget id='MintLabel' title='قائمة التسميات' type='Label'>
   <b:widget-settings>
      <b:widget-setting name='showFreqNumbers'>true</b:widget-setting>
   </b:widget-settings>
   <b:includable id='main'>
      <b:if cond='data:title.length != 0'><h2><data:title/></h2></b:if>
      <div class='widget-content'>
         <div class='mLabels'>
            <input id='labeldrop' class='labeldrop' type='checkbox'/>
            <label class='mLabels-button' for='labeldrop'>Elige una etiqueta</label>
            <nav class='mLabels-nav'>
            <div class='mLabels-dropdown'>
            <b:loop values='data:labels' var='i'>
               <a class='mLabels-link' expr:href='data:i.url'><data:i.name/>
               <b:if cond='data:showFreqNumbers'><span class='mLabels-num'><data:i.count/> مواضيع</span></b:if></a>
            </b:loop>
            </div>
            </nav>  
         </div>
      </div>
   </b:includable>
</b:widget>