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

Unknown

6:04 ص

3 تعليقات

شاركه غرد جوجل+

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

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

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

• العنصر الأول
• العنصر الثاني
  • رابط فرعي 1
  • رابط فرعي 2
  • رابط فرعي 3
    • ثانوي 1
    • ثانوي 2
    • ثانوي 3
  • رابط فرعي 4
  • رابط فرعي 5
• العنصر الثالث
• العنصر الرابع

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

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>

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

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

لمن واجهته يذكرها في تعليق