المدونة قيد التطوير والتحديث,عند حدوث اي مشاكل يرجى اعلامنا على صفحة اتصل بنا ×

اضافة قائمة جانبية منبثقه لموقعك - 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;


}




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

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

ذات صلة


عـرض التعليقات
اخفاء التعليقات

يسعدنا تفاعلكم معنا,نرجو احترام الآداب العامة وعم نشر اي روابط اشهارية.
لإضافة كود قم بتحويله اولا بمحول الاكواد

إخلاء المسؤولية محول الأكواد ابلاغ عن رابط لايعمل