أنماط التنقل المتجاوبة

لماذا تهم أنماط التنقل في التصميم المتجاوب

التنقل هو العنصر الأكثر أهمية في واجهة المستخدم على أي موقع ويب. هو الطريقة التي يكتشف بها المستخدمون المحتوى وينتقلون بين الأقسام ويعرفون موقعهم ضمن هيكل المعلومات في موقعك. على شاشة سطح مكتب كبيرة ذات مساحة أفقية واسعة، التنقل بسيط -- يمكنك عرض جميع الروابط في شريط أفقي. لكن على شاشة هاتف بعرض 320 بكسل، نفس الشريط الأفقي سيتجاوز الحدود أو يلتف بشكل غير منضبط أو يجعل الروابط صغيرة جداً للنقر. أنماط التنقل المتجاوبة تحل هذه المشكلة من خلال تكييف تخطيط التنقل وظهوره ونموذج التفاعل مع المساحة المتاحة على الشاشة.

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

قائمة الهامبرغر: المعيار على الهاتف المحمول

أصبحت قائمة الهامبرغر (المسماة بهذا الاسم بسبب خطوطها الأفقية الثلاثة التي تشبه الهامبرغر) المعيار الفعلي للتنقل على الهاتف المحمول. عندما تكون الشاشة ضيقة جداً لشريط تنقل كامل، تُخفى الروابط خلف زر تبديل. النقر على الزر يكشف التنقل، عادةً كقائمة عمودية تنزلق من الجانب أو تتوسع للأسفل من الرأس.

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

<header class="site-header">
    <a href="/" class="logo">موقعي</a>
    <button class="nav-toggle" aria-expanded="false" aria-controls="main-nav">
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
        <span class="sr-only">القائمة</span>
    </button>
    <nav id="main-nav" class="main-nav" aria-label="التنقل الرئيسي">
        <ul class="nav-list">
            <li><a href="/home">الرئيسية</a></li>
            <li><a href="/about">من نحن</a></li>
            <li><a href="/services">الخدمات</a></li>
            <li><a href="/portfolio">الأعمال</a></li>
            <li><a href="/contact">اتصل بنا</a></li>
        </ul>
    </nav>
</header>

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    position: relative;
}

.nav-toggle {
    display: none; /* مخفي على سطح المكتب */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background-color: var(--text-dark);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-list {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list a {
    text-decoration: none;
    color: var(--text-dark);
    padding: 0.5rem;
}

/* أنماط الهاتف المحمول */
@media (max-width: 768px) {
    .nav-toggle {
        display: block;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--bg-white);
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 1000;
        padding-top: 5rem;
    }

    .main-nav.is-open {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
    }

    .nav-list a {
        display: block;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--border-light);
    }

    /* تحريك الهامبرغر إلى شكل X */
    .nav-toggle.is-active .hamburger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle.is-active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.is-active .hamburger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

قائمة هامبرغر بـ CSS فقط: خدعة مربع الاختيار

واحدة من أكثر تقنيات CSS أناقةً هي خدعة مربع الاختيار -- طريقة لإنشاء قائمة هامبرغر قابلة للتبديل بدون أي JavaScript. تستخدم التقنية إدخال مربع اختيار مخفي والفئة الزائفة :checked في CSS لتبديل ظهور التنقل. عندما ينقر المستخدم على التسمية (المنسقة كأيقونة هامبرغر)، فإنها تحدد أو تلغي تحديد مربع الاختيار المخفي، ومحددات الأشقاء المجاورة أو العامة تطبق أنماط الفتح أو الإغلاق.

هذا النهج مفيد لقوائم التنقل البسيطة حيث تريد تجنب الاعتماد على JavaScript تماماً. يعمل في جميع المتصفحات الحديثة ويوفر قائمة هاتف محمول وظيفية بـ CSS خالص. ومع ذلك، له قيود من حيث إمكانية الوصول -- تحتاج إلى إدارة سمات ARIA وحالات التركيز بعناية، مما يتطلب عادةً كمية صغيرة من JavaScript على أي حال.

/* هيكل HTML:
   <input type="checkbox" id="nav-toggle" class="nav-checkbox" />
   <label for="nav-toggle" class="nav-toggle-label">
       <span></span>
   </label>
   <nav class="main-nav">...</nav>
*/

.nav-checkbox {
    display: none; /* إخفاء مربع الاختيار الفعلي */
}

.nav-toggle-label {
    display: none; /* مخفي على سطح المكتب */
    cursor: pointer;
    padding: 0.5rem;
    position: relative;
    z-index: 1001;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--text-dark);
    position: relative;
    transition: all 0.3s ease;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
    content: "";
    position: absolute;
}

.nav-toggle-label span::before {
    top: -8px;
}

.nav-toggle-label span::after {
    top: 8px;
}

@media (max-width: 768px) {
    .nav-toggle-label {
        display: block;
    }

    .main-nav {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        background: var(--bg-white);
        transition: left 0.3s ease;
        padding-top: 5rem;
        z-index: 1000;
    }

    /* عند تحديد مربع الاختيار، أظهر التنقل */
    .nav-checkbox:checked ~ .main-nav {
        left: 0;
    }

    /* تحريك الهامبرغر إلى X عند التحديد */
    .nav-checkbox:checked ~ .nav-toggle-label span {
        background: transparent;
    }

    .nav-checkbox:checked ~ .nav-toggle-label span::before {
        transform: rotate(45deg);
        top: 0;
    }

    .nav-checkbox:checked ~ .nav-toggle-label span::after {
        transform: rotate(-45deg);
        top: 0;
    }
}

التنقل خارج اللوحة

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

يوفر نمط التنقل خارج اللوحة مساحة واسعة للتنقل يمكن أن تستوعب هياكل قوائم معقدة وملفات تعريف المستخدمين وأشرطة البحث وعناصر أخرى لا تتسع في قائمة منسدلة بسيطة. يخلق فصلاً بصرياً واضحاً بين التنقل والمحتوى.

.page-wrapper {
    transition: transform 0.3s ease;
    min-height: 100vh;
}

.off-canvas-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: var(--bg-white);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    padding: 2rem 0;
}

/* التراكب خلف التنقل */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}

/* عندما يكون التنقل مفتوحاً */
.off-canvas-nav.is-open {
    transform: translateX(0);
}

.off-canvas-nav.is-open ~ .nav-overlay {
    opacity: 1;
    visibility: visible;
}

/* اختياري: دفع محتوى الصفحة */
.off-canvas-nav.is-open ~ .page-wrapper {
    transform: translateX(280px);
}

/* عناصر التنقل داخل اللوحة الخارجية */
.off-canvas-nav .nav-section {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.off-canvas-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    color: var(--text-dark);
    text-decoration: none;
}

.off-canvas-nav .nav-link:hover,
.off-canvas-nav .nav-link:focus {
    color: var(--primary);
}

نمط تنقل الأولوية+

نمط تنقل الأولوية+ (يسمى أيضاً نمط "المزيد") هو نهج ذكي يعرض أكبر عدد ممكن من عناصر التنقل التي تتسع في المساحة المتاحة ويطوي العناصر المتبقية في قائمة منسدلة "المزيد". مع تقلص منفذ العرض، تنتقل العناصر تدريجياً من الشريط المرئي إلى قائمة التجاوز. ومع توسعه، تعود العناصر إلى الشريط الرئيسي. هذا النمط فعال بشكل خاص لأنه يزيد عناصر التنقل المرئية عند كل عرض شاشة، على عكس قائمة الهامبرغر التي تخفي كل شيء دفعة واحدة.

.priority-nav {
    display: flex;
    align-items: center;
    overflow: hidden; /* إخفاء العناصر المتجاوزة */
    position: relative;
}

.priority-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    flex-wrap: nowrap;
}

.priority-nav-list li {
    flex-shrink: 0; /* منع العناصر من الانكماش */
}

.priority-nav-list a {
    display: block;
    padding: 1rem 1.25rem;
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-dark);
}

/* زر "المزيد" وقائمته المنسدلة */
.more-button {
    flex-shrink: 0;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    display: none; /* مخفي حتى يفعله JavaScript */
}

.more-button.is-visible {
    display: block;
}

.more-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 100;
}

.more-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

التنقل السفلي لتطبيقات الهاتف المحمول

أشرطة التنقل السفلية (أشرطة التبويب) هي نمط مستعار من تطبيقات الهاتف المحمول الأصلية يضع التنقل الرئيسي في أسفل الشاشة. هذا متفوق من الناحية المريحة للاستخدام بيد واحدة لأن أسفل الشاشة في متناول الإبهام بسهولة، على عكس الأعلى حيث تعيش قوائم الهامبرغر عادةً. تنصح إرشادات التصميم المادي من Google باستخدام التنقل السفلي لتطبيقات الهاتف المحمول ذات ثلاث إلى خمس وجهات رئيسية.

.bottom-nav {
    display: none; /* مخفي على سطح المكتب */
}

@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-white);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: 0.5rem 0;
        /* مراعاة المنطقة الآمنة على الهواتف ذات الشقوق */
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem;
        text-decoration: none;
        color: var(--text-light);
        font-size: 0.7rem;
        transition: color 0.2s ease;
    }

    .bottom-nav-item.is-active {
        color: var(--primary);
    }

    .bottom-nav-item .icon {
        font-size: 1.25rem;
    }

    /* التأكد من عدم اختفاء محتوى الصفحة خلف التنقل السفلي */
    body {
        padding-bottom: 70px;
    }
}

التنقل اللاصق عند التمرير

التنقل اللاصق يبقي الرأس ثابتاً في أعلى منفذ العرض أثناء تمرير المستخدم للأسفل في الصفحة. هذا يضمن أن التنقل متاح دائماً دون الحاجة للتمرير للأعلى. خاصية position: sticky في CSS تجعل هذا سهل التنفيذ للغاية، على الرغم من وجود أنماط متقدمة مثل إخفاء التنقل عند التمرير للأسفل وإظهاره عند التمرير للأعلى تتطلب JavaScript.

/* رأس لاصق بسيط */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-white);
    transition: box-shadow 0.3s ease, padding 0.3s ease;
}

/* إضافة ظل عند التمرير (عبر JavaScript يضيف فئة) */
.site-header.is-scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* نمط الإخفاء عند التمرير للأسفل والإظهار عند التمرير للأعلى */
.site-header.is-hidden {
    transform: translateY(-100%);
}

.site-header {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* الوضع المضغوط عند التمرير -- تقليص الشعار والحشو */
.site-header .logo {
    height: 40px;
    transition: height 0.3s ease;
}

.site-header.is-scrolled .logo {
    height: 30px;
}

التنقل بفتات الخبز على الشاشات الصغيرة

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

/* فتات الخبز الكاملة على سطح المكتب */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 1rem 0;
    font-size: 0.875rem;
    gap: 0;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li + li::before {
    content: "/";
    margin: 0 0.5rem;
    color: var(--text-light);
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
}

/* الهاتف: نهج التمرير الأفقي */
@media (max-width: 768px) {
    .breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.5rem;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .breadcrumb li {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

تنقل التبويب مع التمرير الأفقي على الهاتف المحمول

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

.tab-nav {
    display: flex;
    border-bottom: 2px solid var(--border-light);
    position: relative;
}

.tab-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.tab-button {
    flex: 1;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-light);
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.tab-button.is-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* الهاتف المحمول: تبويبات قابلة للتمرير */
@media (max-width: 768px) {
    .tab-nav-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .tab-nav-list::-webkit-scrollbar {
        display: none;
    }

    .tab-button {
        flex: none;
        padding: 0.75rem 1.25rem;
        scroll-snap-align: start;
    }

    /* تلاشي الحواف للإشارة إلى إمكانية التمرير */
    .tab-nav::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to right, transparent, var(--bg-white));
        pointer-events: none;
    }
}

القوائم الضخمة على الهاتف المحمول

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

/* القائمة الضخمة على سطح المكتب */
.mega-menu-item {
    position: relative;
}

.mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    max-width: 1200px;
    background: var(--bg-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.mega-menu-item:hover .mega-panel,
.mega-menu-item:focus-within .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* الهاتف: تحويل إلى أكورديون */
@media (max-width: 768px) {
    .mega-panel {
        position: static;
        display: none;
        grid-template-columns: 1fr;
        box-shadow: none;
        padding: 0 0 0 1rem;
        gap: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: var(--bg-light);
    }

    .mega-menu-item.is-expanded .mega-panel {
        display: block;
    }

    .mega-trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 1rem 1.5rem;
        background: none;
        border: none;
        border-bottom: 1px solid var(--border-light);
        cursor: pointer;
    }

    .mega-trigger::after {
        content: "+";
        font-size: 1.25rem;
        transition: transform 0.2s ease;
    }

    .mega-menu-item.is-expanded .mega-trigger::after {
        content: "-";
    }
}

التنقل القابل للوصول: ARIA ولوحة المفاتيح وإدارة التركيز

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

سمات ARIA لقوائم التبديل

عندما يكون لديك زر هامبرغر يبدل ظهور التنقل، يجب أن تتواصل الحالة مع التقنيات المساعدة باستخدام سمات ARIA. سمة aria-expanded على زر التبديل تخبر قارئات الشاشة ما إذا كانت القائمة مفتوحة أو مغلقة حالياً. سمة aria-controls تنشئ العلاقة بين الزر والتنقل الذي يتحكم فيه.

/* فئة للقراء فقط */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* أنماط التركيز للتنقل بلوحة المفاتيح */
.nav-list a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.nav-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

التنقل بلوحة المفاتيح وحصر التركيز

عندما يكون تنقل خارج اللوحة أو التراكب مفتوحاً، يجب حصر التركيز داخله حتى لا يتمكن مستخدمو لوحة المفاتيح من الانتقال بالتبويب إلى العناصر المخفية خلف التراكب. عند إغلاق القائمة، يجب أن يعود التركيز إلى زر التبديل. مفتاح Escape يجب أن يغلق القائمة.

/* عندما يكون التنقل مغلقاً على الهاتف، امنع التركيز على العناصر المخفية */
@media (max-width: 768px) {
    .main-nav:not(.is-open) {
        visibility: hidden;
    }

    .main-nav.is-open {
        visibility: visible;
    }
}

/* رابط تخطي للمحتوى الرئيسي -- مرئي عند التركيز فقط */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 4px 4px;
    z-index: 9999;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}

الانتقالات لفتح وإغلاق القائمة

الانتقالات السلسة تجعل التنقل يبدو مصقولاً ومتجاوباً. بدون الانتقالات، تفتح القوائم وتغلق فجأة، مما يمكن أن يكون مزعجاً ومربكاً. انتقال مصمم بعناية يعطي المستخدمين ملاحظات بصرية حول ما تغير وأين ينظرون. حافظ على انتقالات القائمة قصيرة -- بين 200 و 300 ملي ثانية.

/* انزلاق من اليمين */
.slide-right {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-right.is-open {
    transform: translateX(0);
}

/* انزلاق من الأعلى مع تلاشي */
.slide-down {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.slide-down.is-open {
    opacity: 1;
    transform: translateY(0);
}

/* تكبير من نقطة */
.scale-in {
    opacity: 0;
    transform: scale(0.95);
    transform-origin: top right;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.scale-in.is-open {
    opacity: 1;
    transform: scale(1);
}

/* تحريك متتالي للعناصر الفرعية */
.stagger-nav .nav-link {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.stagger-nav.is-open .nav-link:nth-child(1) { transition-delay: 0.05s; }
.stagger-nav.is-open .nav-link:nth-child(2) { transition-delay: 0.1s; }
.stagger-nav.is-open .nav-link:nth-child(3) { transition-delay: 0.15s; }
.stagger-nav.is-open .nav-link:nth-child(4) { transition-delay: 0.2s; }
.stagger-nav.is-open .nav-link:nth-child(5) { transition-delay: 0.25s; }

.stagger-nav.is-open .nav-link {
    opacity: 1;
    transform: translateX(0);
}

التنفيذ الكامل: نظام تنقل متجاوب

دعونا نجمع كل شيء معاً في نظام تنقل متجاوب كامل جاهز للإنتاج. هذا المثال يجمع بين تنقل أفقي لسطح المكتب وقائمة هامبرغر منزلقة للهاتف المحمول ورأس لاصق وسمات ARIA مناسبة وأنماط إدارة التركيز وانتقالات سلسة.

/* ===== إعادة تعيين التنقل الأساسي ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 64px;
}

/* ===== تنقل سطح المكتب ===== */
.main-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
}

.main-nav-list a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--text-dark);
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}

.main-nav-list a:hover {
    background: var(--bg-light);
}

.main-nav-list a.is-active {
    color: var(--primary);
    background: var(--primary-light);
}

.main-nav-list a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ===== زر الهامبرغر (مخفي على سطح المكتب) ===== */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.hamburger-icon {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-dark);
    position: relative;
    transition: background 0.3s ease;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--text-dark);
    transition: transform 0.3s ease;
}

.hamburger-icon::before { top: -7px; }
.hamburger-icon::after { top: 7px; }

/* تحريك X */
.hamburger-btn[aria-expanded="true"] .hamburger-icon {
    background: transparent;
}

.hamburger-btn[aria-expanded="true"] .hamburger-icon::before {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-btn[aria-expanded="true"] .hamburger-icon::after {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ===== التنقل على الهاتف المحمول ===== */
@media (max-width: 768px) {
    .hamburger-btn {
        display: block;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: min(320px, 85vw);
        height: 100vh;
        height: 100dvh;
        background: var(--bg-white);
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.35s ease;
        visibility: hidden;
        z-index: 1000;
        overflow-y: auto;
        padding: 5rem 0 2rem;
    }

    .main-nav.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .main-nav-list {
        flex-direction: column;
        gap: 0;
    }

    .main-nav-list a {
        padding: 1rem 1.5rem;
        border-radius: 0;
        border-bottom: 1px solid var(--border-light);
        font-size: 1.1rem;
    }

    /* التراكب */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .nav-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }
}

/* ===== رابط التخطي ===== */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: var(--primary);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 6px 6px;
    z-index: 9999;
    font-weight: 600;
    text-decoration: none;
}

.skip-to-content:focus {
    top: 0;
}