بسم الله الرحمان الرحيم
السلام عليكم ورحمة الله وبركاته ، اليوم أحظرت لكم طريقة إضافة قائمة منسدلة بتقنية جي كويري ، و هذه الطريقة كان الكثيرو ن يبحثون عنها لكي يجعلو موقعهم إحترافي ، وال إضافة هنا أن الروابط يمكنها أن تحتوي تحتها راوابط أخري
و للحصول علي مثال أفضل
أدخل علي الرابط التالي لمعاينة القائمة المنسدلة
و الأن طريقة إضافة القائمة
1- المرحلة الأولي : أذهب إلي قالب ثم إلي تعديل HTML
2- أضغط علي CTRL +F لأجل البحث
3- أبحث عن الكود التالي :
</head>
ثم ضع كود ال CSS التالي قبله :
<!--start drop menu أسرار التدوين--><style type='text/css'>/* menu styles */#jsddm{ margin: 0;padding: 0;}
#jsddm li{ float: left;list-style: none;font: 12px Tahoma, Arial}
#jsddm li a{ display: block;background: #0033CC; /*لون خلفية القائمة الغير المنسدلة*/
-moz-border-radius: 6px;-webkit-border-radius: 6px;
padding: 5px 12px;text-decoration: none;border-right: 1px solid white;width: 70px;color: #EAFFED; /*لون العناوين*/
white-space: nowrap}
#jsddm li a:hover{ background: #24313C /*لون خلفية القائمة المنسدلة*/; -moz-border-radius: 6px;-webkit-border-radius: 6px;}
#jsddm li ul{ margin: 0;padding: 0;position: absolute;z-index:100;visibility: hidden;border-top: 1px solid white}
#jsddm li ul li{ float: none;display: inline}
#jsddm li ul li a{ width: auto;background: #BFCFFE; /*لون خلفية الروابط التي تظهر (تنسدل)*/
color: #24313C /*لون الروابط التي تنسدل أسفل العناوين*/
}
#jsddm li ul li a:hover{ background: #809FFE /* لون خلفية القائمة المنسدلة الثانية*/}</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/><script type='text/javascript'>var timeout = 500;var closetimer = 0;var ddmenuitem = 0;
function jsddm_open(){ jsddm_canceltimer();jsddm_close();ddmenuitem = $(this).find('ul').eq(0).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><!--end menu code أسرار التدوين-->
في حال أردت تغيير الألوان في القائمة عدل فقط علي كود كود ال CSS السابق و قد وضعت لك الإرشادات باللون الأحمر لتفهم
يرجي منك زيارة موضوع أواد الhtml لتختار لونك المفضل و ضعه في الCSS من هنا
4- أذهب إلي التخطيط ثم أضغط علي إضافة أداة JAVA/JAVASCRIPT
و ضع الكود التالي :
<ul id="jsddm"><li><a href="/">الرئيسية</a><li><a href="#">العنوان الأول</a>
<ul>
<li><a href="#">الرابط المنسدل 1</a></li>
<li><a href="#">الرابط المنسدل 2</a></li>
<li><a href="#">الرابط المنسدل 3</a></li>
</ul>
</li>
<li><a href="#"> العنوان الثاني</a>
<ul>
<li><a href="#">الرابط المنسدل 1</a></li>
<li><a href="#">الرابط المنسدل 2</a></li>
<li><a href="#">الرابط المنسدل 3</a></li>
<li><a href="#">الرابط المنسدل 4</a></li>
<li><a href="#">الرابط المنسدل 5</a></li>
</ul>
</li>
<li><a href="#">العنوان الثالث</a></li>
<li><a href="#">العنوان الرابع</a></li>
<li><a href="#">العنوان الخامس</a></li></li></ul>
اللينكان ضعها مكان الرمز #
أي إستفسار أنا هنا