Blogger: เมนูแท็บนำทางแบบเลื่อนลง

บทความนี้จะอธิบายการติดตั้งเมนูแท็บนำทางแบบเลื่อนลง  (Drop Down Menu Navigation) โดยการติดตั้งเมนูแบบเลื่อนลงตามวิธีในบทความนี้จะต้องสั่งไม่แสดงเมนูหน้าเว็บแบบเดิมของบล็อกเกอร์ก่อนจึงจะทำงานได้เป็นปกติ และต้องกำหนดลิงก์ใหม่ในเมนูนี้ด้วยตนเอง ดังนั้นก่อนเริ่มแก้ไขแก้ไขโค้ดบล็อกตามบทความนี้ ก็ควรดาวน์โหลดเทมเพลทบล็อกที่กำลังใช้อยู่ในขณะนี้เก็บสำรองไว้ในเครื่องของคุณเองก่อนนะ


ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'หน้าเว็บ' แล้วตั้งค่าของ 'แสดงหน้าเว็บเป็น' โดยเลือกแบบ 'ไม่แสดง'


ขั้นตอนที่ 2. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'


ขั้นตอนที่ 3. วาง CSS ของเมนู
ค้นหา
]]></b:skin>

แล้วแทนที่ด้วย
/* Drop Down Menu Navigation
----------------------------------------------- */
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  z-index: 1;
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  color: #333333;
  display: inline-block;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  min-width: 35px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 #eeeeee;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li.active > a {
  background: #d9d9d9 url(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;
}
#cssmenu > ul > 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;
}
#cssmenu > ul > 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(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 35px;
  filter: none;
}
#cssmenu > ul > li a:hover {
  background: #ffffff url(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;
}
#cssmenu > ul > 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;
}
#cssmenu > ul > li:last-child a {
  border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
}
#cssmenu .has-sub:hover ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  top: 36px;
  left: -1px;
  min-width: 100%;
  text-align: center;
  *width: 100%;
}
#cssmenu .has-sub ul li {
  text-align: center;
}
#cssmenu .has-sub ul li a {
  border-top: 0 none;
  border-left: 1px solid #d2d2d2;
  display: block;
  font-size: 12px;
  line-height: 120%;
  padding: 9px 5px;
  text-align: center;
}

]]></b:skin>



ขั้นตอนที่ 4. วางเมนูแบบเลื่อนลง
ค้นหา
<div class='region-inner tabs-inner'>

แทนที่ด้วย
<div class='region-inner tabs-inner'>

<!--Maxlayout drop down menu navigation Start-->
<div id='cssmenu'>
<ul>
<!--Add Link Start-->
<!--Add Link Stop-->
</ul>
</div>
<!--Maxlayout drop down menu navigation Stop-->



ขั้นตอนที่ 5. ใส่ลิงก์ลงในเมนู
ใส่ลิงก์ที่ต้องการลงไปในโค้ดสำหรับแทนที่จากขั้นตอนที่ีแล้วตรงตำแหน่งระหว่างโค้ดบรรทัดที่ 6 กับ 7 ซึ่งก็คือ
<!--Add Link Start-->
และ
<!--Add Link Stop-->
ซึ่งมีโครงสร้างดังนี้

แบบที่ 1 การใส่ลิงก์ชั้นเดียวมีโครสร้างคือ
   <li class='has-sub'><a href='ปลายทางของลิงก์ปกติ'><span>ข้อความลิงก์ปกติ</span></a></li>

แบบที่ 2 การใส่ลิงก์แบบเลื่อนลงมีโครสร้างคือ
   <li class='has-sub'><a href='ปลายทางของลิงก์ปกติ'><span>ข้อความลิงก์ปกติ</span></a>
      <ul>
         <li><a href='ปลายทางของลิงก์ย่อย'><span>ข้อความลิงก์ย่อย</span></a></li>
         <li><a href='ปลายทางของลิงก์ย่อย'><span>ข้อความลิงก์ย่อย</span></a></li>
         <li><a href='ปลายทางของลิงก์ย่อย'><span>ข้อความลิงก์ย่อย</span></a></li>
      </ul>
   </li>


โดยตอนนำไปใช้ก็ให้แทนที่คำว่า
- ปลายทางของลิงก์ปกติ
- ข้อความลิงก์ปกติ
- ปลายทางของลิงก์ย่อย
- ข้อความลิงก์ย่อย
ให้ตรงกับเป้าหมายได้ตามต้องการ แต่ถ้าหากว่าต้องการให้ปุ่มอันใดก็ตามในเมนูไม่มีสถานะเป็นลิงก์ก็สามารถทำได้โดยให้แทนที่
<a href='ปลายทางของลิงก์ปกติ'> หรือ <a href='ปลายทางของลิงก์ย่อย'>
ด้วยโค้ดว่า
</a>
ก็จะทำให้เมนูในจุดนั้นไม่เป็นลิงก์


ตัวอย่างการเขียนจากวิธีที่กล่าวมาเช่น
<!--Add Link Start-->
   <li class='last'><a href='http://tip.maxlayout.com/'><span>Home</span></a></li>
   <li class='has-sub'><a href='http://tip.maxlayout.com/search/label/Text%20Effect'><span>Text Effect</span></a>
      <ul>
         <li><a href='http://tip.maxlayout.com/search/label/Photoshop'><span>Photoshop</span></a></li>
         <li><a href='http://tip.maxlayout.com/search/label/Illustrator'><span>Illustrator</span></a></li>
         <li><a href='http://tip.maxlayout.com/search/label/Fireworks'><span>Fireworks</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a><span>Graphic 3D</span></a>
      <ul>
         <li><a href='http://tip.maxlayout.com/search/label/Lightwave'><span>Lightwave</span></a></li>
         <li><a href='http://tip.maxlayout.com/search/label/3ds%20Max'><span>3ds Max</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='http://www.facebook.com/maxlayout'><span>Fanpage</span></a></li>
<!--Add Link Stop-->


อธิบายเพิ่มเติมเกี่ยวกับการปรับค่าของเมนูลิงก์

เนื้อหาส่วนนี้จะอธิบายเกี่ยวกับวิธีปรับลิงก์ให้ชี้ปลายทางตาม URL ภายในตัวบล็อกเดียวกัน เพื่อให้ลิงก์ที่เขียนนั้นสั้นลงและสะดวกยิ่งขึ้น ซึ่งถ้าหากใครคิดว่ามันไม่จำเป็นก็หยุดอยู่ในขั้นตอนที่ 5 แล้วไม่ต้องอ่านเนื้อหาส่วนอธิบายเพิ่มเติมนี้ก็ได้ครับ

การกำหนดปลายทางของลิงก์ไปสู่หน้าหลักสามารถเขียนแบบย่อได้ว่า
index.html
เช่นถ้าหากเมนูนี้ถูกติดตั้งลงในบล็อก
http://tip.maxlayout.com/
การกำหนดลิงก์ว่า
<li class='has-sub'><a href='index.html'><span>Home</span></a></li>
จะให้ผลเหมือนกับ
<li class='has-sub'><a href='http://tip.maxlayout.com/'><span>Home</span></a></li>

การกำหนดข้อความลงไปในปลายทางของลิงก์จะะถูกนำไปเขียนต่อจาก URL ของบล็อกเกอร์เช่น
เช่นถ้าเมนูหากนี้ถูกติดตั้งลงในบล็อก
http://tip.maxlayout.com/
การกำหนดลิงก์ว่า
<li class='has-sub'><a href='search/label/Illustrator'><span>Photoshop</span></a></li>
จะให้ผลเหมือนกับ
<li class='has-sub'><a href='http://tip.maxlayout.com/search/label/Photoshop'><span>Photoshop</span></a></li>

ดังนั้นด้วยวิธีจากส่วนอธิบายเพิ่มเติมนี้จะสามารถนำไปเขียนโค้ดตัวอย่างในขั้นตอนที่ 5 ใหม่ให้สั้นลงได้ดังนี้
<!--Add Link Start-->
   <li class='last'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='Text%20Effect'><span>Text Effect</span></a>
      <ul>
         <li><a href='search/label/Photoshop'><span>Photoshop</span></a></li>
         <li><a href='search/label/Illustrator'><span>Illustrator</span></a></li>
         <li><a href='search/label/Fireworks'><span>Fireworks</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a><span>Graphic 3D</span></a>
      <ul>
         <li><a href='search/label/Lightwave'><span>Lightwave</span></a></li>
         <li><a href='search/label/3ds%20Max'><span>3ds Max</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='http://www.facebook.com/maxlayout'><span>Fanpage</span></a></li>
<!--Add Link Stop-->


credit:
http://www.nosegraze.com/how-to-add-a-drop-down-menu-navigation-in-blogger/
http://cssmenumaker.com/builder/938078
http://cssmenumaker.com/blog/tutorials/drop-down-menu-for-blogger
http://xomisse.com/blog/create-a-drop-down-navigation-menu/
http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-blogger.html

Post Status




5 ความคิดเห็น:

wiboon saewtew กล่าวว่า...

ขอบคุณมากครับ มีความรู้ได้ประโยชน์มาก ทำได้เล้วครับ

Max กล่าวว่า...

ถ้าบทความที่เขียนไว้นี้มีประโยชน์ก็ยินดีด้วยครับ สวัสดีปีใหม่นะ

ອານູສອນ ໄຊຍະລາດ กล่าวว่า...

ถ้าไม่มี ]]> ละทำไง

BulkSms Aamurautz กล่าวว่า...

This is a great article. It gave me a lot of useful information. thank you very much.
I would like to thank you for the efforts you have made in writing this article.
Bulk SMS Hyderabad, Bulk SMS

BulkSms Aamurautz กล่าวว่า...

This is a great article. It gave me a lot of useful information. thank you very much.
I would like to thank you for the efforts you have made in writing this article.
Bulk SMS Hyderabad, Bulk SMS

แสดงความคิดเห็น