bahy_my
Active Member
سلام
تو این آموزش قصدا داریم یه منوی داینامیک ایجاد کنیم.
مطمئنم که استفاده می کنید.
اول کد زیر رو اجرا کنید تا از ادامه ی راه منصرف نشین !! :
خوب.
بریم سراغ توضیح :
ما ابتدا تگی رو که منوی ما تو اون قرار داره رو با استفاده از CSS مخفی می کنیم :
(display:none)
بعد از اون ما تابع menu(id) رو فراخوانی می کنیم و به اون ID شی مورد نظر خودمون رو می دیم.
تابع 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<script>
function menu(id){
var menu=document.getElementById(id);
if(menu.style.display=='none'){
menu.style.display='block';
}else{
menu.style.display='none';
}
}
</script>
<style type="text/css">
<!--
body,td,th {
font-family: Tahoma, Times New Roman;
font-size: 11px;
color: #003300;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a {
font-family: Tahoma, Times New Roman;
color: #00CC00;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #003300;
}
a:active {
text-decoration: none;
}
-->
</style></head>
<body>
<table width="187" border="0" cellspacing="4" cellpadding="4">
<tr>
<td><span style="cursor:hand" onclick="menu('menu2')">Menu</span>
<blockquote id="menu2" style="display:none">
• <a href="#">Home</a><br />
• <a href="#">Contact</a><br />
• <a href="#">About</a><br />
• <a href="#">Links</a><br />
• <a href="http://www.mehrarian.com" target="_blank">MehrArian</a><br />
</blockquote>
</td>
</tr>
<tr>
<td><span style="cursor:hand" onclick="menu('menu')">Main Menu </span>
<blockquote id="menu" style="display:none">
• <a href="http://www.mehrarian.com">MehrArian</a><br />
• <a href="http://www.vasheghan.ir">Vasheghan</a><br />
• <a href="http://www.smart-noise.com">Smart Noise</a><br />
• <a href="http://www.majidonline.com">MajidOnline</a><br />
</blockquote> </td>
</tr>
</table>
</body>
</html>خوب.
بریم سراغ توضیح :
ما ابتدا تگی رو که منوی ما تو اون قرار داره رو با استفاده از CSS مخفی می کنیم :
HTML:
<blockquote id="menu" style="display:none">(display:none)
بعد از اون ما تابع menu(id) رو فراخوانی می کنیم و به اون ID شی مورد نظر خودمون رو می دیم.
HTML:
menu('menu2')تابع menu ابتدا در جاوااسکریپت شی مورد نظر رو تعریف می کنه بعد از اون با استفاده از ویژگی هاش منوی مخفی ما رو نمایان می کنه.
منبع : مهرآرين - لینک مطلب
