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

السلام عليكم
 

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

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

تحميل (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/AVvXsEiqSUsewTDY2rZOaXy-XBhlJlyGcoL3eDhw5kwlXcXUNHalH4VCt_gKSCkHCmBB45bZwg3I-rHDThmdhzj4M8YKUce7SKk3kLgxMfo_ogBxoe4o-YBrRQisuV-2tzbld9sagKDXqPpGIjg/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/AVvXsEgK5Rzz2oPR7EKSgnDE1KnscwVF0_q3uE0ZSSZHsWl5xmEbH150uGgdBHl2PNdvMS6uWrj5TyHhiz2omHkMqaf2DqSgHnmR1KLV1MMfYratwR5D7S4OujsGX8DCTp78NtxFRIh2A3Qy_nE/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/AVvXsEgK5Rzz2oPR7EKSgnDE1KnscwVF0_q3uE0ZSSZHsWl5xmEbH150uGgdBHl2PNdvMS6uWrj5TyHhiz2omHkMqaf2DqSgHnmR1KLV1MMfYratwR5D7S4OujsGX8DCTp78NtxFRIh2A3Qy_nE/s320/blogspacetech.gif" title="sideBar" /></a>

</div>