الويب العربي - 23 قائمة جديدة يمكن استخدامها كقوائم علوية لموقعك

بسم الله الرحمن الرحيم

اليوم جايب لكم اخوتي الكرام مجموعة قوائم تصلح للقائمة العلوية في الموقع وجدتها في احد المواقع الاجنبية
وهذه صورة لبعض هذه القوائم

يمكن استبدال القائمة العلوية الموجودة في الهيدر مان او الهيدر القائمة الموجودة في الفوتر باحد هذه القوائم مع التعديل على مسميات هذه اقوائم وعددها وروابطها .

لدينا في المرفقات المحتويات التالية بعد فك الضغط عنها

قم برفع المجلد menu إلى المسار التالي
/www/styles/xxxx/images
xxxxx تعني اسم الإستاي الذي تعمل عليه

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

كود PHP:


		
			
<!-- INCLUDE BLOCK : header -->

<!-- INCLUDE BLOCK : footer -->

ثم نقوم بتعديل النموذج بعد لصق الكود

الان نفتح الرابط التالي لمشاهدة القوائم الجديدة لنختار احدها
http://www.xxxx.com/page.php?do=show&action=m

مع تغيير xxxx لعنوان موقعك الفعلي

الان الكود الذي اضفناه من الملف المفكرة يحتوي على سطر لإستدعاء خصائص القوائم تجده في اعلى النموذج m وهذا هو

كود PHP:


		
			
<link rel="stylesheet" href="{img_dir}/menu/style_Menu.css"/>

والبقي هو كود يتكرر 23 مرة مع تعديل متنوعة تخص القوائم 23 التي شاهدناها على الرابط السابق
مثلا انا سأختر Tab Menu 5 الذي شاهدته على الرابط السابق فقد اعجبتني الوانه وهو متناسق مع موقعي
الان ابحث داخل الكود في النوذج m عن العبارة التالية Tab Menu 5
ستجد الكود التالي

كود PHP:


		
			
<div id="tabs5">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

هذا الكود هو الخاص بالقائمة التي وقع إختياري عليها.
الان نريد ان نحذف بقية القوائم من هذا النوذج لذلك سنحذف باقي الكود ما عدى السطر الاول والثاني والاخير والكود الخاص tab menu5 الذي اخترناه
لذلك سيتعدل الكود في النوذج m ليصبح هاكذا

كود PHP:


		
			
<!-- INCLUDE BLOCK : header -->

<link rel="stylesheet" href="{img_dir}/menu/style_Menu.css"/>





<div id="tabs5">

  <ul>

    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>

    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>

    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>

    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

  </ul>

</div>

<br /><br />





<!-- INCLUDE BLOCK : footer -->

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

كود PHP:


		
			
<ul class="select">

<li class="current"><a href="./"><b>الرئيسية</b></a></li>

<li><a href="../vb"><b>المنتديات</b></a></li>

<!-- START BLOCK : topnavmodel -->

<li><a href="{hlmodel}"><b>{model}</b></a></li>

<!-- END BLOCK : topnavmodel -->

</ul>

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

بالنسبة لي انا فانا لا اعتمد على البلك السابق والمسئول عن عرض زر لكل موديل موجود عندي ومفعل لان عندي بعض الموديل مفعله ولكن لاريد ان اعرضها في القائمة العلوية .

لذلك سيكون الشرح التالي يعتمد على طريقتين
1- من لا يعتمد على البلك السابق
2- من يعتمد على البلوك السابق

---------1-------------- من لا يعتمد على البلوك السابق
قم بحذف الكود التالي كاملاً

كود PHP:


		
			
<ul class="select">

<li class="current"><a href="./"><b>الرئيسية</b></a></li>

<li><a href="../vb"><b>المنتديات</b></a></li>

<!-- START BLOCK : topnavmodel -->

<li><a href="{hlmodel}"><b>{model}</b></a></li>

<!-- END BLOCK : topnavmodel -->

</ul>

واضف مكانه محتوى النموذج m ما بدون السطر الاول والاخير

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

كود PHP:


		
			
   <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

سيصبح

كود PHP:


		
			
<li><a href="./" title="الصفحة الرئيسية"><span>الرئيسية</span></a></li>

وهاكذا بقية الاسطر

عذرا سأكمل الموضوع غذا
تبقى في الموضوع
1- أكمال تركيب القائمة على الهيدر مان بشكل كامل
2-التعديل على خصائص والوان و خطوط القائمة