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

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

نبتدئ بالفيديو أولا ثم ننتقل الى الكود

الخطوات

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;
}

- قم بتحميل الملف التالى : http://www.mediafire.com/?emmbatdxxvhcvaz
- ثم قم برفع الملف الى سيرفر يدعم الروابط المباشرة مثل http://mdn.fm/
ثم ابحث عن الكود

</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" في السيرفر الذي تم رفعه اليه

اخر خطوة كود ال 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'>تطوير اضافة كومبونانت&#8207;</a></li>
</ul>
</li>

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

مع تبديل الراوبط بالتي تريدها في مدونتك