منوی آیکونی بسیار ساده، زیبا و شناور، که اندازه آن با سایز صفحه تغییر می کند.

مشاهده دموی اسکریپتدریافت اسکریپت

قسمت html :

<ul class="cbp-vimenu">
    <li><a href="#" class="icon-logo">Logo</a></li>
    <li><a href="#" class="icon-archive">Archive</a></li>
    <li><a href="#" class="icon-search">Search</a></li>
    <li class="cbp-vicurrent"><a href="#" class="icon-pencil">Pencil</a></li>
    <li><a href="#" class="icon-location">Location</a></li>
    <li><a href="#" class="icon-images">Images</a></li>
    <li><a href="#" class="icon-download">Download</a></li>
</ul>

قسمت css در ادامه مطلب..

ادامه

۱۶ اسفند ۱۳۹۱

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

مشاهده دموی اسکریپتدریافت اسکریپت

قسمت html :

<nav id="cbp-hrmenu" class="cbp-hrmenu">
    <ul>
        <li>
            <a href="#">Products</a>
            <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner">
                    <div>
                        <h4>Learning & Games</h4>
                        <ul>
                            <li><a href="#">Catch the Bullet</a></li>
                            <li><a href="#">Snoopydoo</a></li>
                            <!-- ... -->
                        </ul>
                    </div>
                    <div>
                        <h4>Utilities</h4>
                        <ul>
                            <li><a href="#">Gadget Finder</a></li>
                            <li><a href="#">Green Tree Express</a></li>
                            <li><a href="#">Green Tree Pro</a></li>
                            <li><a href="#">Wobbler 3.0</a></li>
                            <li><a href="#">Coolkid</a></li>
                        </ul>
                    </div>
                    <div>
                        <!-- ... -->
                    </div>
                </div><!-- /cbp-hrsub-inner -->
            </div><!-- /cbp-hrsub -->
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>

برای مشاهده قسمت css به ادامه مطالب بروید..

ادامه

۱۶ اسفند ۱۳۹۱
بالا