Class(2017-1)練習2

三、【mega選單】加入

 

 

3-1 選單內加入圖片

<li class=”dropup”>加入【mega】類別名稱,加入圖片 Html結構

<ul class="dropdown-menu" role="menu">
    <li class="col-xs-6 col-md-3">
        <h3 class="text-center text-info h5">1.視覺設計</h3>
        <a href="#" class="thumbnail">
            <img src="images/listClass01.png" alt="1.視覺設計">
        </a>
    </li>
    <li class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="images/listClass02.png" alt="2.手機APP設計">
        </a>
    </li>
    <li class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="images/listClass03.png" alt="3.程式/資料庫">
        </a>
    </li>
    <li class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="images/listClass04.png" alt="4.建築室內設計">
        </a>
    </li>
    <li class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="images/listClass05.png" alt="5.3D多媒體動畫">
        </a>
    </li>
    <li class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="images/listClass06.png" alt="6.影視特效">
        </a>
    </li>
    <li class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="images/listClass07.png" alt="7.工業設計">
        </a>
    </li>
    <li class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="images/listClass08.png" alt="8.網路管理">
        </a>
    </li>
    <li class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="images/listClass09.png" alt="9.認證輔導">
        </a>
    </li>
    <li class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="images/listClass10.png" alt="10.電腦資訊技能">
        </a>
    </li>
</ul>

3-2 利用 jQuery 加入標題

 

//.thumbnail 加入標題
$('.mega .thumbnail').each(function() {
    var $megaTitle = $(this).children('img').attr('alt');
    console.log($megaTitle);
    $(this).before('<h3 class="text-center text-info h5">' + $megaTitle + '</h3>');
});

3-3  navbar 導覽列改為【hover】事件

//navbar 改為hover事件
$('.navbar-nav li').hover(
    function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
    },
    function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
    }
);