@{
    var siteData = Html.SiteData();
    string[] hostKeywords = new string[] { "瓷砖","白玉瓷砖", "原石瓷砖", "户外地板","汉白玉","大理石", "浴室瓷砖" };
}

<div class="header clearfix">
    <div class="container">
        <div class="row">
            <div class="col-md-3 float-lg-left">
                <a class="logo" href="@Html.SiteUrl()">
                    <img src="@siteData.Logo" />
                </a>
            </div>
            <div class="col-md-9">
                <div class="nav text-right col-md-right" id="navMenu">
                    @Html.SiteColumnsHtml()
                </div>
            </div>
            <div class="mask-bg" id="maskBg"></div>
            <div class="right-icon-box">
                <i class="fa fa-search" aria-hidden="true" id="searchBtn"></i>
                <i class="fa fa-remove hidden" id="removeSearch"></i>
                <i class="fa fa-bars" id="navToggle"></i>
            </div>
        </div>
    </div>
</div>

<!-- 搜索隐藏模块-->
<div class="search-show">
    <div class="box container">
        <div class="title">
            <input type="text" class="s-input" id="input-search" placeholder="请输入你要查找的产品" />
            <i class="fa fa-search s-btn"></i>
        </div>
        <div class="hot-word">
            <div class="text">热搜产品</div>
            <ul>
                @foreach (var keyword in hostKeywords)
                {
                    <li><a href="/product/Search/?kw=@(Server.UrlEncode(keyword))">@keyword</a></li>
                }
            </ul>
        </div>
    </div>
</div>
<div class="search-bg" id="SearchMask"></div>

<script type="text/javascript">
    var $navToggle = $("#navToggle");//手机端菜单图标
    var $maskBg = $("#maskBg");//遮挡层
    var $navMenu = $("#navMenu");
    $navToggle.on("click", function () {
        $maskBg.addClass("active");
        $navMenu.addClass("active");
    });
    $maskBg.on("click", function () {
        $maskBg.removeClass("active");
        $navMenu.removeClass("active");
    });
    $navMenu.children("ul").find("li").InitNav(@Html.CurrentColumnId(),@Html.TopColumnId());//初始化响应式菜单

    //搜索展示
    var $searchBtn = $('#searchBtn');
    var $removeSearch = $('#removeSearch');
    var $searchshow = $('.search-show');
    var $searchbg = $('.search-bg');
    $searchBtn.on("click", function () {
        $(this).toggleClass("hidden");
        $removeSearch.toggleClass("hidden");
        $searchshow.slideToggle();
        //$searchbg.toggle();
    })
    $removeSearch.on("click", function () {
        $(this).toggleClass("hidden");
        $searchBtn.toggleClass("hidden");
         $searchshow.slideUp();
         //$searchbg.hide();
     })

    var keyword = "";
    var $s_input = $(".s-input");
    $(".s-btn").on("click", function () {
        keyword = $s_input.val();
        if (keyword != "") {
            location.href = "/product/Search/?kw=" + keyword;
        }
    });
    $(".s-input").on("keydown", function (event) {
    var key = event.which;
    if (key == 13){
        keyword = $s_input.val();
            if (keyword != "") {
                location.href = "/product/Search/?kw=" + keyword;
            }
         }
    });
</script>


