3 طرق إبداعية لتصميم التنقل العمودي في القائمة الفرعية

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

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

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

الآن ، دعنا نلقي نظرة على الأمثلة الثلاثة التي سنوضح لك كيفية إعادة إنشائها.

المثال الأول:

المثال الثاني:

المثال الثالث:

الخطوات العامة لتحقيق قائمة فرعية عمودية

اشترك في قناتنا على اليوتيوب

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

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

إضافة عناصر قائمة فرعية

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

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

ابحث عن معرّفات CSS الفردية لعناصر القائمة الفرعية الخاصة بك

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

انتقل إلى صفحتك الرئيسية ، وضع الماوس على القائمة وابدأ في فحص الكود. سترى معرف CSS يظهر في عنصر القائمة المحدد. انسخ كل معرف من معرّفات CSS في قائمة القائمة الفرعية واحفظها لوقت لاحق.

الآن بعد أن انتهيت من الخطوتين ، يمكنك الانتقال إلى إنشاء الأمثلة التي صنعناها.

قم بإنشاء المثال الأول

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

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

أضف كود CSS من خلال خيارات النسق

هناك طرق مختلفة لإضافة كود CSS إلى صفحتك. يمكنك ، على سبيل المثال ، إضافة كود CSS إلى صفحة واحدة على وجه الخصوص. يمكنك أيضًا إضافته إلى موقع الويب بالكامل من خلال "خيارات السمة" أو "مُخصص القوالب". في هذا المثال ، سنقوم ببساطة بإضافة الرمز من خلال "خيارات السمة". إذا كنت تستخدم لوحة معلومات WordPress الخاصة بك ، فانتقل إلى Divi> Theme Options> قم بالتمرير لأسفل في علامة التبويب العامة والصق الكود التالي في مربع CSS المخصص:

.nav li ul {
border: none !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(60,105,205,0.1) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(60,105,205,0.3) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(60,105,205,0.5) !important;
border-radius: 5px;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0px 1px 0 !important;
text-align: center !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 5% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\e089" !important;
}

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

قم بإنشاء المثال الثاني

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

أضف كود CSS لصفحة واحدة على وجه الخصوص

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

ابدأ بفتح أو إنشاء الصفحة حيث تريد إضافة تصميم القائمة الفرعية. الآن ، انقر فوق الزر التالي في الزاوية اليمنى من Divi builder:

في الشاشة التي تظهر ، انسخ والصق الأسطر التالية من تعليمات CSS البرمجية في حقل CSS المخصص:

.nav li ul {
border: none !important;
background: -webkit-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -o-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -moz-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
padding: 3px !important;
width: 80% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(255,255,255,0.6) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(255,255,255,0.4) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(255,255,255,0.2) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0 1px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 80% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
} 

استبدل عناصر القائمة الفرعية التالية في كود CSS بعناصرك:

قم بإنشاء المثال الثالث

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

أضف كود CSS لصفحة واحدة من خلال أداة تخصيص السمة

بالنسبة للمثال الأخير ، سنعرض لك كيفية إضافة كود CSS من خلال أداة تخصيص السمات. إذا كنت تستخدم لوحة معلومات WordPress الخاصة بك ، فانتقل إلى المظهر> تخصيص> CSS إضافي> وانسخ والصق سطور التعليمات البرمجية التالية:

.nav li ul {
border: none !important;
width: 95% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205211:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213:hover
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 5px 0 5px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 95% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}

خذ معرّفات CSS لعناصر القائمة الفرعية واستبدل تلك الموجودة في المثال بمعرّفاتك:

هذا كل شيء! يجب أن يبدو التصميم الآن كما في المثال الموضح أعلاه.

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!