submenu kai javascript

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
jimvrasna
Δημοσιεύσεις: 48
Εγγραφή: 21 Απρ 2006 23:57
Τοποθεσία: ΜΑΚΡΙΑ ΜΑΚΡΙΑ
Επικοινωνία:

submenu kai javascript

Δημοσίευση από jimvrasna » 02 Οκτ 2007 10:34

Κώδικας: Επιλογή όλων

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Η ΣΕΛΙΔΑ ΜΟΥ</title>
<style type="text/css">
body
&#123;
margin&#58; 0;
padding&#58; 0;
&#125;

#headDiv
&#123;
position&#58; absolute;
background-color&#58; blue;
z-index&#58; 10;
&#125;
#menuDiv
&#123;
position&#58; absolute;
background-color&#58; red;
z-index&#58; 10;
&#125;
#mainDiv
&#123;
position&#58; absolute;
background-color&#58; yellow;
z-index&#58; 10;
&#125;
#newsDiv
&#123;
position&#58; absolute;
background-color&#58; green;
z-index&#58; 10;
&#125;
#bottomDiv
&#123;
position&#58; absolute;
background-color&#58; silver;
z-index&#58; 10;
&#125;
dl, dt, dd, ul, li &#123;
margin&#58; 0;
padding&#58; 0;
list-style-type&#58; none;
&#125;
#menu &#123;
position&#58; absolute;
top&#58; 1em;
left&#58; 0em;
width&#58; 10em;
&#125;

#menu dt &#123;
cursor&#58; pointer;
background&#58; #A9BFCB;
height&#58; 20px;
line-height&#58; 20px;
margin&#58; 2px 0;
border&#58; 1px solid gray;
text-align&#58; center;
font-weight&#58; bold;
&#125;

#menu dd &#123;
position&#58; absolute;
z-index&#58; 100;
left&#58; 8em;
margin-top&#58; -1.4em;
width&#58; 10em;
background&#58; #A9BFCB;
border&#58; 1px solid gray;
&#125;

#menu ul &#123;
padding&#58; 2px;
&#125;
#menu li &#123;
text-align&#58; center;
font-size&#58; 85%;
height&#58; 18px;
line-height&#58; 18px;
&#125;
#menu li a, #menu dt a &#123;
color&#58; #000;
text-decoration&#58; none;
display&#58; block;
&#125;

#menu li a&#58;hover &#123;
text-decoration&#58; underline;
&#125;


#mentions &#123;
font-family&#58; verdana, arial, sans-serif;
position&#58; absolute;
bottom &#58; 200px;
left &#58; 10px;
color&#58; #000;
background-color&#58; #ddd;
&#125;
#mentions a &#123;text-decoration&#58; none;
color&#58; #222;
&#125;
#mentions a&#58;hover&#123;text-decoration&#58; underline;
&#125;

</style>

<script type="text/javascript">

window.onload=montre;
function montre&#40;id&#41;
&#123;
 var d = document.getElementById&#40;id&#41;;
	for &#40;var i = 1; i<=10; i++&#41;
    &#123;
		if &#40;document.getElementById&#40;'smenu'+i&#41;&#41;
        &#123;
        document.getElementById&#40;'smenu'+i&#41;.style.display='none';
        &#125;
	&#125;
 if &#40;d&#41;
 &#123;
 d.style.display='block';
 &#125;
&#125;


function SetDivsSize&#40;&#41;
&#123;

var winHeight=document.body.clientHeight;
var winWidth=document.body.clientWidth;

var headDivTop=0;
var headDivLeft=0;
var headDivHeight=100;
var headDivWidth=winWidth;

var menuDivTop=headDivHeight;
var menuDivLeft=0;
var menuDivWidth=170;

var bottomDivLeft=0;
var bottomDivHeight=100;
var bottomDivWidth=winWidth;

var newsDivTop=headDivHeight;
var newsDivHeight=winHeight - headDivHeight - bottomDivHeight;
var newsDivWidth=100;

var mainDivTop=headDivHeight;
var mainDivLeft=menuDivWidth;
var mainDivHeight=winHeight - headDivHeight - bottomDivHeight;

var menuDivHeight=winHeight - headDivHeight - bottomDivHeight;
var mainDivWidth=winWidth - menuDivWidth - newsDivWidth;
var newsDivLeft=menuDivWidth + mainDivWidth;
var bottomDivTop=headDivHeight + menuDivHeight;

//ΡΥΘΜΙΣΗ ΔΙΑΣΤΑΣΕΩΝ HEAD DIV
document.getElementById&#40;"headDiv"&#41;.style.top=headDivTop;
document.getElementById&#40;"headDiv"&#41;.style.left=headDivLeft;
document.getElementById&#40;"headDiv"&#41;.style.height=headDivHeight;
document.getElementById&#40;"headDiv"&#41;.style.width=headDivWidth;
//ΡΥΘΜΙΣΗ ΔΙΑΣΤΑΣΕΩΝ MENU DIV
document.getElementById&#40;"menuDiv"&#41;.style.top=menuDivTop;
document.getElementById&#40;"menuDiv"&#41;.style.left=menuDivLeft;
document.getElementById&#40;"menuDiv"&#41;.style.height=menuDivHeight;
document.getElementById&#40;"menuDiv"&#41;.style.width=menuDivWidth;
//ΡΥΘΜΙΣΗ ΔΙΑΣΤΑΣΕΩΝ MAIN DIV
document.getElementById&#40;"mainDiv"&#41;.style.top=mainDivTop;
document.getElementById&#40;"mainDiv"&#41;.style.left=mainDivLeft;
document.getElementById&#40;"mainDiv"&#41;.style.height=mainDivHeight;
document.getElementById&#40;"mainDiv"&#41;.style.width=mainDivWidth;
//ΡΥΘΜΙΣΗ ΔΙΑΣΤΑΣΕΩΝ NEWS DIV
document.getElementById&#40;"newsDiv"&#41;.style.top=newsDivTop;
document.getElementById&#40;"newsDiv"&#41;.style.left=newsDivLeft;
document.getElementById&#40;"newsDiv"&#41;.style.height=newsDivHeight;
document.getElementById&#40;"newsDiv"&#41;.style.width=newsDivWidth;
//ΡΥΘΜΙΣΗ ΔΙΑΣΤΑΣΕΩΝ BOTTOM DIV
document.getElementById&#40;"bottomDiv"&#41;.style.top=bottomDivTop;
document.getElementById&#40;"bottomDiv"&#41;.style.left=bottomDivLeft;
document.getElementById&#40;"bottomDiv"&#41;.style.height=bottomDivHeight;
document.getElementById&#40;"bottomDiv"&#41;.style.width=bottomDivWidth;

&#125;
</script>
</head>
<body onload="SetDivsSize&#40;&#41;;" onResize="SetDivsSize&#40;&#41;;">
<div id="headDiv">
<p>head</p>
</div>
<div id="menuDiv">
<dl id="menu">
		<dt onmouseover="javascript&#58;montre&#40;'smenu1'&#41;;"><a href="#">Menu 1</a></dt>
			<dd id="smenu1" onmouseover="javascript&#58;montre&#40;'smenu1'&#41;;" onmouseout="javascript&#58;montre&#40;&#41;;">
				<ul>
					<li><a href="#">Menu 1.1</a></li>
					<li><a href="#">Menu 1.2</a></li>
					<li><a href="#">Menu 1.3</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript&#58;montre&#40;'smenu2'&#41;;" onmouseout="javascript&#58;montre&#40;&#41;;">Menu 2</dt>
			<dd id="smenu2" onmouseover="javascript&#58;montre&#40;'smenu2'&#41;;" onmouseout="javascript&#58;montre&#40;&#41;;">
				<ul>
					<li><a href="#">Menu 2.1</a></li>
					<li><a href="#">Menu 2.2</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript&#58;montre&#40;'smenu3'&#41;;" onmouseout="javascript&#58;montre&#40;&#41;;">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript&#58;montre&#40;'smenu3'&#41;;" onmouseout="javascript&#58;montre&#40;&#41;;">
				<ul>
					<li><a href="#">Menu 3.1</a></li>
					<li><a href="#">Menu 3.1</a></li>

					<li><a href="#">Menu 3.1</a></li>
					<li><a href="#">Menu 3.1</a></li>
					<li><a href="#">Menu 3.1</a></li>
					<li><a href="#">Menu 3.1</a></li>
				</ul>
			</dd>

		<dt onmouseover="javascript&#58;montre&#40;'smenu4'&#41;;" onmouseout="javascript&#58;montre&#40;&#41;;">Menu 4</dt>
			<dd id="smenu4" onmouseover="javascript&#58;montre&#40;'smenu4'&#41;;" onmouseout="javascript&#58;montre&#40;&#41;;">
				<ul>
					<li><a href="#">Menu 4.1</a></li>
					<li><a href="#">Menu 4.1</a></li>
				</ul>
			</dd>
</dl>
</div>
<div id="mainDiv">
<p>main</p>
</div>
<div id="newsDiv">
<p>news</p>
</div>
<div id="bottomDiv">
<p>bottom</p>
</div>
</body>
</html>

εχω την παραπανω σελιδα ομως το υπομενου θελω να εμφανιζετε πανω απο ολα τα div στο ιδιο ομως σημειο οπως τωρα πωσ θα γινει??
SIMONE
a star is.... created!!!!!!

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες