يوليو 06, 2023تحميل النسخة الأخيرة من تطبيق ياسين 2023 Yacine TV V3 لمشاهدة القنوات المشفرة

قائمة أحترافية  تتميز هذه القائمة با الأحترافية و التجاوب مع جميع المقاسات و الهواتف كما أنها خفيف جدا فقط HTML و CSS

معاينة

1. من لوحة التحكم بلوجر
2. المظهر >> تحرير HTML

قبل هذا الوسم ]]></b:skin> نضيف الكود التالي

/*----------------------القائمة العلوية-------------------------*/
.menutop {
background: #006696;
height: 48px;
position: relative;
}
.home {
margin: 0 auto;
}
.home .fa.fa-home {
background-color: #000;
color: #fff;
text-decoration: none;
float: right;
font-size: 30px;
height: 48px;
line-height: 48px;
margin-left: 4px;
text-align: center;
width: 48px;
}
#rabet a::before {
float: right;
font: 16px/48px fontawesome;
margin: 0 0 0 5px;
position: relative;
bottom: 2px;
}
.amlink::before {content: "\f0e8";}
.maza::before {content: "\f015";}
.bmlink::before {content: "\f023";}
.cmlink::before {content: "\f0e0""";}
.dmlink::before {content: "\f0c9";}
.emlink::before {content: "\f024";}
.fmlink::before {content: "\f05a";}
#rabet {
float: right;
list-style: outside none none;
margin: 0;
padding: 0;
}
#rabet li {float: right;}
#rabet a {
color: #fff;
transition: all 0.4s ease-in-out;
text-decoration: none;
display: block;
font-size: 15px;
font-weight: normal;
line-height: 48px;
padding: 0 15px;
}
#rabet a:hover {
background: #000;
color: #fff;
}
#rabetb + label span::before {
color: #fff;
content: "\f0c9";
cursor: pointer;
font: 20px/48px fontawesome;
height: 48px;
position: absolute;
text-align: center;
right: 54px;
width: 48px;
display:none;
}
#rabetb:checked ~ #rabet{display:block;}
#rabetb:checked + label span::before {background-color: #000;color: #fff;}
@media screen and (max-width : 940px) {
#rabetb + label span::before {display:block;background: #000;color: #fff;}
#rabet {
display: none;
margin-right: 54px;
margin-top: 48px;
position: absolute;
z-index: 999;
}
#rabet a {
background: #000!important;
color: #fff;
}
#rabet a:hover {
background:#fa411e!important;
transition: all 0.4s ease-in-out;
}
#rabet li {float: none;}
}
#rabetb {position: absolute; visibility: hidden;}

الخطوة الثانية من تركيب القائمة 

حدد المكان لذي سوف تضيف به القائمة وأضف به الكود التالي

<div class='menutop'>
<div class='home'>
<a class='fa fa-home' href='/'/>
<input id='rabetb' type='checkbox'/>
<label for='rabetb'><span/></label>
<ul id='rabet'>
<li><a class='amlink' href='#'>الفهرس</a></li>
<li><a class='bmlink' href='#'>سياسة الخصوصية</a></li>
<li><a class='cmlink' href='#'>اتصل بنا</a></li>
<li><a class='emlink' href='#'>اعلن معنا</a></li>
<li><a class='fmlink' href='#'>عن المدونة</a></li>
</ul>
</div>
</div>

أي أستفسار ضعه في تعليق 

في أمان الله

تعديل المقال