下拉导航菜单

今天学习了这个新的方法，做个笔记，毕竟自己前后端都涉猎但是都不精，做个笔记便于查看：

功能：鼠标悬浮时菜单显示一级菜单，鼠标点击IM消息时，本身这个IM消息的a标签变色，而且它的父级a标签页同时变色，

其实对于码农来说变不变色没关系只要功能可以就行了，但是对于一个产品来说，产品人员会以客观的引导性进行对用户的指导，

所以这个是必须的。下面说说主要的实现思路：因为之前也是没做过，所以学习了一下：

<li class="switch-locale-wrap">
        <div class="dropdown switch-locale">
            <a href="../product/" id="product" class="dropdown-toggle zh" data-toggle=" " style="color: rgb(52, 162, 240);">产品</a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <li class="left_menu_title">
                    <div href="">
                        <div style="float:left;margin-left:16px;color:#A6A29D;margin-top:12px;margin-bottom:3px;font-size:14px;cursor:default">产品</div>
                        <div style="clear:both;"></div>
                    </div>
                </li>
                <li class="left_menu_detail" value="1">
                    <a href="../product/#audio">
                        <div style="float: left;">
                            <div class="audio"></div>
                        </div>
                        <div style="float: left; color: rgb(52, 162, 240);" id="audio_talk" class="left_menu">语音通话</div>
                        <div style="clear:both;"></div>
                    </a>
                </li>

                <li class="left_menu_detail" value="2">
                    <a href="../product/#video">
                        <div style="float: left;">
                            <div class="video"></div>
                        </div>
                        <div style="float:left;" id="video_talk" class="left_menu">视频通话</div>
                        <div style="clear:both;"></div>
                    </a>
                </li>

                <li class="left_menu_detail" value="3">
                    <a href="../product/#im">
                        <div style="float: left;">
                            <div class="im"></div>
                        </div>
                        <div style="float:left;" id="im_message" class="left_menu">IM 消息</div>
                        <div style="clear:both;"></div>
                    </a>
                </li>

                <li class="left_menu_detail" value="4">
                    <a href="../product/#live">
                        <div style="float: left;">
                            <div class="live"></div>
                        </div>
                        <div style="float:left;" id="live_telecast" class="left_menu">互动直播</div>
                        <div style="clear:both;"></div>
                    </a>
                </li>

                <li class="left_menu_detail" value="5">
                    <a href="../product/#conference">
                        <div style="float: left;">
                            <div class="conference"></div>
                        </div>
                        <div style="float:left;" id="meeting" class="left_menu">会议</div>
                        <div style="clear:both;"></div>
                    </a>
                </li>
            </ul>
        </div>
    </li>

//首页顶部蓝条
var url = this.location.href;

url = url.split('/')

var a = url[url.length-1];
var b = url[url.length-2]
var detail = (b+'/'+a);
// console.log(detail);

switch(detail){
    case 'product/':
    $('#product').css('color','#34a2f0');
    break;

    case 'scenario/e-learning.php':
    $('#e-learning').css('color','#34a2f0');
    $('#product').css('color','#34a2f0');
    break;

    case 'scenario/mhealth.php':
    $('#product').css('color','#34a2f0');
    $('#mhealth').css('color','#34a2f0');
    break;

    case 'scenario/social_im.php':
    $('#product').css('color','#34a2f0');
    
    $('#social_im').css('color','#34a2f0');
    break;

    case 'scenario/o2o.php':
    $('#product').css('color','#34a2f0');

    $('#o2o').css('color','#34a2f0');
    break;

    case 'solution/e-learning.php':
    $('#e-learning-cloud').css('color','#34a2f0');
    break;

    case 'price/':
    $('#price').css('color','#34a2f0');
    break;

    case 'download/':
    $('#download').css('color','#34a2f0');
    break;

    case 'product/#audio':
    $('#audio_talk').css('color','#34a2f0');
    $('#product').css('color','#34a2f0');
    break;

    case 'product/#video':
    $('#video_talk').css('color','#34a2f0');
    $('#product').css('color','#34a2f0');
    break;
    case 'product/#im':
    $('#im_message').css('color','#34a2f0');
    $('#product').css('color','#34a2f0');
    break;

    case 'product/#live':
    $('#live_telecast').css('color','#34a2f0');
    $('#product').css('color','#34a2f0');
    break;

    case 'product/#conference':
    $('#meeting').css('color','#34a2f0');
    $('#product').css('color','#34a2f0');
    break;
    case 'stories/':
    $('#case').css('color','#34a2f0');
    break;
}

//点击产品左边menu本页面不刷新 导航按钮变色
$('.left_menu_detail').click(function(){
    var val = $(this).val();
    // console.log(val);

    
    switch(val){
        case 1:
        $('.left_menu').css('color','#383838');
        $('#audio_talk').css('color','#34a2f0');
        $('#product').css('color','#34a2f0');
        break;
        case 2:
        $('.left_menu').css('color','#383838');
        $('#video_talk').css('color','#34a2f0');
        $('#product').css('color','#34a2f0');
        break;
        case 3:
        $('.left_menu').css('color','#383838');

        $('#im_message').css('color','#34a2f0');
        $('#product').css('color','#34a2f0');
        break;
        case 4:
        $('.left_menu').css('color','#383838');

        $('#live_telecast').css('color','#34a2f0');
        $('#product').css('color','#34a2f0');
        break;
        case 5:
        $('.left_menu').css('color','#383838');

        $('#meeting').css('color','#34a2f0');
        $('#product').css('color','#34a2f0');
        break;
    }
})

源网站：  http://www.justalkcloud.com/

其实以上面的代码大家就明白，其实我们可以根据我们的URL来判断是那个导航下的一级菜单，这样我们对每个主导航加上id，

对应访问的路径判断当前url下的哪个主导航需要变色；同时还可以实现当前页面不刷新，变更主导航a标签的颜色；

对于带有导航分类的页面来说如果这样实现变色的话，把每个导航都分别放在一个文件加下这样我们对于路径（URL就会更好处理）

比如MVC中，产品这个主导航我们可以建一个ProductController 那么我们产品下面的每个页面都放在这个ProductController 下面

那么所有的访问路径都是www.sss.com/ProductController/Index 或者www.sss.com/ProductController/IM等等那么我们就可以直接

获取URL中的ProductController，只要是ProductController我们就可以判断是产品主导航下的页面，即我们就可以给其改变颜色。