سلام عليكم و رحمة الله و بركاته كيف الحال تعتبر القالب هو الوجه الثاني او الاسبب الثاني لي نجاح المدونة فاعليك بتجميل مدونتك لي ذالك اليوم اقدم اليكم إضافة قائمة إحترافية منزلقة بي استعمل الجيكوري و css تشتغل بنقر
معاينة1- ابحث عن */]]></b:skin> وأضف فوقه الكود التالي :
li.lables1 {
background: #131313;
width: 245px;
display: block;
margin: 5px 38px 5px 5px;
padding: 6px 6px 6px 6px;
float: right;
border-right: 7px solid #06c8ab;
margin-top: 12em;
margin-right: -47em;
}
li.lables1::before {
content: "\f0d9";
font-family: fontawesome;
float: right;
margin-right: -6px;
margin-top: 4px;
color: #06c8ab;
font-size: 22px;
}
li.lables1:hover::before{color: #131313;}
li.lables1:hover{
border-right: 7px solid #131313;
box-shadow: inset -268px 0px 0px 0 #06C8AB;
transition: 0.5s;
color: #131313;
}
li.lables1 a {
color: #fff;
font-size: 18px;
text-align: center;
}
.nav {
display: none;
width: 696px;
background: #131313;
height: 100%;
margin-right: 35.1em;
top: 12em;
overflow: hidden;
position: absolute;
border-right: 7px solid #06c8ab;
border-left: 7px solid #06c8ab;
border-top: 7px solid #06c8ab;
list-style-type: none;
z-index: 8;
}
.nav ul li {
background: #fff;
padding: 10px;
width: 100%;
border-bottom: 3px solid #eee;
float: right;
}
.nav ul li a {
text-align: center;
color: #2F2323;
position: relative;
display: block;
}
2-أضف الكود التالي في اي مكان تريد ان تضهر فيه القائمة
<li class='lables1'><a href='#'>الاقسام </a></li>
3- أضف الكود التالي في اي مكان داخل <body> :
<div class='nav'>
<ul>
<li><a href=''>تعديل</a></li>
<li><a href=''>تعديل</a></li>
<li><a href=''>تعديل</a></li>
<li><a href=''>تعديل</a></li>
<li><a href=''>تعديل</a></li>
<li><a href=''>تعديل</a></li>
<li><a href=''>تعديل</a></li>
<li><a href=''>تعديل</a></li>
<li><a href=''>تعديل</a></li>
<li><a href=''>تعديل</a></li>
</ul>
</div>
4-ابحث عن </body> وأضف فوقه الكود التالي :
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".lables1").click(function(){
$(".nav").slideToggle();
});
});
//]]>
</script>
5- في حال عدم توفرك على كود الأيقونات font awesome أضف الكود التالي اسفل <head> :
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
الأن اضغط حفظ وهكذا تكون قد حصلت على الإضافة.
إلى هنا انتهى درسنا حول إضافة قائمة إحترافية منزلقة لمدونات بلوجر أتمنى أن أكون قد أفذتكم و ان وجهتكم مشكلة لا تتردو في قولها لا تنسو دعمنا لتحصلوا على المزيد
