قائمة مميزة منسدلة بثأتير ال jquery

السلام عليكم 
  

الjquery هي ليست لغة برمجة مستقلة كما يظن البعض،

هي عبارة عن مكتبة مجانية في الجافا سكربت 

مكتوبة ومطورة بواسطة John Resig،  

تتيح لنا وبسهولة تامة إضافة تأثيرات رائعة على صفحات الويب 

وسهولة التحكم بالكثير من الأحداث مثل تمرير مؤشر الفأرة

أو النقر بزر الفارة وغيرها الكثير بسطور برمجية قليلة ومفهومة

موضوعنا اليوم  تم قرائته من هدا الموقع 

عبارة عن ثاتير رائع و مميز و يتم التحكم فيه عبر مؤشر الفأرة

تحميل (Download)مثال (Demo)

أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم   " اضافة اداةHTML " 
 

و نضع  هدا الكود 

 

 




<script src="http://blogspacetech.googlecode.com/files/prototype.js" type="text/javascript"></script>

<script src="http://blogspacetech.googlecode.com/files/effects.js" type="text/javascript"></script>

<script src="http://blogspacetech.googlecode.com/files/side-bar.js" type="text/javascript"></script>

<style>

{

    font-size:75%;

}

a{

    outline: none;

}

a:active{

    outline: none;

}

#sideBar{

text-align:center;

}

#sideBar h2{

    color:#FFFFFF;

    font-size:110%;

    font-family:arial;

    margin:10px 10px 10px 10px;

    font-weight:bold !important;

}

#sideBar h2 span{

    font-size:125%;

    font-weight:normal !important;

}

#sideBar ul{

    margin:0px 0px 0px 0px;

    padding:0px 0px 0px 0px;

}

#sideBar li{

    margin:0px 10px 3px 10px;

    padding:2px;

    list-style-type:none;

    display:block;

    background-color:#DA1074;

    width:177px;

    color:#FFFFFF;

}

#sideBar li a{

    width:100%;

}

#sideBar li a:link,

#sideBar li a:visited{

    color:#FFFFFF;

    font-family:verdana;

    font-size:100%;

    text-decoration:none;

    display:block;

    margin:0px 0px 0px 0px;

    padding:0px;

    width:100%;

}

#sideBar li a:hover{

    color:#FFFFFF;

    text-decoration:underline;

}

#sideBar{

    position: fixed;

    width: auto;

    height: auto;

    top: 140px;

    left:0px;

    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Ee9rz-3qr-ZBfsjii0AxgJd6_Wi5z8EPi0Ylyz7dWyPPuT539t1vXtYr1OsUv8dkse-tMf01bD3kTgQk_0smuBg6lNK6HKS8zyxZZQ_S-AQ0ywqy05yoy3YIEgadzKDTeQUNJxi3lWM/s320/2wejg37.jpg.gif);

    background-position:top right;

    background-repeat:repeat-y;

}

#sideBarTab{

    float:left;

    height:137px;

    width:28px;

}

#sideBarTab img{

    border:0px solid #FFFFFF;

}

#sideBarContents{

    float:left;

    overflow:hidden !important;

    width:200px;

    height:320px;

}

#sideBarContentsInner{

    width:200px;

}</style>

<div id="sideBar">

        <div id="sideBarContents" style="display:none;">

        <div id="sideBarContentsInner">

            <h2><div style="text-align: justify;"><span style="font-family:verdana;">روابط هامة</span>

</div></h2>

<ul>

<li><a href="">الرابط الاول</a></li>

<li><a href="">الرابط الثاني</a></li>

<li><a href="#">الرابط الثالت</a></li>

<li><a href="#">الرابط الرابع</a></li>

</ul>

</div> </div>

    <a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAd3JESaSWpMBwhseAHLLBzjieR3iMwClygXzwN6pBNe8su-amHcmQjqIV12Cuevp90tt7J2XpQEgvFsIj8krmP_rQpYILw_alNOw7VCepmR4Vy2sai4olD-968zmtBQPCqKwpCUkxYo/s320/blogspacetech.gif" title="sideBar" /></a>

</div>

 

 

 المتغيرات ...موجودة فقط في كود ال HTML

 

 




<div id="sideBar">

        <div id="sideBarContents" style="display:none;">

<div id="sideBarContentsInner">

            <h2><div style="text-align: justify;"><span style="font-family:verdana;">روابط هامة</span>

</div></h2>
<ul>

<li><a href="http://doaib.blogspot.com/">الرابط الاول</a></li>

<li><a href="http://abu-iyad.blogspot.com">الرابط الثاني</a></li>

<li><a href="#">الرابط الثالت</a></li>

<li><a href="#">الرابط الرابع</a></li>

</ul>

</div> </div>

    <a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAd3JESaSWpMBwhseAHLLBzjieR3iMwClygXzwN6pBNe8su-amHcmQjqIV12Cuevp90tt7J2XpQEgvFsIj8krmP_rQpYILw_alNOw7VCepmR4Vy2sai4olD-968zmtBQPCqKwpCUkxYo/s320/blogspacetech.gif" title="sideBar" /></a>

</div>

 

 

اتمنى لك الاستفادة