نحوه ساخت منوی آبشاری توسط jquery و css

1396/2/9 علیرضا حاتمی نیا 1017

درودی دیگر خدمت شما کاربر محترم وبسایت  ilikephp من علیرضا حاتمی نیا با آموزش ویژه امروز در خدمت شما هستم. در آموزش امروز قصد داریم تا با نحوه ساخت منوی آبشاری توسط jquery و css آشنا شویم.

پیش نیاز های این دوره :

قبل از شروع آموزش لازم است تا با مفاهیم زیر در حد متوسط آشنایی داشته باشید :

موارد مورد نیاز:

این منو توسط کتابخانه jquery کنترل میشود. پس آخرین نسخه jquery را دانلود کنید و به صفحه اضافه کنید.

<script src="jquery-3.1.1.min.js"></script>

گام اول ساختار Menu در HTML :

جهت کنترل و مدیریت صحیح به صورت DOM بهتر است تا منو توسط لیست ها طراحی شوند. به این صورت که کل menu در یک تگ <ul> و تمامی گزینه های آن به صورت <li> تقسیم بندی شوند.

<nav>
    <ul>
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li><a href="#">item3</a></li>
    </ul>
</nav>

سپس گزینه هایی که قرار است با hover شدن موس بازشوند را کلاس dropdown می دهیم . در ادامه کلاس dropdown را استایل دهی می کنیم. در این مثل گزینه item3 قرار است دارای زیرمنو باشد.

<nav>
    <ul>
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li class="dropdown"><a href="#">item3</a></li>
    </ul>
</nav>

سپس زیر منوها را مانند یک لیست حساب کرده و داخل آیتمی که دارای کلاس dropdown هستند می نویسیم و به آن کلس sub-menu را می دهیم

<nav>
    <ul>
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li class="dropdown"><a href="#">item3</a>
            <ul class="sub-menu">
                <li><a href="#">sub1</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub3</a></li>
            </ul>
        </li> 
    </ul>
</nav>

ساختار CSS :

حال منو ساخته شده در Html را توسي CSS استایل بندی می کنیم. نکته مهم در ساختار Css این است که لیستی که دارای کلاس sub-menu است دارای خصوصیت display:none می باشد. به این معنی که ابتدا نمایش داده نمی شود و بعد با jquery تعیین می کنیم که هنگامی که موس روی والد آن رفت این لیست نمایش داده شود.

nav {
    background-color: darkblue;
    padding:10px 0;
}
nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
nav ul li {
    display:inline-block;
    position:relative;
}

nav li ul {   
    background-color:red;
    position:absolute;
    left:0;
    top:40px;
    width:200px;
}
nav li li {
    position:relative;
    margin:0;
    display:block;
}

nav li li ul {
    position:absolute;
    top:0;
    left:200px;
    margin:0;
}

nav a {
    line-height:40px;
    padding:0 12px;
    margin:0 12px;
}

nav a {

    color:#fff;

    text-decoration:none;

    display:block;

}

nav a:hover,

nav a:focus,

nav a:active {

    color: yellow;

}



nav li li a {

    border-bottom:solid 1px black;

    margin:0 10px;

    padding:0;

}

nav li li:last-child a {

    border-bottom:none;

}

ul.sub-menu {

    display:none;

}

ساختار jquery :

ساختار کدنویسی در این قسمت بسیار ساده است. همان طور که می دانید رویداد hover دو پارامتر دریافت می کند. اولی برای زمانی که نشانه گر موس روی عنصری می رود و دومین پارامتر برای زمانی که نشانه گر موس از روی عنصری خارج می شود.پس روی رویداد hover آیتمی که دارای کلاس dropdown است تعیین می کنیم که هنگامی که موس روی این آیتم رفت فرزندانی که دارای کلاس sub-menu هستند را نمایش دهد و هنگامی که نشانه گر موس از روی این آیتم خارج  شد فرزندانی که دارای کلاس sub-menu هستند را مخفی یا عدم نمایش کند.

<script>
    $(document).ready(function() {
    $( '.dropdown' ).hover(
        function(){
            $(this).children('.sub-menu').slideDown(200);
        },
        function(){
            $(this).children('.sub-menu').slideUp(200);
        }
    );
}); 
</script>