Recents in Beach

本站設計程式碼彙整(二)

夜久思 12月 22, 2019

一、下拉式選單(取自WFU BLOG)
1.找到"</head>"，在前面加入以下程式碼：
<style>
/*下拉選單 start*/
#dropMenu ul{
margin: 0;
padding: 0;
position: relative;left:20px;
}
#dropMenu li{
margin: 0;
padding: 0;
position: relative;
}
#dropMenu span{
margin: 0;
padding: 0;
position: relative;
}
#dropMenu a {
margin: 0;
padding: 0;
position: relative;
}
#dropMenu:after, #dropMenu ul:after {
content: '';
display: block;
clear: both;
}
#dropMenu a {
color: #333333;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
min-width: 10px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #eeeeee;
}
#dropMenu ul {
list-style: none;
background: none!important;
overflow: visible!important;
z-index: 10;
border: none!important;
}
#dropMenu &gt; ul &gt; li {
float: left;
}
#dropMenu &gt; ul &gt; li.active &gt; a {
background: #d9d9d9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP_RgKDTQQJbwfEsiFu6KkQQgpL9oNMbR6hLNfvuy9sHisqBXTmGs8BFrF2UrUArRbj8gUkhnKWDRWbqp7uU3QDLKB2-GQ4twS4I9MkGEdGeX5NOO5YDnUTEl1uTOn_f1Cm_A0RawZ8c89/s1600/grad_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-moz-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-webkit-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
filter: none;
}
#dropMenu &gt; ul &gt; li.active a:hover {
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
filter: none;
}
#dropMenu &gt; ul &gt; li a {
box-shadow: inset 0 0 0 1px #ffffff;
-moz-box-shadow: inset 0 0 0 1px #ffffff;
-webkit-box-shadow: inset 0 0 0 1px #ffffff;
background: #bfbfbf url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP_RgKDTQQJbwfEsiFu6KkQQgpL9oNMbR6hLNfvuy9sHisqBXTmGs8BFrF2UrUArRbj8gUkhnKWDRWbqp7uU3QDLKB2-GQ4twS4I9MkGEdGeX5NOO5YDnUTEl1uTOn_f1Cm_A0RawZ8c89/s1600/grad_light.png) repeat-x left top;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #e5e5e5), color-stop(51%, #d7d7d7), color-stop(100%, #ededed));
background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
border-bottom: 1px solid #d2d2d2;
border-top: 1px solid #d2d2d2;
border-right: 1px solid #d2d2d2;
line-height: 34px;
padding: 0 16px;
filter: none;
}
#dropMenu &gt; ul &gt; li a:hover {
background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP_RgKDTQQJbwfEsiFu6KkQQgpL9oNMbR6hLNfvuy9sHisqBXTmGs8BFrF2UrUArRbj8gUkhnKWDRWbqp7uU3QDLKB2-GQ4twS4I9MkGEdGeX5NOO5YDnUTEl1uTOn_f1Cm_A0RawZ8c89/s1600/grad_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(50%, #bfbfbf), color-stop(51%, #b0b0b0), color-stop(100%, #c7c7c7));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
filter: none;
}
#dropMenu &gt; ul &gt; li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #d2d2d2;
}
#dropMenu &gt; ul &gt; li:last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#dropMenu &gt; ul &gt; .has-sub:hover &gt; ul {
display: block;
}
#dropMenu .has-sub ul {
display: none;
position: absolute;
left: -1px;
min-width: 100%;
text-align: center;
}
#dropMenu li .has-sub:hover &gt; ul {
display: block;
position: absolute;
top: 0;
left: 100%;
}
#dropMenu .has-sub ul li {
text-align: center;
}
#dropMenu .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #d2d2d2;
width: 100px;
display: block;
font-size: 14px;
line-height: 120%;
padding: 9px 10px;
text-align: left;
}
/* 下拉選單 end*/
</style>

註：WFU的程式碼有個小缺點，就是將來在套用其他模板後，可能不好調整位置，已修正。至於要加入小工具的程式碼如下：
<b:section class='自訂字串' id='自訂字串' showaddelement='yes'/>
2.新增小工具，貼上程式碼即可： 
    <div id="dropMenu">

     <ul>

      <li><a href="網址"><span>首頁</span></a></li>

      <li class="has-sub"><a href="#"><span>單層下拉選單1 ▼</span></a>

       <ul>

        <li><a href="網址"><span>項目 1</span></a></li>

        <li><a href="網址"><span>項目 2</span></a></li>

        <li><a href="網址"><span>項目 3</span></a></li>

        <li><a href="網址"><span>項目 4</span></a></li>

       </ul>

      </li>

      <li class="has-sub"><a href="#"><span>單層下拉選單2 ▼</span></a>

       <ul>

        <li><a href="網址"><span>項目 1</span></a></li>

        <li><a href="網址"><span>項目 2</span></a></li>

        <li><a href="網址"><span>項目 3</span></a></li>

        <li><a href="網址"><span>項目 4</span></a></li>

       </ul>

      </li>

      <li class="has-sub"><a href="#"><span>多層下拉選單1 ▼</span></a>

       <ul>

        <li class="has-sub"><a href="#"><span>項目 1 ►</span></a>

         <ul>

          <li><a href="網址"><span>網頁 1</span></a></li>

          <li><a href="網址"><span>網頁 2</span></a></li>

         </ul>

        </li>

        <li class="has-sub"><a href="#"><span>項目 2 ►</span></a>

         <ul>

          <li><a href="網址"><span>網頁 1</span></a></li>

          <li><a href="網址"><span>網頁 2</span></a></li>

         </ul>

        </li>

        <li class="has-sub"><a href="#"><span>項目 3</span></a></li>

       </ul>

      </li>

      <li class="has-sub"><a href="#"><span>多層下拉選單2 ▼</span></a>

       <ul>

        <li class="has-sub"><a href="#"><span>項目 1 ►</span></a>

         <ul>

          <li><a href="網址"><span>網頁 1</span></a></li>

          <li><a href="網址"><span>網頁 2</span></a></li>

         </ul>

        </li>

        <li class="has-sub"><a href="#"><span>項目 2 ►</span></a>

         <ul>

          <li><a href="網址"><span>網頁 1</span></a></li>

          <li><a href="網址"><span>網頁 2</span></a></li>

         </ul>

        </li>

        <li class="has-sub"><a href="#"><span>項目 3</span></a></li>

       </ul>

      </li>

      <li><a href="網址"><span>無選單項目1</span></a></li>

      <li><a href="網址"><span>無選單項目2</span></a></li>

     </ul>

    </div>

二、在手機板隱藏小工具
1.搭配下載的模板，上述工具在手機板顯示起來就顯得有點突兀，可用下列程式碼隱藏： 
<b:if cond="data:blog.isMobile == &quot;false&quot;">要在手機板被隱藏的工具</b:if>
Tags: