شرح تغير شكل أداة التسميات الى قائمة منزلقة
نوفمبر 16, 2015سنتعلم اليوم تغير شكل أداة التسميات الى قائمة منزلقة الأصدار الثاني ،التي تم تصميمه إستناداً إلي أداة التسميات واستخدام Css صافي .
/*! 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:section> وفوقه مباشرة نلصق الكود التالي:<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>