| |
|
|
| | Видел также на одном сайте, типа плюсы, нажимаешь на них - и разворачивается пункты меню, как дурево каталгов. Как такое сделать? | |
| |
|
|
| |
|
|
| |
для: nickson
(06.05.2006 в 19:50)
| | | Легче взять готовый скрипт, и если что подделать под себя.
http://script.woweb.ru/index.htm/c/65 | |
| |
|
|
| |
|
|
| |
для: codexomega
(06.05.2006 в 20:12)
| | | А... я отсюда уже скачивал... А какое именно? | |
| |
|
|
| |
|
|
| |
для: codexomega
(06.05.2006 в 20:12)
| | | Скажите хоть на чём оно работает? | |
| |
|
|
| |
|
|
| |
для: nickson
(07.05.2006 в 13:42)
| | | Вот интересное, довольно простое меню.
Работaет на DOM.
Возьмите 2 картинки в атаче.
<html>
<head>
<title>Test de menu dynamique</title>
<style>
<!--
.parent {
font-family: verdana;
font-weight: bold;
font-size: 10pt;
margin-top: 10;
cursor: hand;
}
.child {
font-size: 10pt;
font-weight: normal;
margin-left: 14pt;
}
a:hover { color:red; }
-->
</style>
<script language=javascript>
<!--
var intCount = 0;
//-Fonction d'ajout d'entrées principales-------------------------
function DynamicMenu_addParent(strName) {
var strID = 'ID' + intCount++;
var strTemp = '<DIV ID="' + strID + '" CLASS="parent"';
strTemp += ' onClick="expandCollapse(this);">';
strTemp += '<IMG SRC="Graphics/left.gif" Height="12">';
strTemp += ' ' + strName ;
strTemp += '<DIV STYLE="display: none" CLASS="child"></DIV>';
strTemp += '</DIV>';
this.div.innerHTML += strTemp;
this.currentChild = document.getElementById(strID);
}
//-Fonction d'ajout de liens dans le menu-------------------------
function DynamicMenu_addChild(strName,strURL) {
var strTemp = '<A HREF="' + strURL + '"'
+ ' onClick="cancelBubble(arguments[0]);">'
+ strName + '</A><BR>';
if (document.all) {
this.currentChild.children[1].innerHTML += strTemp;
} else {
this.currentChild.childNodes[2].innerHTML += strTemp;
}
}
//-inhibe la cascade d'évènements au DIV conteneur----------------
function cancelBubble(netEvent) {
if (document.all) {
window.event.cancelBubble = true;
} else {
netEvent.cancelBubble = true;
}
}
//-Contracte ou expanse le menu-----------------------------------
function expandCollapse(objElement) {
if (document.all) {
var imgIcon = objElement.children[0];
objElement = objElement.children[1];
} else {
var imgIcon = objElement.childNodes[0];
objElement = objElement.childNodes[2];
}
if (objElement.style.display == "none") {
objElement.style.display = "block" ;
imgIcon.src = "Graphics/bottom.gif" ;
} else {
objElement.style.display = "none" ;
imgIcon.src = "Graphics/left.gif" ;
}
}
//-Fonction de création de menu dynamique-------------------------
function DynamicMenu() {
var id = "Menu" + intCount++;
document.write('<DIV Id="' + id + '"></DIV>');
this.div = document.getElementById(id);
this.currentChild = null;
this.addParent = DynamicMenu_addParent;
this.addChild = DynamicMenu_addChild;
}
// -->
</script>
</head>
<body>
<script language="javascript">
<!--
var menu = new DynamicMenu();
menu.addParent("Le langage Javascript");
menu.addChild("Page d'accueil",
"../javascript.html");
menu.addChild("Etude du langage",
"../Langage/ecmascript.html");
menu.addChild("Les objets clients",
"../ObjetsClients/javascript.html");
menu.addChild("La bibliothèque de code",
"../Bibliotheque/index.html");
menu.addChild("Le fabuleux J-Project",
"../J-Project/jproject.html");
menu.addParent("Autres langages du Web");
menu.addChild("Le langage HTML",
"../../Html/index.html");
menu.addChild("Le langage XML",
"../../Xml/index.html");
menu.addChild("Le langage CSS",
"../../Css/styles.html");
menu.addParent("Quelques petits jeux");
menu.addChild("Dynamic PingPong",
"../../../../../Programmes/Jeux/PingPong/PingPong.html");
menu.addChild("Casse briques", "gamesCasseBriques.html");
//-->
</script>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: codexomega
(07.05.2006 в 15:22)
| | | А вот и деревья.
Графика в атаче.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<!-- Copy this code into the HEAD of your HTML document -->
<style type="text/css">
a
{text-decoration: none;}
.title
{position: absolute;
width: 150px;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;}
.submenu
{position: absolute;
left: 25px;
width: 120px;
border: 0px solid black;
background-color: white;
layer-background-color: white;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
visibility: hidden;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
//nom is the number of menus on your tree, change this if your want more menus
var nom = 4; // Number of menus
var usePictures = 1;
var ttls = new Array();
var subs = new Array();
var lastn;
var lastmove;
if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls[i] = ('title' + i);
subs[i] = ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "open.gif";
}
else if (document.all) {
document.all(pic).src = "open.gif";
}
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "closed.gif";
}
else if (document.all) {
document.all(pic).src = "closed.gif";
}
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
}
}
}
}
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top -= move;
document.layers[subs[i]].top -= move;
}
else if (document.all) {
document.all(ttls[i]).style.pixelTop -= move;
document.all(subs[i]).style.pixelTop -= move;
}
}
}
else {
submenu.visibility = visible;
if (usePictures) picopen(n);
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls[i]].top += move;
document.layers[subs[i]].top += move;
}
if (document.all) {
document.all(ttls[i]).style.pixelTop += move;
document.all(subs[i]).style.pixelTop += move;
}
}
}
lastn = n;
lastmove = move;
}
// End -->
</script>
</head>
<body>
<!-- Copy this code into the BODY of your HTML document -->
<div class="title" id="title1" style="top: 0px">
<a href="#" onclick="javascript: toggle(1,30); return false"><img name="pic1" src="closed.gif" border="0"> Webtools</a>
</div>
<div class="submenu" id="submenu1" style="top: 20px">
<img src="line.gif" border="0"><a href="http://www.codespy.com" target="_blank">CodeSpy.com</a><br>
<img src="line.gif" border="0"><a href="http://www.cgi-resources.com">CGI-Resources</a>
</div>
<div class="title" id="title2" style="top: 20px">
<a href="#" onclick="javascript: toggle(2,60); return false"><img name="pic2" src="closed.gif" border="0"> Search Engines</a>
</div>
<div class="submenu" id="submenu2" style="top: 40px">
<img src="line.gif" border="0"><a href="http://www.yahoo.com">Yahoo</a><br>
<img src="line.gif" border="0"><a href="http://www.excite.com">Excite</a><br>
<img src="line.gif" border="0"><a href="http://www.altavista.com">Altavista</a><br>
<img src="line.gif" border="0"><a href="http://www.lycos.com">Lycos</a>
</div>
<div class="title" id="title3" style="top: 40px">
<a href="#" onclick="javascript: toggle(3,45); return false"><img name="pic3" src="closed.gif" border="0"> Computer Jobs</a>
</div>
<div class="submenu" id="submenu3" style="top: 60px">
<img src="line.gif" border="0"><a href="http://www.computerjobs.com">Computerjobs.com</a><br>
<img src="line.gif" border="0"><a href="http://www.techiegold.com">TechieGold</a><br>
<img src="line.gif" border="0"><a href="http://www.monster.com">Monster</a>
</div>
<div class="title" id="title4" style="top: 60px">
<a href="#" onclick="javascript: toggle(4,60); return false"><img name="pic4" src="closed.gif" border="0"> TV Channels</a>
</div>
<div class="submenu" id="submenu4" style="top: 80px">
<img src="line.gif" border="0"><a href="http://www.abc.com">ABS</a><br>
<img src="line.gif" border="0"><a href="http://www.cbs.com">CBS</a><br>
<img src="line.gif" border="0"><a href="http://www.fox.com">FOX</a><br>
<img src="line.gif" border="0"><a href="http://www.nbc.com">NBC</a>
</div>
</body>
</html>
|
| |
| |
|
|
