أنت في : الرئيسية :: CSS :: موضوع: كيف تحول وصلاتك العادية إلى قائمة مميزة ؟

الدكتور نت

السلام عليكم

منذ العام 1999م و نحن نحاول الارتقاء بالمصمم و المطور العربي عبر إضافة دروس و مقالات و دروات لتساعده على إنشاء و تطوير موقعه . لو كنت أحد هؤلاء و أحببت مساعدتنايمكننا أن ندلك على عدد من الأمور التي يمكنك القيام بها لمساعدتنا اضغط هنا و أقرأ أكثر عن الموضوع ..

كيف تحول وصلاتك العادية إلى قائمة مميزة ؟

بقلم: الدكتور نت مواضيع أخرى لنفس المحرر الدكتور نت

◄ حول الموضوع

وصف الموضوع

باستخدام CSS سنحول قائمة منقطة عادية إلى قائمة مميزة تبدو كأزرار.

الأوسمة :
CSS| وصلات| تظليل| خط
في التصنيفات :CSS

أرسل لصديق طباعة أضف للمفضلة صل للموضوع تعقيب

كيف تحول وصلاتك العادية إلى قائمة مميزة

باستخدام CSS سنحول قائمة منقطة عادية إلى قائمة مميزة تبدو كأزرار.

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

سنحول هذه الوصلات

إلى

أولا : القائمة فارغة

هذه الوصلة العادية التي استخدمناها أولا للقائمة لتبدو كما تبدو في أول مثال في الأعلى اعطينا اسم تعريفي للقائمة و هو menu

 <p>&lt;div id=&quot;menu&quot;&gt;</p> <p>&lt;ul&gt;<br /> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;حول موقعنا&lt;/a&gt;&lt;/li&gt;</p> <p>&lt;li&gt;&lt;a href=&quot;#&quot;&gt;اتصل بنا&lt;/a&gt;&lt;/li&gt;</p> <p>&lt;li&gt;&lt;a href=&quot;#&quot;&gt;صور ووصلات&lt;/a&gt;&lt;/li&gt;</p> <p>&lt;/ul&gt;</p> <p>&lt;/div&gt;</p>

ثانيا :إزالة النقاط من القائمة المنقطة .

نضع القانون او المواصفات التالية للتعريف menu عن طريق وضع list-style :none نكون ازلنا النقاط من القائمة المنقطة ..أما باقي الأوامر للتأكد من أن النص سيظهر في وسط الصندوق

  <p>#menu ul { </p>   <p>list-style: none; </p>   <p>padding: 0; </p>   <p>margin: 0;</p>   <p>&nbsp;} </p>

ثالثا : الوصلات بجانب بعضها ..

سنحتاج لتعديل الوصلات في الأعلى لتبدو بجانب بعضها بدل أن تكون فوق بعضها

  <p>#menu li </p>  <p>{ </p>  <p>float: right;</p>  <p> margin: 0 0.15em;</p>   <p>padding: 0;</p> <p>text-align: center</p>   <p>} </p>

ملاحظة

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

 <p>&lt;div style=&quot;clear: both&quot;&gt;  </p><p>&lt;/div&gt;&nbsp;</p>

رابعا : إنشاء الصناديق .

سنضيف هذا الكود

 <p>#menu li a{ </p> <p>background: url(background.gif) #fff bottom left repeat-x;</p> <p>height: 2em;line-height: 2em;</p> <p>float:right;</p> <p>width: 9em;</p> <p>display: block;</p> <p>border: 0.1em solid #dcdce9;</p> <p>color: #0d2474;</p> <p>text-decoration: none;</p> <p>text-align: center;</p> }<p>&nbsp;</p>

في الحقيقة أهم خاصية استخدمناها هي خاصية الخلفية background فقد حددنا خلفية لكل زر بحيث يبدأ تكرار الصورة عن الأسفل bottom و اليسار left و يكرر على المحور السيني repeat-x و قد اخترنا هذا ليتناسب مع الصورة التي لدينا .
حددنا أرتفاع المربع ضعف ارتفاع النص باستخدام 2em فاستخدام em سيجعل حجم الصندوق يتغير مع جحم النص .
باستخدام line-height و اعطائه القيمة 2em لنظمن أن يكون النص يكون في وسط المربع .

و أخيرا سنضيف هذا الأمر

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

 <p>#menu<br /> {<br /> width:30em<br /> }</p> <p>سنحدد عرض معين للقائمة ..</p> <p>و الآن الكود كاملا </p> <p>#menu ul<br /> {<br /> list-style: none;<br /> padding: 0;<br /> margin: 0;<br /> }<br /> <br /> #menu li<br /> {<br /> float: left;<br /> margin: 0 0.15em;<br /> padding: 0;<br /> text-align: center<br /> }<br /> <br /> #menu li a<br /> {<br /> background: url(background.gif) #fff bottom left repeat-x;<br /> height: 2em;<br /> line-height: 2em;<br /> float: right;<br /> width: 9em;<br /> display: block;<br /> border: 0.1em solid #dcdce9;<br /> color: #0d2474;<br /> text-decoration: none;<br /> text-align: center;<br /> }<br /> <br /> /* Commented backslash hack hides rule from IE5-Mac */<br /> #menu li a<br /> {<br /> float: none<br /> }<br /> /* End IE5-Mac hack */<br /> <br /> #menu<br /> {<br /> width:30em<br /> } </p>

إضافات أخرى

يمكننا تطوير الكود كثيرا مثلا إضافةتغيير لون المربع عند مرور الفأرة عليه ..

 <p>#menu li a:hover</p><p>{</p><p>background: url(background2.gif) #fff bottom left repeat-x&nbsp;</p><p>height: 2em;</p><p>line-height: 2em</p><p> float: left;</p><p>width: 9em;</p><p>display: block;</p><p>border: 0.1em solid #dcdce9;</p><p>color: orange;</p><p>text-decoration: none;</p><p>text-align: center</p><p> }&nbsp;</p>