إنشاء شريط التنقل سريع الإستجابة مع قائمة الجوال html و css

سلام الله عليكم جميعا ، في هدا الدرس أقدم لكم أفضل طريقة لوضع شريط التنقل السريع ، على blogger بالهاتف فقط ، إنها عملية بسيطة جدا ، لاتتطلب منك أن تكون مبرمج ، المهم أن تكون على دراية ، الأن أصبحة جميع القوالب مع التصميم الجديد ، هذا ما يجعل لغة البرمجة سهلة ، سيكون عملنا اليوم مع إضافة شريط للتنقل في الأسفل ، سيكون متجاوب مع جميع الأجهزة ، ولا يؤثر على سرعة المدونة عند القياس في جوجل.

كيفية إنشاء قائمة تنقل سريعة الاستجابة للرموز السفلية باستخدام html على بلوجر

طريقة وضع الكوذ الأول css

إنتقل إلى القالب الخاص بك المضهر ، أنقر على تعديل html ، في أكواذ css ضع هذا الكوذ فوق وسم</head> ، لاتنسى إغلاق وسم <style> كما هو موضح.

<style>
 nav.mobile { display: flex; position: fixed; bottom: 0; width: 100%; padding: 0.8rem 0; background: #fefefe; border-top: 1px solid #ccc; z-index: 9999; margin: 0 auto; } .mobile { transition: 0.5s ease!important; } nav.mobile ul { list-style: none; display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0; justify-self: center; vertical-align: middle; } nav.mobile ul li { display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; flex-grow: 1; margin: 0; } nav.mobile ul li a { color: #222; font-size: inherit; display: var(--prP3M8); flex-direction: var(--mZSq9k); }nav.mobile ul li a svg{width: 24px; height: 24px; display: block;margin: 0 auto; } 
</style>

طريقة وضع الكوذ الثاني

هده أزرار التنقل الشريط ، عليك بالبحث على هذا الوسم <body/> ، ولصق هذا الكوذ فوقه مباشرة ثم إحفط القالب ونطر إلى النتيجة النهائية ، شيئ إحترافي و متجاوب ، ولكن هنالك إضافة مهمة جدا ، لتجعل الشريط يظهر أثناء التمرير للأسفل والأعلى إنتقل إلي القسم في الأسفل.

<nav class='mobile' id='ATnav'>
  <ul>
  <li><a href='#'><svg class='s-size' viewBox='0 0 24 24'>
    <path d='M15 13L11 9V12H2V14H11V17M22 12H20V21H4V16H6V19H18V11L12 5L7 10H4L12 2L22 12Z' fill='currentColor'/>
</svg><span>Home</span></a></li>
  <li><a href='#'><svg class='s-size' viewBox='0 0 24 24'>
    <path d='M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z' fill='currentColor'/>
</svg><span>Trending</span></a> </li>
    <li><a href='#'><svg class='s-size' viewBox='0 0 24 24'>
    <path d='M13.5,4A1.5,1.5 0 0,0 12,5.5A1.5,1.5 0 0,0 13.5,7A1.5,1.5 0 0,0 15,5.5A1.5,1.5 0 0,0 13.5,4M13.14,8.77C11.95,8.87 8.7,11.46 8.7,11.46C8.5,11.61 8.56,11.6 8.72,11.88C8.88,12.15 8.86,12.17 9.05,12.04C9.25,11.91 9.58,11.7 10.13,11.36C12.25,10 10.47,13.14 9.56,18.43C9.2,21.05 11.56,19.7 12.17,19.3C12.77,18.91 14.38,17.8 14.54,17.69C14.76,17.54 14.6,17.42 14.43,17.17C14.31,17 14.19,17.12 14.19,17.12C13.54,17.55 12.35,18.45 12.19,17.88C12,17.31 13.22,13.4 13.89,10.71C14,10.07 14.3,8.67 13.14,8.77Z' fill='currentColor'/>
</svg> <span>About</span></a></li>        
    <li><a href='#'><svg viewBox='0 0 24 24'>
    <path d='M17.5,7A5.5,5.5 0 0,1 23,12.5A5.5,5.5 0 0,1 17.5,18C15.79,18 14.27,17.22 13.26,16H10.74C9.73,17.22 8.21,18 6.5,18A5.5,5.5 0 0,1 1,12.5A5.5,5.5 0 0,1 6.5,7H17.5M6.5,9A3.5,3.5 0 0,0 3,12.5A3.5,3.5 0 0,0 6.5,16C7.9,16 9.1,15.18 9.66,14H14.34C14.9,15.18 16.1,16 17.5,16A3.5,3.5 0 0,0 21,12.5A3.5,3.5 0 0,0 17.5,9H6.5M5.75,10.25H7.25V11.75H8.75V13.25H7.25V14.75H5.75V13.25H4.25V11.75H5.75V10.25M16.75,12.5A1,1 0 0,1 17.75,13.5A1,1 0 0,1 16.75,14.5A1,1 0 0,1 15.75,13.5A1,1 0 0,1 16.75,12.5M18.75,10.5A1,1 0 0,1 19.75,11.5A1,1 0 0,1 18.75,12.5A1,1 0 0,1 17.75,11.5A1,1 0 0,1 18.75,10.5Z' fill='currentColor'/>
</svg><span>Games</span></a></li>   
    <li><a href='#'><svg viewBox='0 0 24 24'>
    <path d='M14,20H10V11L6.5,14.5L4.08,12.08L12,4.16L19.92,12.08L17.5,14.5L14,11V20Z' fill='currentColor'/>
</svg><span>Back-to-Top</span></a></li>
    </ul>
</nav>

طريقة وضع الكوذ الثالث javascript

الأن إبحث على هذا الوسم <body/> ضع فوقه هذا الكوذ ليصبح معك شريط تنقل سريع يضهر عنذ التمرير إلي الأعلى و الأسفل ، لكي يضهر معك تلقائيا ، حركة رائعة و محترفة ، كل هذا مع خاصية التجاوب ، لجميع الأجهزة ، لاتنسى غلق وسم <script> كما هوا موضح ، أتمنا أنكم إستفدتم شكرا لكم.

<script>
//<![CDATA[
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {   document.getElementById("ATnav").style.bottom = "0";
  } else {    document.getElementById("ATnav").style.bottom = "-80px";
  }
  prevScrollpos = currentScrollPos;
}
//]]>
</script>