Hôm nay tôi xin giới thiệu với các bạn tạo kiểu Menu ngang rất đẹp. Mời bạn kham thảo trang web Stockbiz.vn. Bạn có thể xem trang Demo của Dynamic Drive ở đây.
Qua quá trình nguyên cứu tôi đã tham khảo và chỉnh sữa 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 tôi ở đâ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>.
Qua quá trình nguyên cứu tôi đã tham khảo và chỉnh sữa 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 tôi ở đâ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
>
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 <img src='http://bit.ly/hjpshO' /></a> <a href='#'>Giới thiệu </a> | <a href='#'>Liên hệ</a></div> <div id='sc2' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS <img src='http://bit.ly/hjpshO' /></a> <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 <img src='http://bit.ly/hjpshO' /></a> <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 <img src='http://bit.ly/hjpshO' /></a> <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 <img src='http://bit.ly/hjpshO' /></a> <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 <img src='http://bit.ly/hjpshO' /></a> <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>
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.
THEO: http://www.bloggerism.tK
0 nhận xét:
Đăng nhận xét
Đây là Blog cộng đồng, có thể trao đổi và học hỏi vì vậy mọi nhận xét các bạn nên dùng những từ dễ nghe, không nên dùng những lời tục tiểu thiếu văn hóa.Cám ơn các bạn.