Tạo menu giống trang theothao.zing.vn

Bài viết này được anh Fandung viết mình giới thiệu lại cho các bạn. Lần trước mình giới thiệu Menu ngang dạng này nhưng là tích hợp với biểu tượng các lá cờ không giống với trang thể thao.zing.vn do vậy hôm nay hình sẽ hướng dẫn lại menu mới giống hơn:

Xem DEMO : menu Zthethao

* Sau đây là code của thủ thuật :
1. Vào bố cục
2. Vào phần tử trang
3. Tạo 1 widget HTML/javascript và dán code bên dưới vào:

<style type="text/css">
.hide {display:none;}
#kmenu
{
    font-size:12px;
    height: 80px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipDGMuel1iAQxBCsrvtx33mVh3gKJNVncE1fMZwPRcwz_3EoAQD09M7HTEjx_fyjv3stl9-KXWm36vOFuYmcoC3MYs1SP8RTGeiAGLqcO7APJRT62nDuw-GXVJ2Vz0rDHdn10pHhaUW7qI/s1600/menu-bg-namkna-blogspot.gif) repeat-x;
}
#kmenu .kmenu-r
{
    height: 80px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirZEdzoX_SK5_8CaL3bvIx1fA9T7HOMGKT9Za24yl3ytq8Bn9vPuRqM-lOVQYek4Q77KrDObeoX3_93k0ve1XB6KxMSIWfVI0SLf6EWm69UUX03TiYqRnfJN-FpImw1fQHzdNt9_XdWxTw/s1600/menu-right-bg-namkna-blogspot.gif) no-repeat top right;
}
#kmenu .kmenu-l
{
    height: 80px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqGUfHh9RpHPthXsB2DJ2LpSsI1FwEo1fPIwdGzjrMHm146Wmhla_kycZ4kpUKb9JnwxlF7ioQY2OT8PzDtCxcWNHv-e58abFCbUVFPb-0UjfHnS-IS3xTqSKz7vwyQqfXLaDDjzPwGKoa/s1600/menu-left-bg-namkna-blogspot.gif) no-repeat top left;
}
#kmenu .homepage
{
    padding: 20px 0px 0px 8px;
    width: 78px;
    float: left;
}
#kmenu .homepage a
{
    font-weight: bold;text-decoration: none;
}
#kmenu .homepage a:hover
{
    color: #f68121;
    text-decoration: none;
}
#kmenu .mnav
{
    width: 800px;
    float: left;
    padding: 17px 0 0 20px;
}
#kmenu .mnav ul.zlstmnav
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: relative;
    height: 28px;
}
#kmenu .mnav .zlstmnav li
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    float: left;
}
#kmenu .mnav .zlstmnav li a
{
    float: left;
    display: block;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 0 0 0 0px;
    height: 27px;
    line-height: 27px;
    text-align: center;
    cursor: pointer;
    font-family: Arial;
}
#kmenu .mnav .zlstmnav li a span
{
    float: left;
    display: block;
    padding: 0 0px 0 20px;
}
#kmenu .mnav .zlstmnav li a:hover, #kmenu .mnav .zlstmnav li.selected a
{
    margin-top: 1px;
    height: 26px;
    line-height: 26px;
    background: #2e2e2e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggFVk5NmKJMzxwfXd2udFcskPbKDh0pGwNYeIWNzDsqueU8_bsaSbBGPMJ-HOM802oAMhJGRzHvYL4YVvK80BgKS2IS4MchbhCnjD41sBnZErQfKHia0h3MbZrra-TNuSl8aeqmNYIzORm/s1600/nav-left-bg-namkna-ngoctra.gif) no-repeat top left;
}
#kmenu .mnav .zlstmnav li.first a:hover
{
    background: #2e2e2e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwe5cZuXInVnLGtt3isYll28E_nh_egYtspvtjsP-iY14SRsY_hd9gNb80pF50HWpPo-FDXzib-q8KmGvAlqXN2W2DqOc5oZddB5WeVbs6TbJg86zoF1_6Tk9dziedKHIZN1or1WlAgCfg/s1600/nav-left-home-namkna-blogspot.gif) no-repeat top left;
}
#kmenu .mnav .zlstmnav li a:hover span, #kmenu .mnav .zlstmnav li.selected a span
{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF2eb71hz97lfYGx1qZmalnl1cUt5ca0Du86a5B5pzKzwSLkWrhcvO9JIitvV_TQcoZcgQUC6VhPkOK1VvV3FYdZ8K1AIcgGCQaCIjpNUH7WD4LyykLnMNcUkIHUCsoWfFhh9uuAcYuf_g/s1600/nav-right-bg-blogspot.gif) no-repeat top right;
    padding: 0 23px 0 23px;
}
#kmenu .submenu
{
    padding-left: 15px;
 padding-top: 3px;
}
#kmenu .submenu li
{
    float: left;list-style: none;
}
#kmenu .submenu li a
{
    color: #fff;
    display: block;
    padding-right: 15px;
    text-decoration:none;
}
#kmenu .submenu li a:hover
{
              color: #f68121;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXvZiArF7QFus_PPPbhNU_pSZMu9LY6gSDuKrRhsZEoevmGxOq9hhGiWnvVNi1O_-Tq45G3vyoNCpA5CQyTxLxeRERbkmheD1qbkUzWzts-EzqAFGru9LG2qhUYFUPbfR8TsiZ29chWnL0/s1600/icon-li-namkna-blogspot.png) no-repeat left;
 padding-left:14px;
}
#sub_FormSearch {float:right;}

#sub_FormSearch {
 padding:0 0px 3px 20px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWJ-azbzcAh3SECQFLqui3yxEl8xxsaScwP43i8KD9CEUVKtAMn5C-7S4CuWHWNv-VyWATgO6wGIcDTVGpWZQc86Pu8Y4SwRTWzCDNY-gcthB6SYs9Wjn8i7PCanUlFgtv4N3EMqzpDEWD/s1600/search-bg-namkna-blogspot.png) no-repeat top left;
 height:24px;
}
#sub_FormSearch .search {

 width: 200px;
 height: 25px;
        margin:0;
        padding:0;

 }
#sub_FormSearch input {

 width: 180px;
 height: 18px;
 margin: 1px 0 0 0;

 font: normal normal normal 11px/15px Verdana, Geneva, Tahoma, sans-serif;
 color: #fff;
        border:none;
 background-color: transparent;
 }
#sub_FormSearch .search-submit, #sub_FormSearch .button {
 display: none;
 }

</style>
<script src="https://dl.dropboxusercontent.com/u/66256041/Menu/namkna-blogspot/kMenu.js" type="text/javascript"></script>
<div id="kmenu">
    <div class="kmenu-r">
        <div class="kmenu-l">
            <div class="kmenu-c">
                <div class="homepage"><a href="http://namkna.blogspot.com">namkna</a></div>

  <div id="mn1" class="mnav">
                    <ul class="zlstmnav">
                        <li class="selected"><a id="mn_home" href=""></a></li>
                        <li class=""><a id="mn_1" href="#"><span>Menu 1</span></a></li>
                        <li class=""><a id="mn_2" href="#"><span>Menu 2</span></a></li>
                        <li class=""><a id="mn_3" href="#"><span>Menu 3</span></a></li>
                        <li class=""><a id="mn_4" href="#"><span>Menu 4</span></a></li>
                        <li class=""><a id="mn_5" href="#"><span>Menu 5</span></a></li>
                        <li class=""><a id="mn_6" href="#"><span>Menu 6</span></a></li>
       </ul>

                    <div class="submenu">
          <div id="main"></div>
                        <div id="sub_FormSearch" class="">
  <div class="search" id="search-">
                              <form action='/search/' class='search-form' id='search-form-' method='get'>
       <input class="search-text" id="search-text-" name="q" onBlur="if (this.value == &quot;&quot;) {this.value = &quot;Search on this site...&quot;;}" onFocus="if (this.value == &quot;Search on this site...&quot;) {this.value = &quot;&quot;}" tabindex="7" type="text" value="Search on this site..." />
       <input class="search-submit button" id="search-submit-" name="submit" tabindex="8" type="submit" value="Search" />
     </form>
                        </div></div>

  <div id="sub_home" class="hide" title="0">
                               <ul>
         <li><a href="#">Blogger</a> </li>
         <li><a href="#">Wordpress</a> </li>
         <li><a href="#">Joomla</a> </li>
     </ul>
                            </div>

                        <div id="sub_1" class="hide" title="0">
                            <ul style="padding-left: 0px;">
                                <li><a href="#">Sub Menu 1.1</a></li>
                                <li><a href="#">Sub Menu 1.2</a></li>
                                <li><a href="#">Sub Menu 1.3</a></li>
                            </ul>
                        </div>

                        <div id="sub_2" class="hide" title="0">
                            <ul style="padding-left: 0px;">
                                <li><a href="#">Sub Menu 2.1</a></li>
                                <li><a href="#">Sub Menu 2.2</a></li>
                                <li><a href="#">Sub Menu 2.3</a></li>
                            </ul>
                        </div>

                        <div id="sub_3" class="hide" title="10">
                            <ul style="padding-left: 10px;">
                                <li><a href="#">Sub Menu 3.1</a></li>
                                <li><a href="#">Sub Menu 3.2</a></li>
                                <li><a href="#">Sub Menu 3.3</a></li>
                            </ul>
                        </div>

                        <div id="sub_4" class="hide" title="190">
       <ul style="padding-left: 190px;">
                                <li><a href="#">Sub Menu 4.1</a></li>
                                <li><a href="#">Sub Menu 4.2</a></li>
                                <li><a href="#">Sub Menu 4.3</a></li>
                            </ul>
                        </div>

                        <div id="sub_5" class="hide" title="260">
      <ul style="padding-left: 260px;">
                                <li><a href="#">Sub Menu 5.1</a></li>
                                <li><a href="#">Sub Menu 5.2</a></li>
                                <li><a href="#">Sub Menu 5.3</a></li>
                            </ul>
                        </div>

                        <div id="sub_6" class="hide" title="320">
                            <ul style="padding-left: 320px;">
                                <li><a href="#">Sub Menu 6.1</a></li>
                                <li><a href="#">Sub Menu 6.2</a></li>
                                <li><a href="#">Sub Menu 6.3</a></li>
                            </ul>
                        </div>

                    </div>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    kMenu.Init('kmenu',o_ChannelRoot);
</script>

Trong đó:
-thay thê # thành liên kết đến trang, nhãn hoặc bài viết
- Thay thế các Sub menu thành tên của các bài viết
Ví dụ với Các bài viết về Thủ thuật Blog trong blogger trên namkna sẽ như sau:

- Các bạn nên Download File JS TẠI ĐÂY: http://data.fandung.com/blog/demo/zthetheo-menu/Zmenu/kMenu.js về và Upload lên Host riêng
- Các bạn nên Downloand các file ảnh về Upload lên trang của mình sau đó thay vào để phòng link ảnh bên Zing die bạn có thể Downland file ảnh TẠI ĐÂY sau khi download về thay vào tên tương ứng là được

4. Save widget

- 1 vài lưu ý :

* Code CSS :

#kmenu .mnav
{
    width: 800px;
    float: left;
    padding: 17px 0 0 20px;
}

- 800px là độ rộng của vùng hiển thị sub menu, kể cả vùng hiển thị form search. Nếu độ rộng này lớn hơn độ rộng của vùng hiển thị của cả menu (hoặc độ rộng của blog) thì sẽ gặp 1 lỗi như bên dưới :

-thay đổi giá trị 800px lại cho thích hợp
* Căn lề trái cho submenu:
- nếu không căn lề trái (padding:left) thì các submenu đều nằm hết ở phía bên trái. Việc căn lền trái nhằm giúp cho submenu hiển thị ngay dưới menu chính. Ví dụ ta xem đọan code của submenu6

<div id="sub_6" class="hide" title="320">
                            <ul style="padding-left: 320px;">
                                <li><a href="#">Sub Menu 6.1</a></li>
                                <li><a href="#">Sub Menu 6.2</a></li>
                                <li><a href="#">Sub Menu 6.3</a></li>
                            </ul>
                        </div>

- ta thấy giá trị padding-left ở đây là 320px, thoạt nhìn vô ta sẽ chỉnh ngay đọan code ở trong thẻ ul, nhưng thực chất file js lấy giá trị title=”320″ ở thẻ div để canh lề cho submenu. Vì thế các bạn muốn căn lề cho các sub thì thay đổi giá trị title. Còn giá trị ở thẻ ul chỉ nhằm giúp ta dễ hiểu hơn mà thôi.

- nếu submenu ở menu chính cuối cùng nằm gần phía bên phải quá sẽ đụng phải form search, và form search sẽ bị trồi xuống dưới như hình bên dưới :

- nếu mắc lỗi này các bạn chỉ việc giảm giá trị padding-left đi là ok.

Chúc các bạn thành công!

Nhận xét

laptop culúc 16:55:00 GMT+7 Thứ Sáu, 21 tháng 12, 2012
Trong màn hình [URL=http://www.laptopanbai.vn/laptop-cu-gia-re/]laptop cu[/URL] thì việc sidebar nên đặt bên Trái hay Phải vậy bạn? Nhưng khi xem một trang web, theo thói quen, mắt của ta sẽ nhìn theo hướng từ trái sang phải, và từ trên xuống dưới. Nếu mình đặt sidebar ở bên phải, điều đó khiến cho người đọc dễ dàng nhìn thấy nội dung chính nằm ở bên trái web. Nếu site có mục đích để thu lợi nhuận, quảng cáo quan trọng hơn nội dung chính của bạn. Đặt sidebar bên trái sẽ giúp người đọc bị thu hút vào chúng.Vậy mình phải làm sao đây?
Trả lờiXóa
Trả lời
Quoc Khanh Builúc 19:19:00 GMT+7 Thứ Tư, 4 tháng 9, 2013
Link file js đã hỏng, em phải làm sao?
Trả lờiXóa
Trả lời
Unknownlúc 12:34:00 GMT+7 Thứ Tư, 30 tháng 10, 2013
a ơi cho e hỏi chút.cái blogpot (http://giasuhaiphong89.blogspot.com/)của e cái menu ngang xổ xuống nhiều cấp, nhưng sao khi e di chuột vào nó k xỏ xuống.chỉ khi e cho width: lớn px; thì nó mới xoạc xuống.a chỉ e giúp lỗi với a.e cám ơn anh nhiều

Trả lờiXóa
Trả lời
Unknownlúc 10:24:00 GMT+7 Thứ Năm, 31 tháng 10, 2013
Nhận xét này đã bị tác giả xóa.
Trả lờiXóa
Trả lời
Unknownlúc 01:37:00 GMT+7 Chủ Nhật, 17 tháng 11, 2013
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóa
Trả lời

Thêm nhận xét

Tạo menu giống trang theothao.zing.vn

Đăng bởi: Namkna

Bạn có thể thích những bài đăng này

Nhận xét

CÔNG TY TNHH EXPRESSNO1