查看“Widget:TopicNavBar/源代码”的源代码

<noinclude>
本插件用来引入控制样式的选项按钮<br />
作者：[[User:Maverick|maverick]]<br />
修订：[[User:Boxsnake|boxsnake]]
</noinclude>
<includeonly>
<!--{if !isset($wgTopicNav) || !$wgTopicNav}-->
    <!--{assign var="wgTopicNav" value=true scope="global"}-->
    <style type="text/css">
/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.div,
.divs,
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .div,
  .divs,
  .column,
  .columns {
    margin-left: .3%; }
  .div:first-child,
  .divs:first-child,
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.div,
  .one.divs                    { width: 100%; margin-left: 0; }
  .two.divs                    { width: 49.85%;         }
  .three.divs                  { width: 33.1333333333%; }
  .four.divs                   { width: 24.775%;        }
  .five.divs                   { width: 19.76%;         }
  .six.divs                    { width: 16.4166666667%; }
  .seven.divs                  { width: 14.0285714286%; }
  .eight.divs                  { width: 12.2375%;       }
  .nine.divs                   { width: 10.8444444444%; }
  .ten.divs                    { width: 9.73%;          }
  .eleven.divs                 { width: 8.81818181818%; }
  .twelve.divs                 { width: 8.05833333333%; }

  .one.column,
  .one.columns                    { width: 8.05833333333%; }
  .two.columns                    { width: 16.4166666667%; }
  .three.columns                  { width: 24.775%;        }
  .four.columns                   { width: 33.1333333333%; }
  .five.columns                   { width: 41.4916666667%; }
  .six.columns                    { width: 49.85%;         }
  .seven.columns                  { width: 58.2083333333%; }
  .eight.columns                  { width: 66.5666666667%; }
  .nine.columns                   { width: 74.925%;        }
  .ten.columns                    { width: 83.2833333333%; }
  .eleven.columns                 { width: 91.6416666667%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 33.1333333333%; }
  .two-thirds.column              { width: 66.5666666667%; }

  .one-half.column                { width: 49.85%; }
}

/*
* 专题导航 V1
* Copyright 2015, maverick
* masterchan.me
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 05/13/2015
*/
.ztdh {
    margin-bottom: 3px;
    margin-top: 5px;
    border: solid 1px;
    background-color: white;
    padding: 8px;
    position: relative;
}

.ztdh .ztdhclear {
    clear: both;
}

.ztdh .ztdh-title {
    border: none;
    clear: none;
    margin: 0;
    font-family: 'Microsoft YaHei','STHeiti Light';
    font-weight: bold;
    font-size: 1.55em;
}

.ztdh .logo {
    float: left;
    margin-right: 5px;
}

.ztdh .hint {
    text-align: right;
    font-size: 12px;
}

.ztdh span.menu-title {
    margin: 0;
    padding: 0;
    text-align: center;
    cursor: pointer;
    line-height: 32px;
    border: 1px solid #a7d7f9;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.8;
    display: block;
}

.ztdh .ztdhmenu{
    margin-top: 5px;
}

.menu-popout {
    position: absolute;
    background-color: white;
    margin: 0;
    width: 100%;
    top: -1px;
}

.menu-content {
    position: relative;
    display: none;
}

.ztdh ul {
    list-style: none;
    margin: 0;
    border: solid #9dd5ff;
    border-width: 2px;
}

.ztdh li {
    padding: 4px;
}

.ztdh li a:hover{
    text-decoration: none;
}

.ztdh .menu-item:hover > .menu-content {
    display: block;
}

.ztdh .menu-item:hover > span.menu-title {
    background-color: #9dd5ff;
    border: 1px solid #9dd5ff;
}

.ztdh ul ul {
    border: none;
    margin: 5px 5px 0px 15px;
}

.ztdh-hsctrl {
    position: absolute;
    right: 6px;
    top: 51px;
    background: #FFFFFF;
    padding: 0 6px;
    cursor: pointer;
}

.ztdh hr{
  margin: 12px 0;
}

@media (max-width: 550px) {
  .ztdh .hint {
      font-size: 10px;
  }
  .ztdh .menu-item{
    margin-bottom: 5px;
  }
  .menu-content {
      position: relative;
      margin-bottom: 5px;
  }
  .menu-popout {
      position: relative;
  }
  .ztdh .menu-item > span.menu-title {
      background-color: #9dd5ff;
      border: 1px solid #9dd5ff;
  }
  .ztdh hr{
      margin: .2em 0;
  }
  .ztdh-hsctrl {
    display: none;
  }
}
    </style>
<script type="text/javascript">
window.RLQ = window.RLQ || [];
window.RLQ.push(function() {
    mw.loader.implement('widgetTopicNavBar', function () {
        if (document.body.clientWidth < 550) {
            $(".menu-item").click(function() {
                $(this).children(".menu-content").toggle();
            });
        } else {
            function setCookie(cname, cvalue, exdays) {
                var d = new Date();
                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
                var expires = "expires=" + d.toUTCString();
                document.cookie = cname + "=" + cvalue + "; " + expires;
            }

            function getCookie(cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') c = c.substring(1);
                    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
                }
                return "";
            }

            function showall() {
                window.hh = 0;
                $(".menu-content").show();
                $(".menu-content ul").each(function() {
                    if ($(this).height() > window.hh) {
                        window.hh = $(this).height()
                    };
                });
                $(".menu-content ul").css("height", window.hh + "px");
                $(".menu-content ul ul").css("height", "auto");
                $(".ztdh .menu-item span.menu-title").css("background-color", "#9dd5ff");
                $(".ztdh").css("height", (window.hh + $(".ztdh").height()) + "px");
                setCookie("ztdh-" + $(".ztdh").attr("id"), "show", 300);
                $(".ztdh-hsctrl").html("[ 隐藏全部 ]");
            }

            function hideall() {
                $(".menu-content ul").removeAttr("style");
                $(".ztdh .menu-item span.menu-title").removeAttr("style");
                $(".menu-content").removeAttr("style");
                $(".ztdh").removeAttr("style");
                setCookie("ztdh-" + $(".ztdh").attr("id"), "hide", 300);
                $(".ztdh-hsctrl").html("[ 显示全部 ]");
            }

            $(".ztdh-hsctrl").click(function() {
                if ($(this).html() == "[ 显示全部 ]") {
                    showall();
                } else {
                    hideall();
                };
            });

            if (getCookie("ztdh-" + $(".ztdh").attr("id")) == 'show') {
                showall();
            } else {
                setCookie("ztdh-" + $(".ztdh").attr("id"), "hide", 300);
            }
        };
    });
});
</script>
<!--{/if}-->
</includeonly>