14-05-2006, 16:24
|
|
|
|
חבר מתאריך: 20.11.04
הודעות: 95
|
|
|
הנה קוד ברור + הסבר
בשביל לעשות את מה שאתה רוצה, באמת ישנו צורך לשלב בין CSS וJavascript.
אראה לך איך ליצור זאת בדרך מסודרת. הדרך פשוטה מאוד ומובנת.
צור דף HTML רגיל עם הקוד הבא:
קוד:
<html>
<head>
<script src="jsf.js" type="text/javascript"></script>
<link rel=stylesheet href="stf.css" type="text/css">
</head>
<body>
<a class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
<div id="mymenu1" class="hide">
<a href="#" class="submenu">One</a>
<a href="#" class="submenu">Two</a>
</div>
<a class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
<div id="mymenu2" class="hide">
<a href="#" class="submenu">One</a>
<a href="#" class="submenu">Two</a>
<a href="#" class="submenu">Three</a>
</div>
</body>
</html>
שנית, אתה רואה כי בקוד ישנן הפניות לעוד 2 קבצים.
האחד, פקודות Javascript לעמוד- קובץ בשם jsf.js
קובץ שני, עיצוב בCSS- קובץ בשם stf.css.
הנה שני הקבצים:
jsf.js:
קוד:
menu_status = new Array();
function showHide(theid)
{
if (document.getElementById)
{
var switch_id = document.getElementById(theid);
if(menu_status[theid] != 'show')
{
switch_id.className = 'show';
menu_status[theid] = 'show';
}
else
{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
}
}
stf.css:
קוד:
.menu1
{
font-family: Arial;
width: 150;
background: #EDEDED;
margin-left: 25px;
padding-left: 20px;
padding-top: 2px;
padding-bottom: 2px;
display: block;
text-decoration: none;
color: #000000;
height: 20px;
cursor: hand;
border: 1px #000000 solid;
}
.submenu
{
font-family: Arial;
width: 150;
background: #BCBCBC;
display: block;
height: 19px;
margin-left: 38px;
padding-top: 2px;
padding-left: 7px;
color: #333333;
border: 1px #000000 solid;
}
.hide
{
display: none;
}
.show
{
display: block;
}
בבקשה 
במקרה ומשהו לא הובן, אתה מוזמן לשאול.
_____________________________________
בברכה,
כפיר גיא :: Kfir Guy
דוא"ל: Mail: info@klear.co.il
|
ראשי
צ'אט
מצב כלאיים
