การซ่อน Navbar อย่างมีเยื่อใย

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

พื้นที่ที่จะต้องสงวนไว้สำหรับการซ่อน Navbar จะอยู่ที่ 30px ของตำแหน่งบนสุด โดยการตั้งค่าบล็อกให้ต่ำลงมา ถ้าไม่แล้ว Navbar จะแสดงทับส่วนบนของบล็อก อันนี้ก็หากันเองน๊ะครับว่าบล็อกของแต่ละคนจะตั้งค่ากันตรงไหน เพราะการวางรูปแบบอาจจะไม่เหมือนกัน สำหรับของผมจะตั้งค่าไว้ตามโค๊ดข้างล่างนี้

#top-sidebar-wrapper {
border: 0px solid $SBbdColor;
background-color: $SBbgColor;
  margin-right:10px;
  position: absolute;
    right:29px;
    top:30px; /* ห่างจากตำแหน่งบนสุด 30 px */
    width:315px;
    background-repeat: repeat-x;
    background-position: center top;
}

บางบล็อกอาจจะอยู่ที่ main-wrapper, sidebar-wrapper, header-wrapper และอาจจะต้องแก้ไขมากกว่า 1 ที่ก็เป็นไปได้

สำหรับโค๊ดที่ต้องแก้ไข
โค๊ดเดิม (ลบทิ้ง หรืออาจจะ remark ออกไปก็ได้ เผื่อจะเปลี่ยนใจมาใช้ใหม่)
/*#navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none
}*/





โค๊ดใหม่ อย่างมีเยื่อใย
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

สามารถดูตัวอย่างจากบล็อกนี้ได้โดยการเลื่อนเมาส์ไปที่ตำแหน่งบนสุด