Вариант первый. Без применения библиотек.
| Код |
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV based menu...</title>
<style type="text/css">
#box {
background-color:#0CF;
border: 1px solid black;
margin:10px;
color:white;
width:300px;
height:300px;
float:left;
display: none;
}
</style>
<script type="text/javascript">
function addHandler(obj, evnt, handler) {
if (obj.addEventListener) {
obj.addEventListener(evnt, handler, false);
} else {
obj.attachEvent("on" + evnt, handler);
}
}
function hideBox(e) {
var box = document.getElementById("box");
if (e) {
var ct = e.relatedTarget || event.toElement;
while (ct) {
if (ct == box) return true;
ct = ct.parentNode;
}
box.style.display = "none";
} else {
if (!box.contains(event.toElement))
box.style.display = "none";
}
}
function displayBox(e) {
document.getElementById("box").style.display = "block";
}
function docReady(e) {
addHandler(document.getElementById("test"), "mouseover", displayBox);
addHandler(document.getElementById("box"), "mouseout", hideBox);
}
addHandler(window, "load", docReady);
</script>
</head>
<body>
<p id="test">Test text...</p>
<div id="box">
<ul style="border:3px solid red;">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</body>
</html>
|
Вариант второй. JQuery.
| Код |
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV based menu...</title>
<style type="text/css">
#box {
background-color:#0CF;
border: 1px solid black;
margin:10px;
color:white;
width:300px;
height:300px;
float:left;
}
</style>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#box").hide();
$("#test").mouseover(function() {$("#box").show();});
$("#box").hover(function() {$("#box").show();}, function() {$("#box").hide();});
});
</script>
</head>
<body>
<p id="test">Test text...</p>
<div id="box">
<ul style="border:3px solid red;">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</body>
</html>
|
 |