الأثير https://blog.itheric.com/2019/02/menu.html

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


}




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

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

شارك المقال:

تفاعل:

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

اشترك بنشرتنا البريدية

تنبيه