JSFiddle - React, Tailwind, and code Playground

by mingjian sun

HTML

<link rel="stylesheet" href="//cdn.bootcss.com/semantic-ui/2.1.8/semantic.min.css">
<script src="//cdn.bootcss.com/semantic-ui/2.1.8/semantic.min.js"></script>
<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
<div class="ui borderless main menu hidden-xs">
        <div class="ui container">
            <a href="/" class="header item">
                SumyBlog
            </a>
            <a href="/archives" class="item">归档</a>
            <div class="ui dropdown link item" tabindex="0">
                <span class="text">分类</span>
                <i class="dropdown icon"></i>
                <div class="menu transition hidden" tabindex="-1">


    <a class="item" href="/categories/Linux/">
        Linux(2)
    </a>

    <a class="item" href="/categories/动漫/">
        动漫(1)
    </a>

    <a class="item" href="/categories/姿势/">
        姿势(1)
    </a>

    <a class="item" href="/categories/实验室/">
        实验室(3)
    </a>

    <a class="item" href="/categories/工具/">
        工具(3)
    </a>

    <a class="item" href="/categories/技术/">
        技术(1)
    </a>

    <a class="item" href="/categories/搞机日常/">
        搞机日常(2)
    </a>

    <a class="item" href="/categories/服务器/">
        服务器(1)
    </a>

    <a class="item" href="/categories/游戏人生/">
        游戏人生(3)
    </a>

    <a class="item" href="/categories/算法/">
        算法(1)
    </a>

    <a class="item" href="/categories/编程语言/">
        编程语言(14)
    </a>

    <a class="item" href="/categories/网站/">
        网站(11)
    </a>

    <a class="item" href="/categories/艺术人生/">
        艺术人生(1)
    </a>

    <a class="item" href="/categories/问题麻烦/">
        问题麻烦(1)
    </a>

    <a class="item" href="/categories/随笔/">
        随笔(1)
    </a>

    <a class="item" href="/categories/高效生活/">
        高效生活(8)
    </a>

</div>

            </div>
            <div class="ui dropdown link item" tabindex="0">
                <span class="text">标签</span>
                <i class="dropdown icon"></i>
               ...

CSS

/*homepage navbar*/
.main.menu {
    border-radius: 0;
    border: none;
    margin: 1px 0 1px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    box-shadow: none;
    background-color: transparent;
    transition:
      box-shadow 0.5s ease,
      padding 0.5s ease
    ;
}
.main.menu.fixed {
    position: fixed;
    background-color: rgba(115,146,29,.9) !important;
    border: 1px solid #DDD;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
    z-index: 888 !important;
}
.main.menu.fixed:not(.index-img) * {
  color:#FFF;
}

JavaScript

$(document).ready(function() {
        $('.main.menu').visibility({type: 'fixed'});
    });