الدرس الثاني : تصميم القائمة الرئيسيه

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

شيفرة (Code HTML) القائمة الرئيسيه هو :

                    <div class="container_menu">
                        <div class="menu-container">
                            <ul class="menu">
                                <li class="current"><a >Home</a></li>
                                <li ><a >Services</a></li>
                                <li><a >Products</a></li>
                                <li><a >Gallery</a></li>
                                <li><a >Portfolio</a></li>
                            </ul>
                        </div>
                    </div>

نحتاج في البدايه جعل القائمة قابله للتحريك بحيث يمكننا إدراجها بأي مكان داخل الترويسه ( Header ) لذلك نبدأ في الطبقة الرئيسيه (container_menu)

.container_menu{
   position: relative;
   top:100px;
   left:100px;
}

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

<li><a >Portfolio</a></li>

نستخدم لهذه المشكله نوع القائمة لاشيئ كما يلي

.container_menu ul{
  list-style: none;
  }

الآن نحتاج إلى وضع عناصر القائمة بجانب بعضها البعض ونستخدم لذلك (Float) إلى اليسار أو اليمين , بما أن اللغه المستخدمه إنجليزي نستخدم لليسار وبما ان العناصر تكون بين وسم ( li Tag) إذن التنسيق سيكون لهذا الوسم

.container_menu ul li{
  float:left;
  }

الآن نحتاج إلى محاذاه جانبيه (pagging , margen ) خارجيه وداخليه كما نحتاج لخلفيه للقائمة , كما نلاحظ أن العنصر الأول من القائمة له تنسيق (current) وهذا لتحديد العنصر , أي عند الضغط على الصفحة الرئيسيه يبقى الرابط الخاص بها محدد ليعلم المستخدم أنه في هذه الصفحة

التصميم للقائمة ككل يصبح كما يلي :

.container_menu {
    background-image: url("images/menu.png");
    height: 34px;
    left: 19px;
    padding-top: 14px;
    position: relative;
    top: 100px;
    width: 960px;
}
.container_menu ul{
  list-style: none;
	margin: 0;
  }
.container_menu ul li{
	float:left;
	list-style:none;
	padding: 0 10px;
	margin: 0 1px;
}
.container_menu ul li a{
	font-size: 16px;
	color: white;
}

معلومات هامه :

حجم صورة خلفيه القائمة هو 48 إرتفاع و 960 عرض (48xp height X 960px width)

الإزاحه الداخليه من الاعلى (padding-top) كانت 14 بكسل لذلك أنقصنا الإزاحة من إرتفاع (height) القائمة ليصبح 34

الدرس مرفق مع صورة القائمة

l2.rar

العودة إلى قائمة الدروس