VN-Lives: JavaScript Source: Tạo menu bên phải cùng với hiệu ứng menu con.

Đây là mã nguồn được viết bởi Dhirgham Murran, do đã lâu nêu nó chỉ có tính chất tham khảo khi bạn muốn làm một menu động bên trái và có các menu con sổ ra khi được click thì có thể tham khảo mã nguồn này này. Đặc biệt mẫu Menu chỉ cùng HTML và CSS hoàn toàn không sử dụng JavaScrit :>> vào thời đó làm được cái này được xem là pro đó :)) Do có hình ảnh đi kèm bạn download full source tại đây.

Hỗ trợ trình duyệt: Firefox, IE, Chrome, Safari, Opera.

HTML Page Source (menu.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>CSS-Rollover-Menu by Dhirgham Murran</title>

<link rel="stylesheet" href="NavMenu.css" type="text/css" />

</head>

<body style="margin:0px">

<div style="position:absolute; top:150px; left:10px; width:150px; padding:0px; z-index:10">
<img src="nav_top.png"><br />
<img src="nav_b1.png"><br />
<img src="nav_b2.png"><br />
<img src="nav_b3.png"><br />
<img src="nav_b4.png"><br />
<img src="nav_b5.png"><br />
<img src="nav_bottom.png"><br />

<div class="ButtonLink" style="top:20px">
<a href="services.html"><img src="nav_b1_over.png"></a></div><br />
<div class="ButtonLink" style="top:53px">
<a href="pricing.html"><img src="nav_b2_over.png"></a></div><br />

<div class="submenu" style="top:86px;">
<a href="#"><img src="nav_b3_over.png"></a>
<div style="position: absolute; top:0px; left:145px; width:185px;">
<img src="submenu_top.png"><br />
<img src="submenu_b1.png"><br />
<img src="submenu_b2.png"><br />
<img src="submenu_bottom.png"></div>

<div class="submenuitem" style="top:29px">
<a href="house.html"><img src="submenu_b1_over.png"></a></div>
<div class="submenuitem" style="top:58px">
<a href="desk.html"><img src="submenu_b2_over.png"></a></div>

</div>

<div class="ButtonLink" style="top:119px">
<a href="contact.html"><img src="nav_b4_over.png"></a></div><br />
<div class="ButtonLink" style="top:152px">
<a href="index.html"><img src="nav_b5_over.png"></a></div><br />

</div>

</body>
</html>

CSS Page Source (NavMenu.css)

.ButtonLink {
position:absolute;
padding:0px;
margin:0px;
height:33px;
z-index: 12;
opacity: 0;
filter:alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
}
.ButtonLink:hover {
position:absolute;
padding:0px;
margin:0px;
height:33px;
z-index: 12;
opacity: 1.0;
filter:alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1.0;
}
.submenu {
position:absolute;
text-align: left;
margin: 0px;
width:145px; height:33px;
overflow: hidden;
left:0px; padding:0px;
z-index: 12;
opacity: 0;
filter:alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
}
.submenu:hover {
position:absolute;
text-align: left;
margin: 0px;
width:330px; height:120px;
left:0px; padding:0px;
overflow: hidden;
z-index: 10;
opacity: 1.0;
filter:alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1.0;
}
.submenuitem {
position:absolute; width:100%;
padding:0px 0px 0px 145px;
z-index:12;
opacity: 0;
filter:alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0;
}
.submenuitem:hover {
position:absolute;
padding:0px 0px 0px 145px;
z-index:12;
opacity: 1.0;
filter:alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1.0;
}
a img {
border: none;
}

VN-Lives

JavaScript Source: Tạo menu bên phải cùng với hiệu ứng menu con.

No comments:

Post a Comment