قائمة منسدلة بسيطة لمدونتك بتقنية ال 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>

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

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

تعليقات

مرحب بك للتعليق و مشاركة رأيك

التسميات

أخبار ، news إدارة الإجهاد في العمل أدسنس أدوات أرخص إشتراك مدفوع إصلاح خطأ إضافات بلوجر أفضل أفضل 10 أفضل 4 أفضل 5 أفضل 7 إكس أكواد أكواد الألوان الإسلام البحث عن وظائف البحث عن وظيفة البرامج التسويق بالعمولة التصميم التصوير التصوير الاحترافي الجزائر الحماية الذكاء الاصطناعي، تطبيقات ،أندرويد ،الآيفون الربح من الانترنت الربح من النت الشراء عبر الإنترنت في الجزائر العمل العمل والتوظيف ألوان الوان أندرويد إيثريوم أيردروب بايبال بايبال، ماستر كارد،فيزا،تفعيل،paypal بدون رأس مال بلوجر بيتس ستوديو 3 بيتس ستوديو برو بيتكوين تبادل إعلاني تخفيضات،كوبون،شراء،ربح تدوينة تطيقات تعيين مستشار وظيفي تواصل اجتماعي توظيف توظيفـ، سيرة ذاتية تويتر جي كويرى حد إدخال الأحرف حد إدخال الأحرف في ChatGPT حساب حساب فاتورة الكهرباء خطأ خطأ 740 على ويندوز خطأ ويندوز دراسة دروس بلوجر ر ربح ساعة سكربتات مواقع سلسلة كيف تربح من مدونتك سوناطراك شرح شرح بالفيديو شركات استضافة شركات استضافة مواقع صور طرق طريقة طريقة إصلاح عام 2023 عامل مستقل عملات غوغل فاتورة الكهرباء فايس بوك فوركس في فيديوهات ترفيه فيس بوك قابلة للطي قوالبي كاميرا كانفا كتب تعليمية كسب المال كمبيوتر كيفية الشراء من Aliexpress ليتكوين مجانيات محفظة مراجعة مسابقات مستشار وظيفي مشاكل بلوجر مشكلة مشكلة ChatGPT مُصور مُصور هاوٍ مصورًا محترفًا مقارنة مقارنة،هواوي،آبل،آيباد إير مقالات منصات منوعات مواقع نتفليكس نصائح نصاب هاوٍ هواتف هواتف قابلة للطي هواوي واتش 4 برو وظيفة وورد بريس ويندوز ويندوز 10 ويندوز 11 يوجوف Aliexpress bitsler Chatgpt ChatGPT Plus fiverr GPT-4 HTML jQuery youtube

نموذج الاتصال

إرسال