اقتباس:
| ]]></b:skin> |
و قبله مباشرة قم بإضافة هذا الكود
اقتباس:
| #jsddm { margin: 0; padding: 15px; z-index:1000000000; position:relative; } #jsddm li { float:right; list-style: none; font: 12px Tahoma, Arial; } #jsddm li a { display: block; white-space: nowrap; margin:1px 3px; border: 1px solid #AAAAAA; background: #cccccc; background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc)); background: -moz-linear-gradient(top, #ebebeb, #cccccc); padding: 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: #ffffff 0 1px 0; color: #363636; font-size: 15px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } #jsddm li a:hover { background: #C8C8C8; } #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; } #jsddm li ul li { float: none; display: inline; } #jsddm li ul li a { width: auto; background: #CAE8FA; } #jsddm li ul li a:hover { background: #A3CEE5; } |
بعد إضافة الكود الأول قم بالبحث عن هذا الكود
اقتباس:
| </head> |
ثم أضف قبله مباشرة الكود الخاص بالجافا
اقتباس:
| <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible');} function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open) $('#jsddm > li').bind('mouseout', jsddm_timer)}); document.onclick = jsddm_close; //]]> </script> |
الأن مع المرحلة الأخيرة لإكمال هذه الإضافة الرائعة
توجه الأن إلى تصميم / عناصر الصفحة / إضافة أداة / HTML/JavaScript
أترك مكان العنوان فارغ و ضع الكود في المربع الكبير
الأن قم بإضافة الكود التالي للأداة
اقتباس:
| <ul id="jsddm"> <li><a href="#">Home</a> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Drop 1-1</a></li> <li><a href="#">Drop 1-2</a></li> <li><a href="#">Drop 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Drop 2-1</a></li> <li><a href="#">Drop 2-2</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Drop 3-1</a></li> <li><a href="#">Drop 3-2</a></li> <li><a href="#">Drop 3-3</a></li> <li><a href="#">Drop 3-4</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">Menu 6</a></li> </li></ul> |
قم بحفظ الكود و إسحبه لأعلى الصفحة إن لو تكن قد أضفته هناك في بادئ الأمر ثم أعد حفظ الصفحة ليتبث في مكانه الجديد.
ملاحظة : قم بتغير كلمة (Menu/Drop) للكلمة التي تريد و غير العلامة (#) برابط الصفحة.
اتمنى أن تنال الإضافة إعجابك بالتوفيق
بقلم عاشق النات
بسم الله الرحمان الرحيم
