<style type="text/css">
.menu {
position:relative;
z-index:1000;
font-size:90%;
height:235px;
margin:25px 0 0 15px; /* this page only */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
position:relative;
border:1px solid #888;
border-width:1px 1px 0 1px;
background:#9bb;
}
.menu li {
background:transparent;
height:26px;
}
* html .menu li {margin-left:-16px; margin-lef\t:0;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:150px;
color:#000;
text-indent:5px;
border-bottom:1px solid #888;
background:transparent;
}
/* style the link hover */
* html .menu a:hover {color:#fff; background:#999;}
.menu :hover > a {
color:#fff;
background:#999;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:-1px;
left:100px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
background:#dde;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
background:#ded;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
background:#edd;
}
.menu ul.top2 {top:25px;}
.menu ul.top3 {top:51px;}
.menu ul.top4 {top:77px;}
.menu ul.top5 {top:103px;}
.menu ul.top6 {top:129px;}
.menu ul.top7 {top:155px;}
</style>
<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->
2-- انسخ الكود التالى بالمكان الذى تريد القائمة به
<div class="menu">
<ul>
<li><a href="#nogo">الرابط الأول</a></li>
<li><a href="#nogo">الرابط الثانى</a></li>
<li><a href="#nogo">الرابط الثالث »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="top3">
<li><a href="#nogo">فرع أول 1</a></li>
<li><a href="#nogo">فرع أول 2 »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="top2">
<li><a href="#nogo">فرع ثانى 1</a></li>
<li><a href="#nogo">فرع ثانى 2 »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="top2">
<li><a href="#nogo">فرع ثالث 1</a></li>
<li><a href="#nogo">فرع ثالث 2</a></li>
<li><a href="#nogo">فرع ثالث 3</a></li>
<li><a href="#nogo">فرع ثالث4</a></li>
<li><a href="#nogo"> فرع ثالث 5</a></li>
<li><a href="#nogo"> فرع ثالث 6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">فرع ثانى 3 »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="top3">
<li><a href="#nogo">فرع ثالث 1</a></li>
<li><a href="#nogo">فرع ثالث 2</a></li>
<li><a href="#nogo">فرع ثالث 4</a></li>
<li><a href="#nogo"> فرع ثالث 5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">فرع اول 3</a></li>
<li><a href="#nogo">فرع اول 4</a></li>
<li><a href="#nogo"> فرع اول 5</a></li>
<li><a href="#nogo"> فرع اول 6</a></li>
<li><a href="#nogo">فرع اول متفرع »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="top7">
<li><a href="#nogo">فرع ثاتى 2 أ »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="top1">
<li><a href="#nogo"> فرع ثالث أ</a></li>
<li><a href="#nogo">فرع ثالث ب</a></li>
<li><a href="#nogo"> فرع ثالث ج</a></li>
<li><a href="#nogo">فرع ثالث د</a></li>
<li><a href="#nogo"> فرع ثالث هـ</a></li>
<li><a href="#nogo">فرع ثالث و</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">فرع ثانى </a></li>
<li><a href="#nogo">فرع ثانى متفرع »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="top3">
<li><a href="#nogo">فرع ثالث 2أ</a></li>
<li><a href="#nogo">فرع ثالث 2 ب</a></li>
<li><a href="#nogo"> فرع ثالث 2 ج</a></li>
<li><a href="#nogo"> فرع ثالث 2 د</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">فرع ثانى ج</a></li>
<li><a href="#nogo">فرع ثانى د</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">فرع اول 7</a></li>
<li><a href="#nogo">فرع اول 8</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">رابط 4</a></li>
<li><a href="#nogo">رابط 5</a></li>
<li><a href="#nogo">رابط 6</a></li>
</ul>
</div>
بواسطة : محمّد نور
06-01-2008
الزيارات 276
206 بايت
نبذة : كود ينشئ لك آلة حاسبة بسيطة بموقعك
تستطيع وضعها بصفحة مستقلّة برابط فى الرئيسية أو بلوك الخدمات بالموقع
وتستطيع التحكّم بألوانها من خلال اكواد الألوان بداخل الكود التالى
مثال : كما بالصورة
التركيب :
ضع الكود التالى بالمكان الذي تريد أن يظهر هذا السكربت فيه بالصفحة ...
ضع الكود في منطقة الـ ( <body> )
كود:
<form name=mef>
<input type=hidden name=dafunction value="">
<input type=hidden name=tempnum value="">
<input type=hidden name=daboo value="">
<input type=hidden name=memob value="0">
<script language=javascript>
function numbers(x) {
var daboo= dcidcidocument.mef.daboo.value;
var dafunction = dcidcidocument.mef.dafunction.value;
var deccheck = dcidcidocument.mef.results.value;
if(dcidcidocument.mef.results.value == "0" && deccheck.indexOf('.')=="-1") {
dcidcidocument.mef.results.value = "";
}
if(daboo != "true") {
dcidcidocument.mef.results.value=dcidcidocument.mef.results.value+x;
} else {
dcidcidocument.mef.results.value=x;
dcidcidocument.mef.daboo.value="";
}
}
function add() {
if(dcidcidocument.mef.tempnum.value){
gofigure();
}
dcidcidocument.mef.dafunction.value='+';
dcidcidocument.mef.daboo.value='true';
dcidcidocument.mef.tempnum.value=dcidcidocument.mef.results.value;
}
function subtract() {
if(dcidcidocument.mef.tempnum.value){
gofigure();
}
dcidcidocument.mef.dafunction.value='-';
dcidcidocument.mef.daboo.value='true';
dcidcidocument.mef.tempnum.value=dcidcidocument.mef.results.value;
}
function multiply() {
if(dcidcidocument.mef.tempnum.value){
gofigure();
}
dcidcidocument.mef.dafunction.value='*';
dcidcidocument.mef.daboo.value='true';
dcidcidocument.mef.tempnum.value=dcidcidocument.mef.results.value;
}
function divide() {
if(dcidcidocument.mef.tempnum.value){
gofigure();
}
dcidcidocument.mef.dafunction.value='/';
dcidcidocument.mef.daboo.value='true';
dcidcidocument.mef.tempnum.value=dcidcidocument.mef.results.value;
}
function oneoverx() {
dcidcidocument.mef.results.value=1/eval(dcidcidocument.mef.results.value);
}
function percenta() {
var whatdo = dcidcidocument.mef.dafunction.value;
var percnumber = dcidcidocument.mef.results.value / 100;
if(dcidcidocument.mef.tempnum.value){
dcidcidocument.mef.results.value = eval(dcidcidocument.mef.tempnum.value)*percnumber;
} else {
dcidcidocument.mef.results.value = "0";
}
dcidcidocument.mef.tempnum.value="";
dcidcidocument.mef.dafunction.value="";
}
function squaroot() {
dcidcidocument.mef.results.value=Math.sqrt(dcidcidocument.mef.results.value);
}
function plusminus() {
var xy = dcidcidocument.mef.results.value;
if(xy == "0"){
return false;
}
if(xy.indexOf("-") == "0") {
xy = xy.substring(1,xy.length);
} else {
xy = "-" + xy;
}
dcidcidocument.mef.results.value = xy;
}
function backspace() {
//ignore if zero already.//
if(dcidcidocument.mef.results.value=="0") {
return false; }
//length of the text field//
var numlength = dcidcidocument.mef.results.value;
//subtract one.//
var newresult = numlength.length-1;
//set to new value -1;//
dcidcidocument.mef.results.value = numlength.substring(0,newresult);
//set to zero if nothing left.
if(dcidcidocument.mef.results.value=="") {dcidcidocument.mef.results.value ="0";}
}
function clearfu() {
dcidcidocument.mef.tempnum.value="";
dcidcidocument.mef.results.value="0";
dcidcidocument.mef.dafunction.value="";
}
function gofigure() {
if(dcidcidocument.mef.tempnum.value==".") {
return false;
}
var whatdo = dcidcidocument.mef.dafunction.value;
if(whatdo=="+"){
dcidcidocument.mef.results.value = eval(dcidcidocument.mef.results.value) + eval(dcidcidocument.mef.tempnum.value);
}
else if(whatdo=="-"){
dcidcidocument.mef.results.value = eval(dcidcidocument.mef.tempnum.value)-eval(dcidcidocument.mef.results.value);
}
else if(whatdo=="*"){
dcidcidocument.mef.results.value = eval(dcidcidocument.mef.results.value) * eval(dcidcidocument.mef.tempnum.value);
}
else if(whatdo=="/"){
dcidcidocument.mef.results.value = eval(dcidcidocument.mef.tempnum.value)/eval(dcidcidocument.mef.results.value) ;
}
dcidcidocument.mef.tempnum.value="";
dcidcidocument.mef.dafunction.value="";
}
</script>
<script language=javascript>
<!--//
if (navigator.appName == "Netscape") {
dcidcidocument.write("<h3 align=center>Looks Like you're using netscape. Because Netscape is a lousy browser and doesn't do a very good job with CSS the below looks aweful. Please Use Internet Explorer and Not the buggy netscape navigotor.</h3>");
}
//-->
</script>
<table style="border-style:inset;border-width:2px;" bgcolor=#3399ff><tr>
<td>
<p align="center"><span lang="ar-sa"><b><font face="verdana" color="#FFFFFF">آلة
حاسبة</font></b></span></td></tr><tr>
<td><input type=text value="0" size=33 name=results></td>
</tr>
<tr><td>
<input type=text name=memry style="background-color:#cccccc;" size=2>
<input type=button value="Backspace" style="background-color:#CCCCCC;color:red;width:67px;height:27px;font-size:10px;" OnClick="backspace()"> <input type=button value=" CE " style="background-color:#CCCCCC;color:red;width:67px;height:27px;font-size:10px;" OnClick="clearfu()"> <input type=button value=" C " style="background-color:#CCCCCC;color:red;width:57px;height:27px;font-size:10px;" OnClick="clearfu()">
</td></tr><tr>
<td>
<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" MC " OnClick="dcidcidocument.mef.memry.value=' ',dcidcidocument.mef.memob.value='0'">
<input type=button value=" 7 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(7)"> <input type=button value=" 8 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(8)"> <input type=button value=" 9 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(9)">
<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" / " OnClick="divide()">
<input type=button style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" value="sqrt" OnClick="squaroot()">
</td></tr><tr>
<td>
<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value="MR" OnClick="dcidcidocument.mef.results.value=dcidcidocument.mef.memob.value">
<input type=button value=" 4 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(4)"> <input type=button value=" 5 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(5)"> <input type=button value=" 6 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(6)">
<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" * " OnClick="multiply()">
<input type=button style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" value=" % " OnClick="percenta()">
</td></tr>
<tr>
<td>
<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" MS ">
<input type=button value=" 1 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(1)"> <input type=button value=" 2 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(2)"> <input type=button value=" 3 " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(3)">
<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" - " OnClick="subtract()">
<input type=button style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" value=" 1/x " OnClick="oneoverx()">
</td>
</tr><tr>
<td>
<input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" M+ " OnClick="dcidcidocument.mef.memry.value=' M',dcidcidocument.mef.memob.value=dcidcidocument.mef.results.value;">
<input type=button value="0" style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers(0)"> <input type=button value="+/-" style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="plusminus() "> <input type=button value=" . " style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" OnClick="numbers('.')"> <input type=button style="background-color:#CCCCCC;color:red;width:35px;height:27px;font-size:10px;" value=" + " OnClick="add()"> <input type=button style="background-color:#CCCCCC;color:blue;width:35px;height:27px;font-size:10px;" value=" = " OnClick="gofigure()">
</td></tr>
<tr><td> </td></tr>
</table>
ملاحظة : يمكنك تغيير لون الخلفية من خلال استبدال كود اللون بهذا السطر