تکمیل CSS و جاوا اسکریپت برای منو (Navigation bar)

نیاز به CSS و جاوا اسکریپت برای لیست کشویی دارم. توضیحات و عکس می نویسم و عکس هم ضمیمه میکنم. یک لیست کشویی یا آکاردئونی تو در تو از ul و li دارم که از دیتابیس پر شده اند. در ابتدا، لیست بسته است و فقط اولین آیتم های والد قابل رؤیت هستند. 1. می خواهم وقتی روی آیتم کلیک می شود، اگر data-url آن li خالی نبود، صفحه ای را با آدرسی که در data-url نوشته شده، در iframe با نام contentFrame بارگزاری کند. در غیر این صورت، لیست کشویی، باز یا بسته شود و فرزندان (زیرمجموعه های) آیتم را قابل نمایش یا غیرقابل نمایش کند. از جاوا اسکریپت استفاده شود. تکمیل این بخش، به قسمت‌های بعد هم وابسته است و باید درون این تابع، توابع دیگری هم فراخوانی شوند. بعدا توضیح خواهم داد. 1.1. کنار آیتم‌های والد یک آیکون به شکل + باشد. وقتی لیست باز می‌شود، آیکون، تبدیل به _ شود. 2. بعد از اتمام مرحله قبل، قصد دارم یک تابع جاوا اسکریپت را در code behind در وب فرم C#، فراخوانی کنم و متن data-url یکی از liها را به عنوان ورودی به آن تابع بدهم. کار آن تابع این است که به دنبال آن li بگردد که متن data-url آن، همان مقدار داده شده در ورودی تابع است. در واقع، قصد دارم وقتی شخص، پیام خوانده نشده دارد، جلوی آن آیتم یک آیکون بگذارم. 2.1. قسمت مهم اینجاست: حالا در انتهای متن آن li یافت شده، یک آیکون گرد به رنگ سفید نمایش دهد. موضوع مهم اینجاست که اگر آن li اصلی مورد نظر که آیکون کنارش قرار گرفته، باز نیست و قابل رؤیت نیست، در لیست به دنبال والد آن li بگردد و آیکون را بعد از متنِ آن والد، بگذارد. و اگر خود والد هم قابل رؤیت نبود، باز به دنبال والدِ والد بگردد و آیکون را بگذارد و باز تکرار شود تا زمانی که یک والد قابل رؤیت باشد. و سپس بعد از متن li، آیکون را بگذارد. حالا اگر والدهای غیر قابل رؤیت هم آیکون دارد، برای من مهم نیست. اما فکر میکنم، باید آیکون از والدهای زیرین حذف شود. 2.2. حال لازم است اصلاحاتی روی تابع اول (کلیک) صورت گیرد. در زمانی که روی یک آیتم کلیک می شود، لیست باز یا بسته می شود. اگر data-url در li کلیک شده، خالی است، و در فرزندان سطوح پایین تر، یکی از liها دارای آیکون است، باید قسمت قبل دوباره فراخوانی شود تا بررسی‌های لازم صورت گیرد: صفحه راست چین است. همه کدها فقط در جاوا اسکریپت باشد تا در فایل جداگانه به نام menubar.js بگذارم. از JQuery استفاده نشود. فراخوانی همه این توابع، از code behind انجام می شود. کد قسمت code behind را هم بده. توضیحات هر خط کد در انتهای خط داده شود. احتمالا جایگذاری رو خودم بتونم انجام بدم. اما اگه نتونستم، دسترسی انی دسک میدم که برام انجام بدین.