السلام عليكم بينكم ماشاء الله منتدى رائع ومازده جمالا اعضائه بنشاطهم اود ان تقبلني صديق لكم اخوكم ايوب من المغرب
ان شاء الله في هدا الدرس سنصمم قائمة مسندلة بتقنية
css بدون استعمالjqeury وسنستعين بdisplay blockوnone لاضهار واخفاء القائمة و position rlolative و absoluteلتحكم بشكل القائمة واضهارها بدون مشاكل ادا كنت من محبي البساطة في التصميم بنتائج رائعة ان شاء الله ستجد ماتريد تابع لتعرف الطريقة واترككم مع الدرس

لتحميل القائمة للمعاينة

وهده نتيجة الدرس :

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

كود html:


  • ننشئ div نعطيه id=nav
  • نضع قائمة ul وبداخلها li وهدا سهل
  • نضع داخل li قائمة ul وهي القائمة الفرعية
  • واخيرا داخل القائمة الفرعية ul نضع li


وهده صورة توضيحية بما قمنا بيه :

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

وهدا هو الكود:

كود:
كود:
<div id="nav">  <ul>       <li><a href="http://ar-webdesign.blogspot.com/"> دروس</a>            <ul>                 <li><a href="http://ar-webdesign.blogspot.com/"> دروس css</a></li>                 <li><a href="http://ar-webdesign.blogspot.com/"> دروس html</a></li>            </ul>       </li>       <li><a href="http://ar-webdesign.blogspot.com/"> مدونة</a></li>       <li><a href="http://ar-webdesign.blogspot.com/"> برامج</a>            <ul>                  <li><a href="http://ar-webdesign.blogspot.com/"> برامج التصميم</a></li>                  <li><a href="http://ar-webdesign.blogspot.com/"> برامج الحماية</a></li>            </ul>       </li>       <li><a href="http://ar-webdesign.blogspot.com/"> من نحن</a></li>       <li><a href="http://ar-webdesign.blogspot.com/"> تعديل</a></li>  </ul> </div>

– لننتقل لكود css وشرحه خطوة خطوة :

كود:
كود:
#nav{   margin: 0 auto;    padding: 0;   height: 32;   width: 750px;   background: #3B5997; }
الآن قمنا بإعطاء nav ارتفاع القائمة 32px و عرضها 750px ولون الخلفية وجعلنا الابتعادين 0 مع توسيط القائمة ب auto

كود:
كود:
#nav ul {   margin: 0;   padding: 0;   list-style: none;   font-size: 13px;   font-family: tahoma; }


قمنا باعطاء القائمة الابتعادين 0 و ازلنا نقاط القائمة وحددنا نوع الخط وحجمه

كود:
كود:
#nav ul  li {   float: right;   position: relative; }

لقد قمنا بجعل عناصر القائمة افقية في سطر واحد وقمنا باعطاء الوضع relative لكي لا تحصل مشاكل عند مرور الماوس على الرابط ليكون تناسق مع القائمة الفرعية

كود:
كود:
#nav ul  li a {    color: #fff;    text-decoration: none;    padding: 8px;    background: #3B5997;    display: block;    width: 120px;    text-align: center; }


قمنا بإعطاء الرابط لون الأبيض و أزلنا الخط تحت الرابط والابتعاد الداخلي اعطيناه 8px وأعطينا للخلفية لون وأعطيناه display: block ; لكي تظهر الروابط بدون مشاكل وأعطيناها عرضا تم جعلنا الرابط في الوسط

كود:
كود:
#nav ul li ul{    display: none;    margin: 0;    padding: 0;    position: absolute;    background: #fff;    border: 1px solid #3B5997;    border-top: 1px solid #fff; }


اعطيناه display: none; لاخفاء القائمة الفرعية اي عدم ظهور والابتعادين جعلناها صفر واعطيناها الوضع absolute لكي تضهر تحت العنصر li بدون اي مشاكل أى ثابتة لا تتحرك واعطيناه اطار بسمك 1px وجعلناه solid واعطيناه نفس لون خلفية القائمة والباقي لايحتاج لشرح

كود:
كود:
#nav li:hover ul{     display: block; }

الان عند مرور الماوس على عنصر li ستضهر القائمة الفرعية ودالك باعطائه display: block;

كود:
كود:
#nav li ul li a{     color:#463C47;     background: #fff;     border-bottom: 1px solid #DCDDE1;     margin: 0;     padding: 8px;     text-align:right;     width: 120px; } #nav li ul li a:hover{     background: #EBF0F6;     color: #36599D; }

الان لانحتاج لشرح ما قمنا به في الخطوة الاخيرة لان كل اكواد واضحة ومشروحة

أرجو ان اكون قد اوصلت المعلومة كما يجب