a little bit of everything

สำหรับคนที่ทำเว็บและใช้เว็บก็คงจะคุ้นเคยกันดีกับหน้า sitemap ซึ่งโดยปกติก็จะเป็นหน้าที่รวบรวมลิงค์ไปยังทุกๆหน้ามาเรียงกันไว้อย่างมีระบบ สำหรับตัวเราเองเวลาทำเว็บแล้วก็จะทิ้งส่วนนี้ไว้เป็นส่วนสุดท้าย ซึ่งยอมรับเลยว่าบางครั้งไม่อยากทำเท่าไหร่ เพราะมันออกแนวน่าเบื่อและสำหรับหลายๆงานมันก็ไม่ได้อยู่ใน requirement ด้วยซ้ำ แต่ก็ต้องทำเพราะเป็นส่วนที่ควรจะทำ ซึ่งเวลาทำเข้าจริงๆแล้วก็ไม่พ้นต้องใช้ unordered list ไปเรื่อยๆ เหตุผลเพราะมันง่ายที่สุด แต่ผลลัพท์ที่ได้ออกมาก็ไม่ได้สวยงามเลยซักนิด

วันนี้ก็เลยจะลองใช้ css เขียนดูบ้าง โดยอกแบบให้ใช้กับเว็บขนาดเล็กถึงกลาง กะว่าเขียนทิ้งไว้เลย งานไหนๆก็จะใช้ประมาณนี้ เปลี่ยนแค่สีอย่างเดียว พอลงมือทำโดยใช้ css2 แล้วก็พบว่ามันไม่พอที่จะทำรูปแบบโครงสร้างแบบ tree อย่างที่ตั้งใจไว้ เลยต้องตัดใจใช้ css3 ซึ่งส่วนที่สำคัญคือ pseudo-class selector แล้วก็จัดการกับ ie 6 ด้วย javascript hack นิดๆหน่อย ออกมาก็ได้หน้าตาประมาณนี้

โค้ทที่เขียนและรูปภาพที่ใช้ก็พยายามให้มีน้อยที่สุด ที่ไม่ชอบเลยคือ javascript hack แต่จริงๆแล้วเวลาใช้ก็ไม่ต้อง hack ก็ได้ เพราะถ้าไม่นับ ie6 แล้วก็ยังสามารถดู sitemap ในบราวเซอร์อื่นๆที่ไม่สนับสนุน css3 ได้ ได้อาจจะผิดเพี้ยนไปบ้างเท่านั้นเอง ว่าไปเยอะแล้ว มาดูโค้ทบ้าง

ใครสนใจสามารถดาวน์โหลดโค้ททั้งหมดได้ -> download usitemap

ในส่วนของ HTML ก็จะใช้ unordered list ตามปกติ สามารถใส่ซ้อนกันไปได้เรื่อยๆ เช่น

<ul>
  <li>Home
    <ul>
      <li>Product
          <ul>
            <li>Computer</li>
            <li>Printer</li>
            <li>Scanner</li>
          </ul>
      </li>
      <li>Client</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </li>
</ul>

จากนั้นในส่วนของ css ก็จะเขียนให้มาควบคุมการแสดงผล โดยนอกจาก css แล้วยังได้ใช้รูป gif อีกทั้งหมด 4 รูปเพื่อให้ลากเส้นของโครงสร้างต้นไม้ ดังนี้

/*change color*/
#usitemap a, #usitemap a:visited{color:#4D6180;background: #B5C7E3;border: 1px solid #4D6180;}
#usitemap a:hover, #usitemap a:active{background: #90ABD5;}

/*sitemap core*/
#usitemap *{margin: 0;padding: 0;}
#usitemap ul li{list-style: none;position: relative;top: 0px;width: 120px;padding: 10px 40px 0 0;background-image: url(fork_mid.gif);background-position: top left;background-repeat: no-repeat;}
#usitemap ul li:last-child{ background-image: url(fork_last.gif); }
#usitemap ul li:first-child{ background-image: url(fork.gif); }
#usitemap ul li:only-child{ background-image: url(dotted.gif); background-repeat: repeat-x;}
#usitemap ul li ul li{left: 172px;top: 0px;font-size: .9em;}
#usitemap ul li ul{margin-top: -42px}
#usitemap ul li a{text-align: center;display: block;line-height: 28px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: 0 0px 0 50px;width: 120px;text-decoration: none;}

สุดท้ายก็ใช้ javascript hack สำหรับ ie โดยในที่นี้ใช้ ie-css3 ร่วมกับ jquery ประมาณนี้

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<!--[if (gte IE 5.5)&(lte IE 8)]>
<script type="text/javascript" src="ie-css3.js"></script>
<![endif]-->

*ไม่ต้องใช้ hack ก็ยังสามารถดู sitemap ได้ใน ie แต่เส้นที่ลากอาจจะผิดเพี้ยนไปบ้าง

แค่นี้ก็ได้ sitemap ง่ายๆ โดยไม่ต้องเสียเวลาไปกับมันมากอีกต่อไป!

ใครสนใจสามารถดาวน์โหลดโค้ททั้งหมดได้ -> download usitemap