وبنولوژی

امروزه تقریباً هر نمونه خوب از منوهای کشویی در وب، بر یک ساختار واحد و ساده HTML تکیه کرده است: فهرست‌های بدون ترتیب تودرتو (UL). بدون این ساختار ساخت منوی های کشویی پیچیده تر از قبل می بود. در این مقاله به یک راز ساده برای ساخت منوی کشویی خوب با CSS اشاره می‌کنیم.

البته این بدین معنی است که آگاهی از چگونگی ساخت یک لیست بدون ترتیب خوب برای این فرایند بی عیب بسیار حیاتی است. من بسیاری از نمونه های افرادی را دیده ام که سعی کرده بودند خودشان یک منوی کشویی بسازند، اما هنگام اجرا با خطا روبرو می‌شد که دلیل آن را نمی‌دانستند، و به نشانه نا امیدی دست از کار می‌کشیدند.

برای پی بردن به مشکل آنها اشکالی در CSS نبود، ولی یک خطا در ساختار لیست آنها بود. به همین جهت من گمان می‌کنم این فکر خوبی است که اشاره‌ای به این موضوع بکنیم که ساختار یک فهرست تودرتوی خوب به چه شکلی است و همچنین نمونه بد آن چطوری است!

یک نمونه منوی کشویی با CSS

ساختار درست

در اینجا ساختار یک فهرست بدون ترتیب خوب را مشاهده می‌کنید. یک پایه و اساس کامل برای یک فهرست کشویی.

 ۱: <ul id="navbar">

 ۲:     <li><a href="#">مورد ۱</a></li>

 ۳:     <li><a href="#">موردی با زیر منو</a>

 ۴:         <ul>

 ۵:             <li><a href="#">زیر منوی ۱</a></li>

 ۶:             <li><a href="#">زیر منوی ۲</a></li>

 ۷:         </ul>

 ۸:     </li>

 ۹:     <li><a href="#">مورد ۳</a>

 ۱۰: </ul>

قسمت اساسی در مثال بالا جایی است که فهرست بدون ترتیبِ تودرتو ما، به عنوان موردی از فهرست اصلی ظاهر می‌شود. فهرست بدون ترتیب داخلی در کنار مورد فهرستی که می‌خواهد به عنوان والد در منو عمل کند ظاهر می‌شود.

این یک نکته ریز خیلی حساس است. بدون این جزئیات کوچک، تعیین اینکه کدام زیرفهرست به کدامیک از موارد فهرست اصلی تعلق دارد بسیار سخت می‌شود.

ساختار نادرست

با یک مقایسه، این آن چیزی است که من در ۹۰% مواقع، زمانی که شخصی فهرستی دارد که درست کار نمی کند، مواجه هستم:

 ۱: <ul id="navbar">

 ۲:     <li><a href="#">مورد ۱</a></li>

 ۳:     <li><a href="#">موردی با زیرمنو</a></li>

 ۴:     <ul>

 ۵:         <li><a href="#">زیر منوی ۱</a></li>

 ۶:         <li><a href="#">زیر منوی ۲</a></li>

 ۷:     </ul>

 ۸:     <li><a href="#">مورد ۳</a>

 ۹: </ul>

این یک اختلاف خیلی کوچک است. تنها تغییر در اینجا آن فهرست بدون ترتیب درونی است که سریعاً بعد از یک مورد از فهرست اصلی که انتظار دارند زیرفهرست در زیر آن قرار گیرد، ظاهر شده است. عوض اینکه مستقیماً آن را داخل یک موردی قرار دهند که می‌خواهند در زیر آن ظاهر شود.

و بدیهی است که این یک تفاوت در CSS و JavaScript ما می سازد. عناصر در مکانی نیستند که css آنها را جستجو می‌کند، و به همین ترتیب در جاوا اسکریپت تعیین کردن آنها سخت تر است، و الی آخر.

Source: cssnewbie.com