ساخت یک منوی drop down با css

یکی از نیازهای بیشتر پروزه های وب داشتن منوهایی با تعدادی زیر شاخه می باشد . امروزه با گسترش کتابخانه های زیادی از جمله جکوری و... ساختن یک منو بسیار آسان و نمونه های آماده خیلی زیادی در وب به صورت رایگان قرار داد . اما بیشتر نمونه منوها،اسلایدر ها ، پلاگین ها و ... به صورت بهینه نوشته نشده اند .منظور از بهینه در اینجا هم فایل ها css و هم فایل های مربوط به جکوری می باشد . هدف سایت های مختلف از قرار دادن پلاگین ها و منوها و ... افزایش بازید وب سایت  و مواردی از این قبیل می باشد .در صورتی که حداقل با مفاهیم و اصول اولیه css آشنایی دارید پیشنهاد می کنم اصلا از نمونه های آماده استفاده  نکنید .همانطور که گفتیم فایل های قرار گرفته به صورت بهینه ننوشته شده اند و اکثرا دارای حجم های زیادی می باشند و همین مورد می تواند باعث افت سرعت بارگذاری وب سایت شما شود . با دانستن حداقل اصول اولیه css و html می توانید بدون استفاده از کتابخانه هایی مثل جکوری یک منوی drop down بسازید .

در این مقاله قصد داریم نحوه ساخت یک منوی دارای زیر شاخه بدون استفاده از هیچ کتابخانه ای و فقط با استفاده از css بیان کنیم .

برای شروع ابتدا یک فایل جدید با پسوند html. ایجاد کنید و تگ های زیر را درون تگ body آن قرار دهید :

<div class="drop">  
            <ul>  
                <li><a href="www@example.com">Home</a></li>  
                <li><a href="www@example.com">About us</a>  
                    <ul>  
                        <li><a href="www@example.com">Contect</a></li>  
                        <li><a href="www@example.com">Features</a></li>  
                        <li><a href="www@example.com">About Campus</a></li>  
                        <li><a href="www@example.com">Demo</a></li>  
                    </ul>  
                </li>  
                <li><a href="www@example.com">Contect</a>  
                    <ul>  
                        <li><a href="www@example.com">Director</a></li>  
                        <li><a href="www@example.com">Principal</a></li>  
                        <li><a href="www@example.com">Management</a></li>  
                    </ul>  
                </li>  
            </ul>  
        </div>  

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

ابتدا برای مخفی کردن تمامی زیر منوهای داخلی دستور css زیر را منویسیم :

.drop ul ul {  
    display: none;  
}   

  و برای اینکه با قرار گرفتن اشاره گر ماوس بر روی المان های دارای زیر منو ، منوی داخلی را به نمایش در بیاوریم کد css زیر را قرار می دهیم :

.drop ul li:hover ul {  
    display: block;  
}  

HTML-and-CSS-code-of-drop-down-list

در این حالت بدون استفاده از هیچ کتابخانه ی اضافه ای توانستیم یک منوی drop down را بسازیم .البته برای زیباتر کردن آن می توانید بر روی css آن کار کنید

کدهای css زیر مربوط به عکس فوق می باشد . اما مهمترین قسمت آن مواردی بود که توضیح داده شد .

.drop ul ul {  
    display: none;  
}  
  
.drop ul li:hover ul {  
    display: block;  
}  
  
.drop ul li {  
    float: left;  
}  
  
    .drop ul li a {  
        color:#ffffff;  
        display: block;  
        padding: 10px 10px;  
        position: relative;  
        text-decoration: none;  
    }  
  
.drop ul ul li {  
    float: none;  
    position: relative;  
    border-top: 1px solid#000000;  
    border-bottom: 1px solid#000000;  
}  
  
.drop ul li {  
    position: relative;  
}  
  
.drop ul ul {  
    top:38px;  
    position: absolute;  
    background:#000000;  
    border-radius: 0px;  
    padding: 0;  
}  
  
.drop ul {  
    list-style: none;  
    position: relative;  
    display: inline-table;  
    background: #000000;  
    padding: 0 20px;  
    border-radius:10px;  
     
}  
.drop ul ul li a {  
            padding: 10px 10px;  
            color: #fff;  
            width:100px;  
            text-align:center;  
        }     
.drop ul ul li a:hover {background:#cfc5c5;  
                    color:#000000;  
}  
.drop ul li:hover {  
    background:#cfc5c5;  
    color:#000000;  
}  
.drop ul li a:hover {color:#000000;}  


توسط : عثمان رحیمی  3 ماه قبل ، یکشنبه 6 مهر 1393 ساعت 00:40  0  2142

نظر شما برای ما مهم است و به ما در بهبود سایت کمک میکند.


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط