فيديو كيفية عمل قائمة منسدلة لمدونتك

أول حاجة نبتدي بها

الفيديو

ثانيا الخطوات :

1- و ضع كود السي اس اس

• ابحث عن الكود
  

  ]]></b:skin>

  
  

• ثم ضع الكود التالى
  

  .jqueryslidemenu {
      font: bold 12px Verdana;
      width: 100%;
  }
  .jqueryslidemenu ul {
      float: right;
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
  .jqueryslidemenu ul li {
      display: inline;
      float: right;
      position: relative;
  }
  .jqueryslidemenu ul li a {
      color: #666666;
      display: block;
      margin: 5px 7px;
      padding: 3px;
      text-decoration: none;
  }
  * html .jqueryslidemenu ul li a {
      display: inline-block;
      font-weight: bold;
  }
  .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited {
      color: #666666;
  }
  .jqueryslidemenu ul li a:hover {
      background: none repeat scroll 0 0 BurlyWood;
      font-weight: bold;
  }
  .jqueryslidemenu ul li ul {
      background-color: black;
      position: absolute;
      visibility: hidden;
      z-index: 5;
  }
  .jqueryslidemenu ul li ul li {
      display: block;
      float: none;
  }
  .jqueryslidemenu ul li ul li ul {
      z-index: 5;
  }
  .jqueryslidemenu ul li ul li a {
      font: 13px Verdana;
      margin: 0;
      padding: 5px;
      width: 160px;
  }
  .jqueryslidemenuz ul li ul li a:hover {
      background: none repeat scroll 0 0 black;
      color: white;
  }
  .downarrowclass {
      left: 7px;
      position: absolute;
      top: 12px;
  }
  .rightarrowclass {
      left: 5px;
      position: absolute;
      top: 2px;
  }

  
  

2 - وضع كود الجافا سكريبت

• - قم بتحميل الملف التالى : http://www.mediafire.com/?emmbatdxxvhcvaz
  
• ابحث عن الكود
  

  </head>

  
  

• ضع الكود التالى فوقه

  <!--[if lte IE 7]>
  <style type='text/css'>
  html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
  </style>
  <![endif]-->
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
  <script src='http://YOUR_URL/slidemenu_horiz.js' type='text/javascript'/>

  
  مع ملاحظة تبديل "YOUR_URL" برابط ملف "slidemenu_horiz.js" في السيرفر الذي تم رفعه اليه
  

3 - اخر خطوة هي وضع ال html في المكان المناسب لك في صفحتك

و يكون بالشكل التالى كمثال

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='/'>الرئيسية</a></li>
<li><a class='main_item' href='http://barmig.blogspot.com/search/label/%D8%AC%D8%A7%D9%81%D8%A7%20java'>جافا java</a>
<ul>
<li><a href='http://barmig.blogspot.com/search/label/%D9%82%D9%88%D8%A7%D8%B9%D8%AF%20%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA%20database'>قواعد بيانات databases</a></li>
</ul></li>
<li><a class='main_item' href='http://barmig.blogspot.com/search/label/%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D9%85%D9%88%D8%A7%D9%82%D8%B9'>تصميم مواقع</a>
<ul>
<li><a href='http://barmig.blogspot.com/search/label/%D8%AC%D9%85%D9%84%D8%A9-Joomla'>مجلة جملة joomla</a>
<ul>
<li><a href='http://barmig.blogspot.com/search/label/%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%20%D8%B3%D9%88%D8%A8%D9%8A%202'>تطبيق سوبي 2 sobi2</a></li>
<li><a href='http://barmig.blogspot.com/search/label/%D8%AA%D8%B7%D9%88%D9%8A%D8%B1%20%D8%A7%D8%B6%D8%A7%D9%81%D8%A9%20%D9%83%D9%88%D9%85%D8%A8%D9%88%D9%86%D8%A7%D9%86%D8%AA'>تطوير اضافة كومبونانت‏</a></li>
</ul>
</li>

</ul>
</li>
</ul>
<br style='clear: left'/>
</div>

الموضوع الاصلي : http://barmig.blogspot.com/2011/03/blog-post.html