ساخت مگا منو با استفاده از CSS

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

مگا منو معرفی شده در این مطلب با الهام از منوی سایت دیجی کالا ساخته شده و بصورت فایل HTML و CSS  ارائه می شود و قابل استفاده در پروژه های تحت وب می باشد. در مطالب بعدی  نحوه استفاده از این مگا منو رو در یک پروژه تحت  Asp.Net  آموزش داده می شود بطوری که منو بصورت داینامیک از روی اطلاعات دیتابیس  ساخته شود

دموی این مگا منو در اینجا قابل مشاهده است و فایل های آن را می توانید در انتهای مطلب دانلود کنید

شروع کار با تگ <ul> با کلاس nav  می باشد که کل محتوای مگا منو داخل ان قرار خواهد گرفت

<ul class="nav">
</ul>

برای هریک از عناوین اصلی منو از تگ <li>  استفاده میشود و عنوان ها  داخل تگ <a> نوشته می شوند

<ul class="nav">
       <li>
            <a href="#">کالای دیجیتال</a>
       </li>
       <li>
             <a href="#">لوازم خانگی</a>
       </li>
       <li>
             <a href="#">لوازم بهداشتی</a>
       </li>
        .
        .
        .
</ul>

تا اینجا لایه اول مگا منو ساخته شده است برای ساخت لایه دوم منو از تگ <div> با کلاس layer2 استفاده می شود که برای هر یک از عنوان های اصلی این کار تکرار می شود

<ul class="nav"> 
   <li>   
      <a href="#">کالای دیجیتال</a> 
      <div class="layer2">

      </div>
   </li> 
   <li>   
      <a href="#">لوازم خانگی</a> 
      <div class="layer2">

      </div>  
   </li> 
   <li>   
      <a href="#">لوازم بهداشتی</a>
      <div class="layer2">

      </div>   
   </li> 
    . 
    . 
    . 
</ul>

برای اینکه بتوان در لایه دوم چندین زیرگروه قرار داد ان را بااستفاده از تگ <div> دیگری با کلاس nav-column ستون بندی می کنیم  و با استفاده از تگ <ul> و <li> عنوان های لایه دوم را می نویسیم در واقع کار مرحله قبل را در اینجا مجددا تکرار می کنیم

<ul class="nav"> 
  <li> 
     <a href="#">کالای دیجیتال</a>
     <div class="layer2">
           <div class="nav-column">
                <ul class="nav inner">
                  <li>
                    <a href="#"> موبایل</a>
                  </li>
                  <li>
                    <a href="#"> تبلت</a>
                  </li>
                  .
                  .
                  .
                <ul>
           </div>
    </div> 
  </li> 
  <li> 
    <a href="#">لوازم خانگی</a>
    <div class="layer2">
           <div class="nav-column">
                <ul class="nav inner">
                  <li>
                    <a href="#"> لوازم برقی</a>
                  </li>
                  <li>
                    <a href="#"> لوازم پخت و پز</a>
                  </li>
                  .
                  .
                  .
               <ul>
           </div>
    </div> 
  </li> 
  <li> 
     <a href="#">لوازم بهداشتی</a>
     <div class="layer2">
           <div class="nav-column">
                <ul class="nav inner">
                  <li>
                    <a href="#"> ستون۱</a>
                  </li>
                  <li>
                    <a href="#"> ستون۲</a>
                  </li>
                  .
                  .
                  .
               </ul>
         </div>
     </div> 
  </li> 
  . 
  .
  . 
</ul>

در نهایت برای هریک از ستون های لایه دوم زیر منوها را مشابه روش قبل اضافه می کنیم

<ul class="nav"> 
  <li> 
     <a href="#">کالای دیجیتال</a>
     <div class="layer2">
           <div class="nav-column">
                <ul class="nav inner">
                  <li>
                    <a href="#"> موبایل</a>
                     <div style="background:url(images/mobile.png) no-repeat left;">
                                   <div class="nav-column  border">
                                                <span class="head">گوشی موبایل</span>
                                                <ul>
                                                    <li>
                                                        <a href="#"> Samsung</a>
                                                    </li>
                                                    <li>
                                                        <a href="#"> Apple</a>
                                                    </li>
                                                    <li>
                                                        <a href="#"> Huawei</a>
                                                    </li>
                                                    <li>
                                                        <a href="#"> HTC</a>
                                                    </li>
                                                    <li>
                                                        <a href="#"> موارد بیشتر</a>
                                                    </li>                                                    
                                                </ul>
                                 </div>
                                  <div class="nav-column  border">
                                                <span class="head">بر اساس سیستم عامل</span>
                                                <ul>
                                                      <li>
                                                          <a href="#">android</a>
                                                      </li>
                                                      <li>
                                                          <a href="#">IOS</a>
                                                      </li>
                                                      <li>
                                                          <a href="#">ویندوز فون</a>
                                                      </li>                                                      
                                                </ul>
                                                <span class="head">انواع گوشی</span>
                                                <ul>
                                                      <li>
                                                          <a href="#">تک سیم کارت</a>
                                                      </li>
                                                      <li>
                                                          <a href="#">دو سیم کارت</a>
                                                      </li>
                                                      <li>
                                                          <a href="#">گوشی های ۴G</a>
                                                      </li>
                                                      <li>
                                                          <a href="#">فبلت</a>
                                                      </li>
                                                </ul>
                                </div>
                    </div>
                  </li>
                  <li>
                    <a href="#"> تبلت</a>
                  </li>
                  .
                  .
                  .
                <ul>
           </div>
    </div> 
  </li> 
  
  . 
  .
  . 
</ul>

تا اینجا ساختار html منو ساخته شده است برای اینکه منو شکل و استایل مورد نظر ما رو داشته باشه باید از css استفاده بشه در فایل پیوست استایل های استفاده شده  قابل مشاهده هستند
دریافت فایل پیوست

1 Star2 Stars3 Stars4 Stars5 Stars (11 امتیاز, میانگین: 3٫73 از 5)
Loading...
34 دیدگاه

افزودن یک دیدگاه

نشانی ایمیل شما منتشر نخواهد شد.