دسته ‌بندی آموزش ها
برچسب ها

راهنمای گام‌به‌گام ساخت منوی ناوبری متمرکز برای سایت‌های HTML چندصفحه‌ای

centralized navigation menu html guide
20 آبان 1403

چرا ناوبری متمرکز؟

در دنیای توسعه وب، همواره به دنبال راه‌هایی می‌گردیم تا کارمان را ساده‌تر کنیم و کاربری بهتری ارائه دهیم. یکی از روش‌های موثر برای مدیریت سایت‌های چندصفحه‌ای، استفاده از منوی ناوبری متمرکز است. این روش کمک می‌کند که تغییرات در منوی سایت، تنها در یک مکان اعمال شوند و در نتیجه، همه صفحات شما بلافاصله به‌روز خواهند شد.

چگونه منوی ناوبری متمرکز ایجاد کنیم؟

برای ایجاد منوی ناوبری یکسان در صفحات مختلف یک سایت، می‌توانیم از روش‌های مختلفی استفاده کنیم، اما یکی از ساده‌ترین روش‌ها استفاده از تگ‌های HTML جزیی مانند iframe یا روش‌های مدرن‌تر مانند جاوااسکریپت است. با این کار، تنها کافی است یک فایل HTML برای منو ایجاد کنید و آن را در هر صفحه وب‌سایت پیاده‌سازی کنید.

درک بهتر نحوه کارکرد

بیایید فرض کنیم شما یک فایل جداگانه برای منوی خود ایجاد کرده‌اید. برای مثال، فایلی به نام navbar.html. این فایل حاوی لیستی از لینک‌های ناوبری است. حال کافی است با کمک جاوااسکریپت، این فایل را در هر صفحه‌ای که نیاز دارید بارگذاری کنید. این روش، انعطاف‌پذیری بیشتری برای نگهداری و به‌روزرسانی منو فراهم می‌کند.

مثال عملی از منوی متمرکز

در این بخش، یک مثال عملی از نحوه بارگذاری منوی ناوبری متمرکز با استفاده از جاوااسکریپت ارائه خواهیم کرد. این روش ضمن سادگی، کارایی بالایی نیز دارد.


<!-- navbar.html -->
<nav>
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

<!-- Index.html -->
<div id="nav-placeholder"></div>

<script>
fetch('navbar.html')
    .then(response => response.text())
    .then(data => {
        document.getElementById('nav-placeholder').innerHTML = data;
    });
</script>

توضیح کد

<!-- navbar.html -->
این فایل HTML شامل ساختار منوی ناوبری است.
<nav></nav>
محل قرارگیری لیست‌های ناوبری در فایل منو.
<li>
هر لینک در این لیست به‌صورت یک آیتم از لیست در آمده است.
<!-- Index.html -->
فایلی که منو در آن نمایش داده می‌شود.
<div id="nav-placeholder"></div>
عنصری که منو در آن جای‌گذاری خواهد شد.
fetch('navbar.html')
فراخوانی فایل منوی HTML با استفاده از جاوااسکریپت.
.then(response => response.text())
تبدیل پاسخ HTTP به متن برای پردازش.
document.getElementById('nav-placeholder').innerHTML = data;
قرار دادن محتوای فایل منو در مکان مشخص شده در صفحه اصلی.

سوالات متداول

؟

چگونه می‌توانم منوی ناوبری خود را به‌روزرسانی کنم بدون اینکه به تمامی صفحات سایت بروم؟

؟

آیا می‌توانم از روش‌های دیگری برای بارگذاری منو استفاده کنم؟