-->


مقدمة


ربما رأيتم في المواقع الكبيره الشهيره قائمة صفحات ذات زر تُفتح بجانب الشاشه ، هذا هو موضوعنا اليوم
- طريقة اضافة قائمة جانبية منبثقه لموقعك - 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;


}




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

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

يرجى الالتزام بسياسة التعليقات لدينا ليتم نشر تعليقك . وشكرا

    1. رائع اخي تقدم أعمال ممتازه ومبدعة في تطوير محتوى التدوين العربي - وأرجو شرح عمل القائمة الجانبية المنبثقة كما مدونة الأثير مثل هذه الصوره

      https://4.bp.blogspot.com/-Vw-QCLmtSZo/XK97e-oXJ4I/AAAAAAAACNc/arMiEcmQYngncpt-Jdu1S3TBygDGRAy_QCLcBGAs/s1600/5656.jpg

      ردحذف
      الردود
      1. شكرا لك لك صديقي هذا اطراء نعتز به
        القائمة الموجودة في قالب المدونة الحالي سيتم نشرها قريبا
        يوجد أيضا هذه القائمة شبيه جدا بالقائمة
        https://blog.itheric.com/2018/10/Material-Design-Menu-Navigation.html
        أتمنى ان تنال اعجابك

        حذف
    2. سلام عليكم اخي ركبت القاءمة بكل الخطوات لكن لم يظهر شو الحل

      ردحذف
    3. هل الاضافة تعمل على جميع القوالب ام فقط قالب الفا ؟

      ردحذف

إرسال تعليق

يرجى الالتزام بسياسة التعليقات لدينا ليتم نشر تعليقك . وشكرا

المقال السابق المقال التالي