ساخت یک منوی 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>

<ul>

<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>

</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;  
}

.drop ul ul {

display: none;

}

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

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

.drop ul li:hover ul {

display: block;

}

در این حالت بدون استفاده از هیچ کتابخانه ی اضافه ای توانستیم یک منوی 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;}

.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;}

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

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

آشنایی با اجزای تشکیل دهنده صفحات وب – طراحی سایت

تبدیل استایل Button به استایل Link

افزودن آدرس سايت به متن کپي شده

ساخت یک Scroll با استفاده از setInterval

CSS Reset چیست و تاثیر آن در نمایش وب سایت

تغییر ظاهر کنترل FileUpload

دیدگاهتان را بنویسید لغو پاسخ