مقدمة
ربما رأيتم في المواقع الكبيره الشهيره قائمة صفحات ذات زر تُفتح بجانب الشاشه ، هذا هو موضوعنا اليوم
- طريقة : اضافة قائمة جانبية منبثقه لموقعك - Siden menu
معلومات عن الاضافة
- الوانها فلات ديزاين مُريحه للعين ومتناسقة مع اي موقع
- مكان لوضع لوجو خاص بموقعك
- مُدعم بأيقونات Font Awesome
- خط جذور مُسطح
- مصمم ب CSS , JQuery , HTML
طريقة التركيب
- اذهب الي لوحة التحكم بالمظهر > تحرير HTML
- ابحث عن الوسم
</head> والصق الكود التالي تحته
وهذا هو الكود الخاص بخط الايقونات وخط جذور و مكتبة JQuery
<!-- Joozor font -->
<link href='//www.fontstatic.com/f=flat-jooza' rel='stylesheet' type='text/css'/>
<!-- icons font -->
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.7.1/css/all.css' integrity='sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>
وهذا هو الكود الخاص بـ البنيه الخاصه بالقائمة الجانبيه
<!-- Start right menu -->
<div id='flatn'>
<div id='logo'><a href='google.com'><img src='https://developers.google.com/analytics/images/terms/logo_lockup_analytics_icon_vertical_white_2x.png?hl=es'/></a></div>
<div id='menu'>
<ul>
<li><a href='#'>خدمات مصغره<i class='far fa-folder'/></a> </li>
<li><a href='#'>تركيب القائمة<i class='far fa-folder'/></a> </li>
<li><a href='#'>فيديوهات يوتيوب<i class='far fa-folder'/></a> </li>
<li><a href='#'>اقسم بلوجر<i class='far fa-folder'/></a> </li>
<li><a href='#'>رابط تجريبي<i class='far fa-folder'/></a> </li>
<li><a href='#'>رابط تجريبي<i class='far fa-folder'/></a> </li>
</ul>
</div>
</div>
وهذا الكود هو الخاص بأن يجعل الزر يفتح ويغلق القائمة .
<!-- JQuery -->
<script>
$("#close").hide();
$("#open").click(function(){
$("#flatn").animate({left: '30px'});
$("#close").show();
$(this).hide();
});
$("#close").click(function(){
$("#open").show();
$(this).hide();
$("#flatn").animate({left: '-250px'});
});
</script>5. ابحث عن الكود
وهذا الكود هو CSS والمسؤل عن مظهر الاضافة والوانها
#flatn {
width: 220px;
height: 700px;
background: #ffffff;
box-shadow: 1px 1px 22px #585858;
position: fixed;
margin: 15px;
border-radius: 10px;
left:-250px
}
#topnav{
margin-top: -26px;
height: 70px;
background: #fa983a;
box-shadow: 1px 1px 15px #555;
width: 0%;
}
#logo img {
width: 100%;
margin: auto;
height: auto;
}
* {
font-family: flat-jooza;
}
#logo {
background: #7647E2;
background: -webkit-linear-gradient(50deg,#7647E2,#B577E8);
background: -o-linear-gradient(50deg,#7647E2,#B577E8);
background: -moz-linear-gradient(50deg,#7647E2,#B577E8);
background: linear-gradient(50deg,#7647E2,#B577E8);
}
#open:hover{
box-shadow: 1px 1px 9px #444;
color: #fff;
background: #737373;
cursor: pointer;
}
#close:hover{
box-shadow: 1px 1px 9px #444;
color: #fff;
background: #737373;
cursor: pointer;
}
#close {
outline: none;
border-style: none;
margin: 30px;
border: none;
width: 40px;
color: #5a5a5a;
background: #fff;
height: 40px;
border-radius: 100%;
font-size: 15px;
}
#open {
outline: none;
border-style: none;
margin: 30px;
border: none;
width: 40px;
color: #5a5a5a;
background: #fff;
height: 40px;
border-radius: 100%;
font-size: 15px;
}
#flatn ul {
list-style: none;
text-decoration: none;
width: 100%;
text-decoration-line: none;
float: right;
text-decoration: none;
}
#flatn li:hover {
BACKGROUND: #e8e8e8;
}
#flatn li {
text-decoration: none;
font-size: 20px;
width: 100%;
height: 44px
}
#flatn ul a {
text-decoration: none;
color: #666;
border: 1px;
font-size: 15px;
FLOAT: RIGHT;
font-weight: 600;
}
#flatn i{
padding: 15px 14px;
}
6. هي الخطوه الاخيره وهي اختيار موضع زر فتح القائمه وهنا لدينا خيارين
6 - 1. ان تضع الزر بأي مكان تريده
6 - 2. تجعله عائم وثابت علي الصفحة
وهذا هو الكود الخاص بالزر ان كنت تريد وضعه بأي مكان تريده
<!-- Open and close buttons -->
<div id='topnav'>
<button class='fas fa-bars' id='open'/>
<button class='fas fa-times' id='close'/>
</div>
وهذا هو الكود الاضافي الذي يجعل الزر عائم
#flatn button {
position: fixed;
}
معاينة الاضافة
تحميل قالب المعاينه
Share This :
comment 0 Comments
more_vert