امروز میخوام با شما یه منوی کشویی به اشتراک بذارم. هدفمون اینه که تو سایتمون این منو جای کمتری رو اِشغال کنه،یک منوی بسیار زیبا با استفاده از قابلیت انیمیشن CSS. از این منو خیلی راحت میتونید در طرحهای ریسپانسیو ( واکنشگرا) خود استفاده کنید.

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

<div id="dl-menu" class="dl-menuwrapper">
    <button>مون</button>
    <ul class="dl-menu">
        <li>
            <a href="#">مردانه</a>
            <ul class="dl-submenu">
                <li class="dl-back"><a href="#">بازگشت</a></li>
                <li><a href="#">زیر منو ۱</a></li>
                <li><a href="#">زیر منو ۲</a></li>
                <li><a href="#">زیر منو ۳</a></li>
                <li>
                    <a href="#">زیر منو ۴</a>
                    <ul class="dl-submenu">
                        <li class="dl-back"><a href="#">بازگشت</a></li>
                        <li><a href="#">زیر منو ۱</a></li>
                        <li><a href="#">زیر منو ۲</a></li>
                        <li><a href="#">زیر منو ۳</a></li>
                    </ul>
                </li>
                <li><!-- ... --></li>
                <!-- ... -->
            </ul>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div><!-- /dl-menuwrapper -->

به ادامه مطلب بروید تا قسمت های بعدی را هم ببینید..

ادامه

۲ خرداد ۱۳۹۲
بالا