Bạn chưa có Tài khoản Diễn đàn?  Tạo một tài khoản

Đăng nhập

Duy trì trạng thái đăng nhập
Không thể truy cập vào tài khoản của bạn?

Hoặc


VIETAF - VIET NAM AGRICULTURE AND FISHERIES

Diễn Đàn Chăn Nuôi Việt Nam Online

Cộng đồng Chăn Nuôi

Tham gia thảo luận, chia sẻ kiến thức lĩnh vực Chăn Nuôi và tìm cho mình cơ hội việc làm tốt nhất.

Chia sẻ giao tiếp nhanh chóng

Bạn cần lời khuyên ngay? Hãy nhấn vào biểu tượng chat ngay với hỗ trợ và thành viên khác để có được lời khuyên tốt và tin cậy nhất!

Phản ảnh đa chiều kiến thức chăn nuôi

Cập nhật nhanh các kiến thức chuyên ngành và chia sẻ với mọi người một cách trực quan nhất.

Bạn có biết?

Bạn có thể kết nối với chúng tôi qua Facebook Youtube hoặc Blogger

Kết quả cho từ khoá ""

Đăng ký
Hỗ Trợ Trực Tuyến

VIETAF - Diễn Đàn Chăn Nuôi Việt Nam

VIETAF - Diễn Đàn Chăn Nuôi Việt Nam | Giúp nhà nông chăn nuôi thành công

Lên đầu trang
Chào mừng bạn đến với diễn đàn VIETAF - Diễn đàn Chăn Nuôi Việt Nam Online
Địa chỉ hiện tại của diễn đàn là www.vietaf.com
Vui lòng gửi cho chúng tôi một email về info@dntgiang.com nếu bạn có bất kỳ góp ý nào về diễn đàn và nhận 10 điểm tín nhiệm
Bạn có nguyện vọng đóng góp vào diễn đàn? Gửi yêu cầu về info@dntgiang.com và tham gia với chúng tôi ngay.
LIÊN HỆ QUẢNG CÁO info@dntgiang.com

Thành viên nổi bật



You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down   Thông điệp [Trang 1 trong tổng số 1 trang]

1 #on 06/05/10, 01:53 pm

avatar

Mr.Winni
avatar

Mr.Winni

Ảnh Bìa : gcover_photo

Giới tính : Nam

Tổng số bài gửi : 838

Uy tín : 87

Tuổi : 26

Status : Hãy làm thuê như một ông chủ


Administrator

Administrator
Đây là 1 style hoàn toàn mới cho các menu nằm ngang có hiệu ứng sổ dọc, thay vì trước kia ta chỉ hiển thị các menu con khi rê chuột vào menu chính, thì ở thủ thuật này khi nó sẽ hiển thị 1 tab khi rê chuột vào menu chính, và trong tab đó ta hoàn toàn có thể thêm vào bất cứ cái gì ta muốn. Như trong bài này sẽ hiển thị list bài viết mới và các chuyên mục con.
Demo: danong.com
Hình minh họa:

Để đơn giản các bạn dán tất cả code này vào cùng mộ chỗ:
Code:
<script src="http://winni.110mb.com/Js-File/Menudanong.js" type="text/javascript"></script>

<style type="text/css">
#nav {
height:24px;
padding-top:5px;
margin:0px 0 0 0;
color:#eee;
}

#nav span {
color: #000;
font-weight: bold;
cursor: pointer;
padding-right:2px;
}

#nav a {
border-left:1px #000 solid;
color:#000;
text-decoration:none;
padding-left:3px;
padding-left:2px;
margin-right:0px
}

#nav a:hover {
text-decoration:underline
}

#nav .mainNav {
width: 980px;
padding-left:10px;
position:relative;
margin: 0px auto 0px auto;
z-index: 1000;
}

#sub_menu {
background:#4d4c4c url(http://danong.com/images/default/bg_sub_nav.gif) repeat-x 0 0;
height:20px;
border-bottom:1px #606060 solid;
margin-bottom:15px
}

.menuWrap {
float: left;
display:block;
position:relative;

}
.menuSub {
/*visibility:hidden;*/
position:absolute;
}

.BmenuSub {
/*visibility:hidden;*/
position:absolute;
top:-200px;
}

.menuMain {
clear:both;
padding: 0px 3px 0px 0px;
}

.menuMain a {
font-weight:bold;
}
.inv {
width: 10px;
height: 10px;
z-index:-100;
float: left;
display: none;
}


/* Drop Down Menu */
.drop_down {
border:1px #888787 solid;
position:relative;
/*width:450px;*/
padding:10px;
background:#000 url(http://danong.com/images/default/bg_nav_submenu_2.gif) repeat-y 35px 0
}

.drop_down .left {
float:left;
width: 270px;
}
.drop_down .right {
float:right;
width:160px;

}

.drop_down .right .sectionStar {
background:url(http://danong.com/images/default/ico_section_star.gif) no-repeat 0 5px;
background-color: #383838;
}

.drop_down .sectionStar2 {
background:url(http://danong.com/images/default/ico_section_star.gif) no-repeat 0 5px !important;
background-color: #383838 !important;
width: 170px;
height: 20px;
padding-top:5px;
}

.drop_down .right li {
padding-left:15px;
font-weight:normal;
background:url(http://danong.com/images/default/ico_section.gif) no-repeat 0 5px;
border-bottom:1px #404040 solid;
line-height:20px
}

.drop_down .celebs_left {
float:left;
width: 170px;
}

.drop_down .celebs_right {
float:right;
width:190px;
}

.drop_down .n_links .celebs_right .section li {
padding-left:15px;
font-weight:normal;
background:url(http://danong.com/images/default/ico_section.gif) no-repeat 0 5px;
border-bottom:1px #404040 solid;
line-height:20px
}

.drop_down .gallery_left {
float:left;
width: 280px;
}

.drop_down .gallery_right {
float:right;
text-align:center;
width:150px;
}

.drop_down .topics {
float:left;
width:120px;
}

.drop_down .objects {
float:left;
width:120px;
}


.drop_down h2 {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 10px;
letter-spacing:normal !important;
}

.drop_down h4 {
font-size:11px;
letter-spacing:0;
font-weight:bold;
font-family:Arial, sans-serif
}


.drop_down a {
color:#c8effd;
text-decoration:none;
font-weight:bold
}

.drop_down a:hover {
text-decoration:underline
}


.drop_down .opa_bckgrd {
position:absolute;
top:0;
left:0;
background:black;
width:350px;
height:245px;
filter:alpha(opacity=65);
opacity:0.65
}
/*
.drop_down .n_links {
position:absolute;
top:0;
left:0;
padding:15px 10px 0 10px;
width:330px;
height:230px
}
*/

.drop_down .custom_channel {
font-size: 18px;
text-transform:uppercase;
font-family:arial,Lucida Sans Unicode, Lucida Grande, sans-serif;
font-weight: normal;
letter-spacing:-1px;
color: white;
padding-bottom:10px;
}

.drop_down ul {
margin-bottom:10px;
overflow:hidden;
list-style:none;
}

.drop_down .c_keywords li {
float:left;
padding-right:5px;
margin-right:5px;
border-right:1px #a4a4a4 solid
}

.drop_down .n_links .read_more {
clear:both;
display:block;
padding-left:18px;
font-weight:bold;
background:url(http://danong.com/images/default/ico_more_b.gif) no-repeat 0 1px
}

.drop_down .n_links .more_articles li {
padding-left:13px;
background:url(http://danong.com/images/default/ico_article_b.gif) no-repeat 0 3px
}

.drop_down .n_links .more_articles a {
font-weight:normal
}

.drop_down .n_links .section li {
padding-left:13px;
background:url(http://danong.com/images/default/ico_square.gif) no-repeat 3px 6px;

}

.drop_down_title {
padding-bottom:10px;
font:18px "optima", Arial, Helvetica, sans-serif;
}

.drop_down .channel_home {
font-size: 18px;
text-transform:uppercase;
font-weight:normal;
font-family:arial,Lucida Sans Unicode, Lucida Grande, sans-serif
font-weight: normal;
letter-spacing:-1px;
}

#nav .odd {
border:0
}
#nav .drop_down h2 {
color:#E2E2E2;
text-transform:uppercase
}
#nav .drop_down h4 {
font-size:11px;
letter-spacing:0;
font-weight:bold;
font-family:Arial, sans-serif
}

#nav .drop_down a {
color:#c8effd;
border:0;
text-decoration:none
}

#nav .drop_down a:hover {
text-decoration:underline
}

.subMenu a, .subMenu a:visited { color:#FFFFFF; font-size:12px; }
.subMenu h1 { border:1px solid #FFFFFF; padding:2px 5px; float:left}
</style>

// CODE HTML

<div class="menu">
<div id="nav">
<div class="mainNav">

<!-- Menu 1 -->
<div id="content_1" class="inv">

<div class="drop_down" style="width: 450px;">
<div class="drop_down_title">
<a class="channel_home" href="#">Menu 1</a>
</div>

<div class="n_links" style="">
<div class="left">
<h2>Bài mới</h2>

<div>
<ul class="more_articles">
<li><a href="#">Bài 1</a></li>
<li><a href="#">Bài 2</a></li>
<li><a href="#">Bài 3</a></li>
</ul>
</div>

</div>
</div>

<div class="right">

<h2>Chuyên mục</h2>

<ul class="section">
<li><a href="#">Chuyên mục 1</a></li>
<li><a href="#">Chuyên mục 2</a></li>
<li><a href="#">Chuyên mục 3</a></li>
</ul>

</div>
<div class="clearthis" style="clear: both;"></div>
</div>
</div>
<!-- END Menu 1 -->

<!-- Menu 2 -->
<div id="content_2" class="inv">
<div class="drop_down" style="width: 450px;">
<div class="drop_down_title">
<a class="channel_home" href="#">Menu 2</a>
</div>
<div class="n_links" style="">
<div class="left">
<h2>Bài mới</h2>

<div>
<ul class="more_articles">
<li><a href="#">Bài 1</a></li>
<li><a href="#">Bài 2</a></li>
<li><a href="#">Bài 3</a></li>

</ul>
</div>

</div>
</div>

<div class="right">

<h2>Chuyên mục</h2>
<ul class="section">
<li><a href="#">Chuyên mục 1</a></li>
<li><a href="#">Chuyên mục 2</a></li>
<li><a href="#">Chuyên mục 3</a></li>
</ul>

</div>
<div class="clearthis" style="clear: both;"></div>
</div>
</div>
<!-- END Menu 2 -->

<!-- Menu 3 -->
<div id="content_3" class="inv">
<div class="drop_down" style="width: 450px;">
<div class="drop_down_title">
<a class="channel_home" href="#">Menu 3</a>
</div>

<div class="n_links" style="">

<div class="left">
<h2>Bài mới</h2><div>

<ul class="more_articles">
<li><a href="#">Bài 1</a></li>
<li><a href="#">Bài 2</a></li>
<li><a href="#">Bài 3</a></li>
</ul>
</div>

</div>
</div>

<div class="right">
<h2>Chuyên mục</h2>

<ul class="section">
<li><a href="#">Chuyên mục 1</a></li>
<li><a href="#">Chuyên mục 2</a></li>
<li><a href="#">Chuyên mục 3</a></li>
</ul>

</div>
<div class="clearthis" style="clear: both;"></div>
</div>
</div>
<!-- END Menu 3 -->

<!-- SUB menu -->
<div class="menuWrap" id="parentMenu_1">
<div onmouseover='showMe(1,0)' class="menuMain">
<a href='#'>Menu 1</a></div>
<div class="menuSub" id='menu_1'></div>

</div>


<div class="menuWrap" id="parentMenu_1">
<div onmouseover='showMe(2,0)' class="menuMain">
<a href='#'>Menu 2</a></div>
<div class="menuSub" id='menu_2'></div>
</div>


<div class="menuWrap" id="parentMenu_1">
<div onmouseover='showMe(3,0)' class="menuMain">
<a href='#'>Menu 3</a></div>
<div class="menuSub" id='menu_3'></div>
</div>
<!-- END SUB menu -->

</div>
</div>
</div>
Các bạn chú ý đến những chú thích về thứ tự các menu theo đó nếu ta muốn thêm một menu thì chỉ cần thêm:
a. Chèn đoạn code bên dưới vào sau dòng
Code:
<!-- END Menu 3 -->


Code:
<!-- Menu 4 -->
<div id="content_4" class="inv">
<div class="drop_down" style="width: 450px;">
<div class="drop_down_title">
<a class="channel_home" href="#">Menu 4</a>
</div>

<div class="n_links" style="">

<div class="left">
<h2>Bài mới</h2><div>

<ul class="more_articles">
<li><a href="#">Bài 1</a></li>
<li><a href="#">Bài 2</a></li>
<li><a href="#">Bài 3</a></li>
</ul>
</div>

</div>
</div>

<div class="right">
<h2>Chuyên mục</h2>

<ul class="section">
<li><a href="#">Chuyên mục 1</a></li>
<li><a href="#">Chuyên mục 2</a></li>
<li><a href="#">Chuyên mục 3</a></li>
</ul>

</div>
<div class="clearthis" style="clear: both;"></div>
</div>
</div>
<!-- END Menu 4 -->
b. thêm tiếp đoạn code bên dưới vào trước dòng code
Code:
<!-- END SUB menu -->

Code:
<div class="menuWrap" id="parentMenu_1">
<div onmouseover='showMe(4,0)' class="menuMain">
<a href='#'>Menu 4</a></div>
<div class="menuSub" id='menu_4'></div>
</div>
Ngoài ra các bạn có thể tùy chỉnh thêm về phần code CSS như : màu nền, màu chữ, độ rộng... để việc hiển thị là tốt nhất.
Lưu ý: các bạn nên up lại file .js để trành trường hợp winni xóa làm ảnh hưởng đến bạn!

Nguồn: Fandung
Chúc các bạn thành công.



Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down   Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

Style of Google. Code by Juskteez