ایجاد لیست های پایین افتادنی (Drop-Down list) زیبا با CSS

باسلام

امروز قصد دارم شما را با روش ایجاد لیست های پایین افتادنی  ( Drop-Down list ) با استایل های زیبا و ظاهری متفاوت آشنا کنم. برای ایجاد این لیست که دموی آنرا میتوانید از اینجا مشاهده کنید از کدهای CSS استفاده شده و شما هیچ نیازی به استفاده از javascript و یا JQuery ندارید. همانطور که میدانید لیست های دراپ داون ( Drop-Down list ) که با تگ <select> ایجاد میشود ظاهر جذابی ندارند ولی در اینجا سه مدل لیست برای شما آماده شده که استایل دهی نسبتا متفاوتی دارند و شما خودتان میتوانید با مشاهده کد ها و توضیحات نوشته شده جلوی هر خط از کدهای css و آشنایی مختصر با CSS استایل های مورد نظر خود را اعمال کنید اگر هم استایلی مد نظرتون بود و برای درست کردن آن مشکلی داشتین در قسمت نظرات بنویسید تا در حد امکان کمکتون کنم.

ابتدا از کدهای HTML زیر برای ایجاد لیست پایین افتادنی ( Drop-Down list ) با استایل پیش فرض استفاده کنید.

<form class="demo">
    <select>
        <option>CSS</option>
        <option>HTML </option>
        <option>HTML 5</option>
    </select>
    <select class="balck">
        <option>CSS</option>
        <option>HTML </option>
        <option>HTML 5</option>
    </select>
<a href="http://www.tarahsite.net" style="display:none">.</a>
    <select class="option3">
        <option>CSS</option>
        <option>HTML </option>
        <option>HTML 5</option>
    </select>
</form>

 

سپس برای ایجاد ظاهری متفاوت و استایل دهی از کدهای css زیر استفاده کنید.

 

<style>
    .demo select {
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;  /*Removes default chrome and safari style*/
        -moz-appearance: none; /* Removes Default Firefox style*/
        background: #0088cc url(img/select-arrow.png) no-repeat 90% center;
        width: 100px; /*Width of select dropdown to give space for arrow image*/
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
        color: #FFF;
        border-radius: 15px;
        padding: 5px;
        box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
    }
    .demo select.balck {
        background-color: #000;
    }
    .demo select.option3 {
        border-radius: 10px 0;
    }
</style>

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

این آموزش بر روی مرورگرهای Firefox, Chrome, Safari, Opera تست شده و به خوبی عمل کرده است.

برای دانلود کدها به صورت یکجا اینجا کلیک کنید.

منبع: htmllion

موفق باشید.

 

برای دانلود فایل واردشوید
ورود ثبت نام
برچسب ها :

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.