Tạo kiểu menu đẹp với DD Tabe Menu Script

Mình làm việc trong lĩnh vực tài chính nên thường xuyên đọc tin tức trên trang Stockbiz.vn. Và mình lại thích webdesign nên từ lâu đã nghía đến kiểu menu đẹp tại trang này. Vì thế hy vọng một ngày nào đó sẽ giới thiệu cho bạn đọc cách tạo kiểu menu như vậy. Khi tìm hiểu ngọn nguồn mới biết đó là DD Tab Menu do Dynamic Drive phát triển. Bạn có thể xem trang Demo của Dynamic Drive ởđây.

Qua quá trình nguyên cứu mình đã chỉnh code từ Menu của trang Stockbiz.vn cho gọn gàng hơn, chuyên nghiệp hơn và đặc biệt là dễ cài đặt đối với người chưa biết nhiều về webdesign. Bạn có thể xem Demo của mình ở đây

Sau đây là các bước thực hiện.

Bước 1. Đặt đoạn code dưới đây vào trước thẻ </head>.
<script src="http://hacodeproject.googlecode.com/files/ddtabmenu.js" type="text/javascript"></script>
<script type="text/javascript">
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
ddtabmenu.definemenu("ddtabs", 0) //initialize Tab Menu with ID "ddtabs1" and select 1st tab by default
</script>

<style type="text/css">
.basictab{float:left;line-height:normal;/*border-bottom:1px solid #7e9fff;Add border strip to bottom of menu*/}
.basictab ul{list-style-type:none;margin:0;margin-left:5px;/*Left offset of entire tab menu relative to page*/padding:0}
.basictab li{display:inline;margin:0;padding:0}
.basictab a{float:left;background:url(http://bit.ly/hGffu7) no-repeat left top;margin:0;margin-right:5px;/*spacing between each tab*/padding:0 0 0 9px;text-decoration:none}
.basictab a span{float:left;display:block;background:url(http://img411.imageshack.us/img411/421/glowtab.gif) no-repeat right top;padding:5px 12px 3px 3px;font-weight:bold;color:#3B3B3B}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.basictab a span{float:none}
/* End IE5-Mac hack */
.basictab a:hover span{color:White}
.basictab a.current{/*Selected Tab style*/background-position:0 -82px;/*Shift background image up to start of 2nd tab image*/}
.basictab a.current span{/*Selected Tab style*/background-position:100% -82px;/*Shift background image up to start of 2nd tab image*/color:White}
.basictab a:hover{/*onMouseover style*/background-position:0% -82px;/*Shift background image up to start of 2nd tab image*/text-decoration:none}
.basictab a:hover span{/*onMouseover style*/background-position:100% -82px;/*Shift background image up to start of 2nd tab image*/}
.tabcontainer{clear:left;width:998px;/*width of 2nd level sub menus*/height:1.5em;/*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/background:#035EB7;height:30px;font-size:11px}
.tabcontent{display:none;color:White;padding-top:5px;padding-left:13px;float:left}
.tabcontent a{color:White;font-size:12px;padding:4px 7px 0 7px;text-decoration:none}

.haSearch{float:right;font-weight:bold;padding-right:5px;padding-top:4px}
.haSearchInput{-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;height:16px;padding:3px;text-align:left;width:200px;font-size:11px;background-color:White}
.haSearchTextBox{border:0 none;float:left;font-size:11px;height:14px;left:24px;width:100px}
.btn{height:15px;width:15px;border-width:0;float:right}
</style>

Trong đoạn code CSS ở trên, bạn cần điều chỉnh tham số width:998px cho phù hợp với chiều rộng phần main của trang web.

Bước 2. Thiết lập cấu trúc HTML như dưới đây và đặt trong phần thân trang web, giữa 2 thẻ <body>, </body>.

<div id="ddtabs" class="basictab">
<ul>
<li><a href='#' rel='sc1'><span>Trang chủ</span></a></li>
<li><a href='#' rel='sc2'><span>Menu I</span></a></li>
<li><a href='#' rel='sc3'><span>Menu II</span></a></li>
<li><a href='#' rel='sc4'><span>Menu III</span></a></li>
<li><a href='#' rel='sc5'><span>Menu IV</span></a></li>
<li><a href='#' rel='sc6'><span>Menu V</span></a></li>
</ul>
</div>

<div class="tabcontainer">

<div id='sc1' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Giới thiệu </a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href='#'>Liên hệ</a></div>

<div id='sc2' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu I.1</a> |
<a href='#'>Submenu I.2</a> |
<a href='#'>Submenu I.3</a> |
<a href='#'>Submenu I.4</a> |
<a href='#'>Submenu I.5</a> |
<a href='#'>Submenu I.6</a> |
<a href='#'>Submenu I.7</a></div>

<div id='sc3' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu II.1</a> |
<a href='#'>Submenu II.2</a> |
<a href='#'>Submenu II.3</a> |
<a href='#'>Submenu II.4</a> |
<a href='#'>Submenu II.5</a> |
<a href='#'>Submenu II.6</a> |
<a href='#'>Submenu II.7</a></div>

<div id='sc4' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu III.1</a> |
<a href='#'>Submenu III.2</a> |
<a href='#'>Submenu III.3</a> |
<a href='#'>Submenu III.4</a> |
<a href='#'>Submenu III.5</a> |
<a href='#'>Submenu III.6</a> |
<a href='#'>Submenu III.7</a></div>

<div id='sc5' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu IV.1</a> |
<a href='#'>Submenu IV.2</a> |
<a href='#'>Submenu IV.3</a> |
<a href='#'>Submenu IV.4</a> |
<a href='#'>Submenu IV.5</a> |
<a href='#'>Submenu IV.6</a> |
<a href='#'>Submenu IV.7</a></div>

<div id='sc6' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu V.1</a> |
<a href='#'>Submenu V.2</a> |
<a href='#'>Submenu V.3</a> |
<a href='#'>Submenu V.4</a> |
<a href='#'>Submenu V.5</a> |
<a href='#'>Submenu V.6</a> |
<a href='#'>Submenu V.7</a></div>

<div class="haSearch"> 
<div class="haSearchInput"> 
<form action='http://www.google.com/custom' id='searchform' method='get' style='display:inline;'>
<input type="hidden" name="sitesearch" value="huynh-nhat-ha.blogspot.com" />
<input class="haSearchTextBox" name='q' onblur='if (this.value == "") {this.value = "Nhập từ cần tìm...";}' onfocus='if (this.value == "Nhập từ cần tìm...") {this.value = ""}' type='text' value='Nhập từ cần tìm...'/>
<input class='btn' name='' src='http://bit.ly/hSgufo' type='image' value='Go'/>
</form>
</div>
</div> 

</div>

Trong cấu trúc HTML ở trên, bạn cần đặt tên Menu, Submenu và URL (thay vào vị trí các dấu #) tương ứng. 

Kiểu menu này có thể cài đặt cho Blogger dễ dàng tương tự như cách cài đặt đối với website thông thường.

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com