Thích trang
    Trở thành fan của Tanchau123.blogspot.com

    Bạn muốn nhận tin tức mới nhất từ Tanchau123.blogspot.com? Hãy nhấn nút "Thích" bên dưới để nhận thông tin mới nhất từ chúng tôi trên Facebook.

T

a

n

chau123

Blog Giải Trí Tổng Hợp

trang chủ
Báo lỗi bài
    Báo lỗi thông tin bài viết

    Nhập thông tin báo lỗi vào ô bên dưới

18:38 ngày 27/3/12

Menu ngang xổ dọc một cấp cho blogspot

Hôm nay mình sẽ giới thiệu cho các bạn một mẫu menu Drop mới dành cho các bạn có nhu cầu. Đặc điểm của Menu này là chỉ xổ 1 cấp, tuy nhiên giao diện nhìn hấp dẫn hơn so với mẫu lần trước mình giới thiệu.






Cách tiến hành:


   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
   4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin>
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
width: 100%;float: left;
background: #222;
font-size: 1.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrLbNWzBXN88SHMRlbzLqqrBIs4Jb75cmm1c9Oi18CmAuYJymzSEdjqB3yKbSGb8WdxxxKXlsiQiI75cs6ZMgQnC1B8EnafX0terPeE_tUKStUtrfFNPNcHAAWsMJEGKCQQwtOEV1S2h8X/s1600/topnav_bg-namkna-ngoctra.png) repeat-x;
z-index:100}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/z-index:100}
ul.topnav li a{
padding: 10px 5px;
color: #fff;display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLDdBE6YGDEF8WZP5i9lnQetLaQ7cSreII3z0yc3nk7WXni70CsFe-cC9Nq5klhs-A4rYVaeGZcyBCJI1bjBiSzGLKVRAsRNVggyc9ZZnH8ieOM3Zp4GidcRz1h7aefhOJ_RyaxBxkwIrC/s1600/topnav_hover-namkna-ngoctra.png) no-repeat center top;
z-index:100}
ul.topnav li span { /*--Drop down trigger styles--*/width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpocqtn5M6PE1vXraBURD464Msc2CccQgck6vFsFgfWKWRJHj0kqsYpIuLWe-R2-Wkg9YXnMEPP6KQ2LNjd0U-R4DzBazXw3aB2uyVERr-JYjyCpGccVwtzqFH1c5tJzYBIh69hSyYVD7F/s1600/subnav_btn-namkna-blogspot-ngoctra.png) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/border-bottom: 1px solid #444; /*--Create bevel effect--*/clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnC3WpLBc-ovQZg1gDMsalRE7Kj5jhVnHo5L0y0vzKf5v1OW-LZLRRRwjAkGpcqqNZB6YTrZz31wF03zQ7XMCVaIqyVC31SCORaZAaexAs7FFoQqdxRe2Y60R33DveGwgZeSDGYCKJe5qx/s1600/dropdown_linkbg-namkna-blogspot-ngoctra.png) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnC3WpLBc-ovQZg1gDMsalRE7Kj5jhVnHo5L0y0vzKf5v1OW-LZLRRRwjAkGpcqqNZB6YTrZz31wF03zQ7XMCVaIqyVC31SCORaZAaexAs7FFoQqdxRe2Y60R33DveGwgZeSDGYCKJe5qx/s1600/dropdown_linkbg-namkna-blogspot-ngoctra.png) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
   5- Thêm đoạn mã sau vào trước thẻ  </head> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav $(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked... //Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click $(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});
});
</script>
   6- Lưu template lại.
   7- Vào Phần tử trang Thêm 1 tiện ích HTML/Javarscrip trên phần header và thêm đoạn code sau vào:

<ul class='topnav'>
<li><a href='/'>Home</a></li>
<li>
<a href='#'>Menu 1</a>
<ul class='subnav'>
<li><a href='#'>Menu con 1.1</a></li>
<li><a href='#'>Menu con 1.2</a></li>
<li><a href='#'>Menu con 1.3</a></li>
<li><a href='#'>Menu con 1.4</a></li>
<li><a href='#'>Menu con 1.5</a></li>
</ul>
</li>
<li>
<a href='#'>Menu 2</a>
<ul class='subnav'>
<li><a href='#'>Menu con 2.1</a></li>
<li><a href='#'>Menu con 2.2</a></li>
<li><a href='#'>Menu con 2.3</a></li>
<li><a href='#'>Menu con 2.4</a></li>
<li><a href='#'>Menu con 2.5</a></li>
<li><a href='#'>Menu con 2.6</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
</ul>
=> Đây là mẫu code chuẩn, bạn có thể thêm code cuả blog mình ở phía dưới code này để xem thử kết quả. 
<ul class='topnav'>
<li><a href="http://tanchau123.blogspot.com" target="_blank" title="Trang chủ"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxTSNb7ak-hcsTHztEcO6pOWZ-j1y8zuwOStIXx6CelmNehqxR_nw3Zk_4kLiccbHF6ULGbguUj1XCz4SACRTZ0dge2eLbPIZzklKbkOJIu5Zlqp-qHym2KaxiNLXuKpYJY-N4EEH7tJk/s1600/home_white_namkna-ngoctra.png" width="20" height="20" border="0" class="favicon" title="Trang chủ" /></a></li>
<li>
<a href='#'>Phim Online</a>
<ul class='subnav'>
  <li><a href='http://tanchau123.blogspot.com/p/hoat-hinh.html'>Hoạt Hình</a></li>
  <li><a href='http://tanchau123.blogspot.com/p/phim-bo.html'>Phim Bộ</a></li>
  <li><a href='http://tanchau123.blogspot.com/p/phim-da-su-co-trang.html'>Dã Sử - Cổ Trang</a></li>
  <li><a href='http://tanchau123.blogspot.com/p/phim-hai-huoc.html'>Hài Hước</a></li>
  <li><a href='http://tanchau123.blogspot.com/p/lien-he.html'>Hành Động</a></li>
  <li><a href='http://tanchau123.blogspot.com/p/code-du-phong.html'>Kinh Dị</a></li>
  <li><a href='http://tanchau123.blogspot.com/p/phim-phieu-luu.html'>Phiêu Lưu</a></li>
  <li><a href='http://tanchau123.blogspot.com/p/code-vao-tuong.html'>Tâm Lý</a></li>
  <li><a href='http://tanchau123.blogspot.com/p/phim-than-thoai.html'>Thần Thoại</a></li>
  <li><a href='http://tanchau123.blogspot.com/p/phim-tinh-cam.html'>Tình Cảm</a></li>
  <li><a href='http://tanchau123.blogspot.com/p/phim-vien-tuong.html'>Viễn Tưởng</a></li>
  <li><a href='http://tanchau123.blogspot.com/p/phim-vo-thuat.html'>Võ Thuật</a></li>
</ul>
</li>
<li>
<a href='#'>Xem Tivi</a>
<ul class='subnav'>
<li><a href='http://tanchau123.blogspot.com/2012/02/xem-tivi-online.html'>Tất cả các kênh</a></li>
  <li><a href='http://tanchau123.blogspot.com/2012/03/kenh-hoat-hinh-nhat-anime.html'>Anime</a></li>
  <li><a href='http://tanchau123.blogspot.com/2012/03/kenh-espn-brazil.html'>ESPN</a></li>
  <li><a href='http://tanchau123.blogspot.com/2012/03/vtv1.html'>VTV1</a></li>
  <li><a href='http://tanchau123.blogspot.com/2012/03/vtc1.html'>VTC1</a></li>
  <li><a href='http://tanchau123.blogspot.com/2012/03/vtc3.html'>VTC3</a></li>
  <li><a href='http://tanchau123.blogspot.com/2012/03/yan-tv.html'>Yan TV</a></li>
  <li><a href='http://tanchau123.blogspot.com/2012/03/htv3.html'>HTV7</a></li>
  <li><a href='http://tanchau123.blogspot.com/2012/03/htv9.html'>HTV9</a></li>
  <li><a href='http://tanchau123.blogspot.com/2012/03/sctv1.html'>SCTV1</a></li>
  <li><a href='http://tanchau123.blogspot.com/2012/03/thvl1.html'>THVL</a></li>
  <li><a href='http://tanchau123.blogspot.com/2012/03/vtv-can-tho-1.html'>Cần Thơ</a></li>
  <li><a href='http://tanchau123.blogspot.com/2012/03/ha-noi-1.html'>Hà Nội</a></li>
</ul>
</li>
<li>
<a href='#'>Nhạc</a>
<ul class='subnav'>
  <li><a href='http://tanchau123.blogspot.com/2012/03/top-music-songs.html'>Bình chọn</a></li>
  <li><a href='http://nhac-tanchau123.blogspot.com'>Nghe online</a></li>
  <li><a href='http://tanchau123.blogspot.com/p/nhac-viet-nam.html'>Việt Nam</a></li>
  <li><a href='http://tanchau123.blogspot.com/p/nhac-au-my.html'>Âu - Mỹ</a></li>
  <li><a href='#'>Hàn Quốc</a></li>
</ul>
<li><a href='http://tanchau123.blogspot.com/p/hai-kich.html'>Hài Kịch</a></li>
<li><a href='http://www.blogger.com/share-post-menu.g?blogID=6091644904056790007'>Chia Sẻ</a></li>
<li><a href='http://tanchau123.blogspot.com/2012/02/trao-oi-lien-ket-blog-web.html'>Liên Kết</a></li>
<li><a href='http://tanchau123.blogspot.com/p/contact-me.html'>About me</a></li>
</li></ul>
- Trong đó:  
  • Thay dấu # (màu đỏ)bằng liên kết tới nhãn, bài viết
  • Thay dấu (màu cam) thành liên kết tới nhãn bài đăng thuộc Menu con.
  • Thay chữ màu xanh đậm thành tên nhãn, bài viết thuộc menu chính.
  • Thay chữ màu xanh nhạt thành tên bài viết nhãn thuộc menu con.

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

Mới cập nhật

1 nhận xét

· Thêm biểu tượng cảm xúc

  1. Nặc danh11:48 1/2/13

    Quality articles or reviews is the secret to attract the people to go
    to see the web site, that's what this website is providing.
    Review my website ... Charles Davidson

    Trả lờiXóa