website/layouts/partials/header.html

<!-- Header Start -->
<header class="navigation">
    <div class="common-layout">
        <div class="header-container">
            <a href="{{ site.Home.RelPermalink }}">
                <img src="/images/header/logo.svg" alt="{{ .Site.Title }}" class="logo">
            </a>

            <ul class="nav">
                {{ $section := .Page.Section }}
                {{ range .Site.Menus.main }}
                {{ if .HasChildren }}

                {{ $active := false }}
                {{ range .Children }}
                    {{ if eq $section .URL }}
                        {{ $active = true }}
                    {{ end}}
                {{ end }}

                <li {{ if $active }} class="menu-li menu-active" {{ else }} class="menu-li" {{ end}}>
                    <span class='menu-span'>{{ .Name }}</span>
                    <ul class="dropdown-menu menu-{{ .Name }}">
                        {{ range .Children }}
                        <li {{ if eq $section .URL }} class="active"{{ end}}>
                            {{ if hasPrefix .URL "http" }}
                            <a href="{{ .URL }}" target="_blank" rel="noopener noreferrer">{{ .Name }}</a>
                            {{ else }}
                            <a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
                            {{ end }}
                        </li>
                        {{ end }}
                    </ul>
                </li>
                {{ else }}
                <li {{ if eq $section .URL }} class="active"{{ end}}>
                    {{ if hasPrefix .URL "http" }}
                    <a href="{{ .URL }}" target="_blank" rel="noopener noreferrer">{{ .Name }}</a>
                    {{ else }}
                    <a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
                    {{ end }}                
                </li>
                {{ end }}

                {{ end }}

            </ul>
            <div class="right-menu">
                <ul>
                    <li class="language-menu">
                        <div>
                            <img src="/images/header/black.svg" alt="">
                            <span>{{ .Site.Language.LanguageName }}</span>
                        </div>
                        <ul class="dropdown-menu">
                            {{ range .Page.AllTranslations }}
                            <li onclick="location = '{{ .Permalink }}'">{{ .Language.LanguageName }}</li>
                            {{ end }}
                        </ul>
                    </li>
                    <li class='btn-li'>
                        <a href="https://demo.kubesphere.io/login" target="_blank" rel="noopener noreferrer">
                            <button class="demo-btn">{{ i18n "Demo" }} →</button>
                        </a>
                        <ol class="dropdown-menu">
                            <li>{{ i18n "demo content 1" }}</li>
                            <li>{{ i18n "demo content 2" }}</li>
                            <li>{{ i18n "demo content 3" }}</li>
                        </ol>
                    </li>
                    <li class='link-li'>
                        <a class='link-1' href="{{ .Site.Params.slackLink }}" target="_blank" rel="noopener noreferrer"></a>
                        <a class='link-2' href="{{ .Site.Params.twitterLink }}" target="_blank" rel="noopener noreferrer"></a>
                        <a class='link-3' href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer"></a>
                    </li>
                    <li class="menu-icon">
                        <img src="/images/header/menu.svg" alt="">
                    </li>
                </ul>
            </div>
        </div>      
    </div>

    <div id="modal-for-menu" class="modal">
        <ul class="nav">
            {{ $section := .Page.Section }}
            {{ range .Site.Menus.main }}
            {{ if .HasChildren }}

            {{ $active := false }}
            {{ range .Children }}
                {{ if eq $section .URL }}
                    {{ $active = true }}
                {{ end}}
            {{ end }}

            <li data-check="0" {{ if $active }} class="menu-li menu-active" {{ else }} class="menu-li" {{ end}}>
                <span class='menu-span'>{{ .Name }}</span>
                <ul class="dropdown-menu">
                    {{ range .Children }}
                    <li {{ if eq $section .URL }} class="active"{{ end}}>
                        <a href="{{ .URL | absLangURL }}">{{ .Name }}</a>
                    </li>
                    {{ end }}
                </ul>
            </li>
            {{ else }}
            <li {{ if eq $section .URL }} class="active"{{ end}}><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
            {{ end }}

            {{ end }}

        </ul>
        <div class="btn-div">
            <a href="https://demo.kubesphere.io/login" target="_blank" rel="noopener noreferrer">
                <button class="demo-btn">{{ i18n "Demo" }} →</button>
            </a>
        </div>
        <div class="link-div">
            <a href="{{ .Site.Params.slackLink }}" target="_blank" rel="noopener noreferrer">
                <img src="/images/header/slack-hover.svg" alt="">
            </a>
            <a href="{{ .Site.Params.twitterLink }}" target="_blank" rel="noopener noreferrer">
                <img src="/images/header/twitter-hover.svg" alt="">
            </a>
            <a href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer">
                <img src="/images/header/github-hover.svg" alt="">
            </a>
        </div>
    </div>
</header>
<script>
var bindNavMouseEvent = function(selector) {
    var flag = false
    $(selector).mouseenter(function() {
        if (flag) {
            return false
        }
        flag = true
        $(this).find('.dropdown-menu').fadeIn(200, function() {
            flag = false
        })
    });
    $(selector).mouseleave(function() {
        $(this).find('.dropdown-menu').fadeOut(200)
    });
}

var bindScrollChangeHeader = function() {
    var check = 100
    var header = $('header')
    window.addEventListener('scroll', function() {
        var scrollY = window.scrollY;
        if (scrollY > 100) {
            header.addClass('navigationScroll')
        } else {
            header.removeClass('navigationScroll')
        }
    })
}

var bindClickShowMenu = function() {
    $('.menu-icon').click(function() {
        $('#modal-for-menu').modal()
    })
}

var bindClickModalLi = function() {
    $('.modal .menu-li').click(function() {
        var check = $(this).data('check')
        if (check === 0) {
            $(this).data('check', 1)
            $(this).find('.dropdown-menu').slideDown(200)
        } else {
            $(this).data('check', 0)
            $(this).find('.dropdown-menu').slideUp(200)
        }
        $(this).find('.menu-span').toggleClass('up')
    }) 
}

bindScrollChangeHeader()

bindNavMouseEvent('.header-container .menu-li')
bindNavMouseEvent('.header-container .language-menu')
bindNavMouseEvent('.header-container .btn-li')

bindClickShowMenu()
bindClickModalLi()


</script>