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




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

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

Anand P กล่าวว่า...

This is really a great article and It would helo the developers who are looking to add the drop down menu navigation in the website they are about to develop.


web design company in chennai

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