إضافة قائمة منسدلة لمدونة بلوغر

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

السلام عليكم درس اليوم أو بالأحرى إضافة اليوم يبحث عنها الكثير من المدونين بجهد لكن دون جدوى لأنهم لن يجدوها إلا هنا بإدن الله، و بما أنك من متتبعي مدونة أسرار بلوغر فلك الفضلية عليهم جميعا لأننا بحمد الله نتفرد بما هو جديد لإرضاء دوق الراقي أملين أن تنال هذه الإضافة إعجابك.

كما أننا قمنا بتقديم إضافات مشابهة في هذا الموضوع Tabbed Sidebar إضافة جميلة و سهلة و هذا إضافة جديد المواضيع بطريقة متحركة.

أما الأن أتركك مع مشاهدة التطبيق و طريقة التركيب.

1- إضافة كود CSS الخاص بالقائمة المنسدلة

سجل الدخول لمدونتك / تصميم / تحرير HTML / ثم قم بالبحث عن الكود التالي

]]></b:skin>

و قبله مباشرة قم بإضافة هذا الكود

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float:right;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

2- إضافة كود ال Java

بعد إضافة الكود الأول قم بالبحث عن هذا الكود

</head>

ثم أضف قبله مباشرة الكود الخاص بالجافا

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').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>

3- إضافة القائمة المنسدلة

الأن مع المرحلة الأخيرة لإكمال هذه الإضافة الرائعة

توجه الأن إلى تصميم / عناصر الصفحة / إضافة أداة / HTML/JavaScript

 

أترك مكان العنوان فارغ و ضع الكود في المربع الكبير

الأن قم بإضافة الكود التالي للأداة

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
  </li></ul>

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

ملاحظة : قم بتغير كلمة (Menu/Drop) للكلمة التي تريد و غير العلامة (#) برابط الصفحة.

اتمنى أن تنال الإضافة إعجابك في انتظار تعليقاتك و استفساراتك تقبل تحياتي الحارة.

إذا أعجبك الموضوع فشاركه مع أصدقائك فلن يأخد منك الأمر سوى 5 ثوان :)