اضافة قائمة جانبية منبثقه لموقعك – Siden menu

مقدمة

ربما رأيتم في المواقع الكبيره الشهيره قائمة صفحات ذات زر تُفتح بجانب الشاشه ، هذا هو موضوعنا اليوم
طريقة اضافة قائمة جانبية منبثقه لموقعك – Siden menu

 

معلومات عن الاضافة

 

  • الوانها فلات ديزاين مُريحه للعين ومتناسقة مع اي موقع
  • مكان لوضع لوجو خاص بموقعك
  • مُدعم بأيقونات Font Awesome
  • خط جذور مُسطح
  • مصمم ب CSS , JQuery , HTML

طريقة التركيب 

  1. اذهب الي لوحة التحكم بالمظهر > تحرير HTML 
  2. ابحث عن الوسم </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'/>


3. ابحث عن الوسم <body> ثم الصق الكود التالي تحته مباشرةً

وهذا هو الكود الخاص بـ البنيه الخاصه بالقائمة الجانبيه


<!-- 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>

 

4. ابحث عن الوسم </body> والصق الكود التالي فوق مباشرةً

وهذا الكود هو الخاص بأن يجعل الزر يفتح ويغلق القائمة .

<!-- JQuery -->
<script>
$(&quot;#close&quot;).hide();
$(&quot;#open&quot;).click(function(){
  $(&quot;#flatn&quot;).animate({left: &#39;30px&#39;});
  $(&quot;#close&quot;).show();
  $(this).hide();

});

$(&quot;#close&quot;).click(function(){
$(&quot;#open&quot;).show();
$(this).hide();
$(&quot;#flatn&quot;).animate({left: &#39;-250px&#39;});

});

</script>

5. ابحث عن الكود ]]></b:skin> وضع الكود التالي فوقه

وهذا الكود هو 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;

}

 

 



معاينة الاضافة

تحميل قالب المعاينه

MohammadQT
مؤسس و مدير مدونة الاثير