Tạo Top menu dạng Tabbed cố định khi cuộn trang

Trong bài viết này tôi sẽ hướng dẫn bạn tạo Top menu dạng Tabbed cố định trên trang, khi chiều cao dữ liệu của bạn nhiều hơn chiều cao màn hình thì bạn cuộn văn bản nhưng Topmenu này vẫn được dữ nguyên vị trí.

Trong bài viết này tôi sẽ hướng dẫn bạn tạo Top menu dạng Tabbed cố định trên trang, khi chiều cao dữ liệu của bạn nhiều hơn chiều cao màn hình thì bạn cuộn văn bản nhưng Topmenu này vẫn được dữ nguyên vị trí.

DEMO :: DOWNLOAD (Các ảnh trong css)

Bài này ta sử dụng StyleSheet nên cơ bản là ta dùng CSS.

Code Css được viết như sau:

#taskbar
{ height:33px; awidth:100%; top:0; left:0; position:fixed; bottom:auto; z-index:9999999; background:url(images/bg-taskbar.gif) repeat-x 0 0; } 
#taskbar a{text-decoration:none;} 
.taskbar{ awidth:990px; margin:0 auto; } 
.taskbar-sort li{ float:left; list-style:none; margin-top:5px; } 
.taskbar-sort li a, .taskbar-sort li a span{ height:28px; display:block; float:left; } 
.taskbar-sort li a{ padding-left:10px; color:#eee; line-height:28px; } 
.taskbar-sort li a span{ padding-right:10px; } .taskbar-sort li a.active, 
.taskbar-sort li a:hover{ color:#444; text-decoration:none; background:url(images/bg-taskbar-active.gif) no-repeat 0 0; } 
.taskbar-sort li a.active{ color:#333; font-weight:bold; } 
.taskbar-sort li a.active span, .taskbar-sort li a:hover span{ background:url(images/bg-taskbar-active.gif) no-repeat 100% 0; } 
.taskbar-sort li a.active .icon-tasbar-nl, .taskbar-sort li a:hover .icon-tasbar-nl{ background:url(images/icon-nl-taskbar-active.gif) no-repeat 0 0; } 
.taskbar-sort li a.active .icon-tasbar-pp, .taskbar-sort li a:hover .icon-tasbar-pp{ background:url(images/icon-pp.png) no-repeat 0 0; }

Trong code html nơi bạn muốn hiển thị TopMenu bạn chèn code như sau:

<div id="taskbar"> <div class="taskbar"> <div class="taskbar-sort"> <ul> <li><a href="#" class="active" ><span>Trang chủ</span></a></li> <li><a href="#" ><span>Truyền hình trực tuyến</span></a></li> <li><a href="#" ><span>Công nghệ</span></a></li> <li><a href="#" ><span>Học tập</span></a></li> <li><a href="#" ><span>Phim online</span></a></li> <li><a href="#"><span>Khoa học và đời sống</span></a></li> <li><a href="#"><span>VTV Media</span></a></li> <li><a href="#"><span>VOV Media</span></a></li> </ul> </div> </div> </div>

Bạn chú ý khi chọn Tabbed tương ứng thì bạn cần dùng jquery hoặc javascript để chuyển Class tương ứng. Mặc định là class="active" ở trang chủ

Nội dung bài viết tham khảo trên http://htmldrive.net/

Nguồn:http://www.thietkewebsmart.com/html-css/jquery-scrollbars-tao-thanh-cuon-ngang-tu-dong-scoll-khi-di-chuot/900.htm