اضافة قائمة مندسلة خفيفة


السلام عليكم ورحمة الله وبركاته

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


معاينة مباشرة للاضافة


طريقة التركيب


  1. اذهب الى لوحة بلوجر الرئيسية .
  2. اختار منها لوحة التخطيط .
  3. اختار اضافة اداة HTML/JavaScrupt  
  4. اضف الكود التالي وغير ما يلزمك :
<style type='text/css'>
#plozrdrdown{
width:100%;
height:40px;
display:block;
padding:0;
background:#444;
}
#plozrdmenu,#drop{
list-style:none;
direction:rtl;
padding:0;
margin:0;
    }
#plozrdmenu li {
float:right;
}
#plozrdmenu li a {
display:block;
padding:6px 15px;
color:#fff;
text-decoration:none;
font-weight:normal;
font-size: 15px;
}
#plozrdmenu li a:hover {
background:#ccc;
color:#000;
transition:all .7s ease 0s;
}
#drop {
position:absolute;
display:none;
list-style:none;
z-index:60; 
}
#drop li {
float:none;
}
#drop li a {
background:#444;
border-bottom:1px solid #bbb;
padding:5px 10px;
width:150px;
}
    
#sub:hover #drop {
display:block;
}
#drop2:hover #plozrdmenu3 {
display:block;
}
#plozrdmenu3 {
position:absolute;
display:none;
margin-right:131px;
margin-top:-28px;
}
#plozrdmenu3 li{
list-style:none;
margin-left:100px;
}
#plozrdmenu3 li a {
width:150px;
}
</style>
<div id='plozrdrdown'>
<ul id='plozrdmenu'>
<li>
<a href='#'>العنصر الأول</a></li>
<li id='sub'>
<a href='#'>العنصر الثاني</a>
<ul id='drop'>
<li>
<a href='#'>رابط فرعي 1 </a></li>
<li>
<a href='#'>رابط فرعي 2 </a></li>
<li id='drop2'>
<a href='#'>رابط فرعي 3 </a>
<ul id='plozrdmenu3'>
<li>
<a href='#'>ثانوي 1</a></li>
<li>
<a href='#'>ثانوي 2</a></li>
<li>
<a href='#'>ثانوي 3</a></li>
</ul>
</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>
</ul>
</div>



غير اسامي القوائم وهي واضحة مثال العنصر الأول - العنصر الثاني

غير هذه العلامة # بالرابط الذي تريده 


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

عن الكاتب

أنا عماد إياد من المملكة الاردنية الهاشمة حبي الاول واهتمامي هو التدوين والحمد لله استطعت ان احرز نجاح كبير ومدونة حلم ويب تعبر عما اهواه

4 التعليقات لموضوع "اضافة قائمة مندسلة خفيفة"

الكاتب
avatar

لا شكر على واجب

الكاتب
avatar

=f =y =e =r شكرا لزيارتك زرنا مجددا =s

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1 أن يكون التعليق خاص بمحتوى التدوينة
2 أن لا تضع أي روابط خارجية


الابتسامات الابتسامات