قائمة منسدلة بسيطة لمدونتك بتقنية ال jQuery

بسم الله الرحمان الرحيم






السلام عليكم ورحمة الله وبركاته ، اليوم أحظرت لكم طريقة إضافة قائمة منسدلة بتقنية جي كويري ، و هذه الطريقة كان الكثيرو ن يبحثون عنها لكي يجعلو موقعهم إحترافي ، وال إضافة هنا أن الروابط يمكنها أن تحتوي تحتها راوابط أخري 
و للحصول علي مثال أفضل 

أدخل علي الرابط التالي لمعاينة القائمة المنسدلة 


و الأن طريقة إضافة القائمة

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:hoverbackground: #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:hoverbackground: #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(&#39;ul&#39;).eq(0).css(&#39;visibility&#39;, &#39;visible&#39;);}
function jsddm_close(){ if(ddmenuitem) ddmenuitem.css(&#39;visibility&#39;, &#39;hidden&#39;);}
function jsddm_timer(){ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer(){ if(closetimer){ window.clearTimeout(closetimer);closetimer = null;}}
$(document).ready(function(){ $(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseover&#39;, jsddm_open);$(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseout&#39;, 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>

اللينكان ضعها مكان الرمز #

أي إستفسار أنا هنا

بسم الله الرحمان الرحيم






السلام عليكم ورحمة الله وبركاته ، اليوم أحظرت لكم طريقة إضافة قائمة منسدلة بتقنية جي كويري ، و هذه الطريقة كان الكثيرو ن يبحثون عنها لكي يجعلو موقعهم إحترافي ، وال إضافة هنا أن الروابط يمكنها أن تحتوي تحتها راوابط أخري 
و للحصول علي مثال أفضل 

أدخل علي الرابط التالي لمعاينة القائمة المنسدلة 


و الأن طريقة إضافة القائمة

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:hoverbackground: #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:hoverbackground: #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(&#39;ul&#39;).eq(0).css(&#39;visibility&#39;, &#39;visible&#39;);}
function jsddm_close(){ if(ddmenuitem) ddmenuitem.css(&#39;visibility&#39;, &#39;hidden&#39;);}
function jsddm_timer(){ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer(){ if(closetimer){ window.clearTimeout(closetimer);closetimer = null;}}
$(document).ready(function(){ $(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseover&#39;, jsddm_open);$(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseout&#39;, 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>

اللينكان ضعها مكان الرمز #

أي إستفسار أنا هنا
تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
salah eddine