قائمة جانبية متحركة

[عميروش]

السلام عليكم و رحمة الله و بركاته

أردت أن أشارككم اليوم بكود بسيط يمكنك من وضع قائمة جانبية في موقعك

دائما ما نرى في المواقع ذات العرض المحدد مساحة فارغة عن اليمين و اليسار

هذا الكود مناسب جدا لمن يريد استغلال هذه المساحة

بعد وضع الكود ستتمكن سواءا من وضع قائمة تصفح أو روابط مهمة للزائر

أو يمكنك إستعمالها كمساحة إعلانية إضافية

و أحسن شيئ أن القائمة تطفو يعني متحركة و تتبع الزائر في حالة التحرك لأعلى أو لأسقل الصفحة

يعني القائمة تبقى في المنطقة المرئية للزائر و هذا ما يزيد أهميتها

و أيضا تستطيع جعل القائمة تطفو من الأعلى الى الأسفل أو من الأسفل الى الأعلى

و ذلك من خلال تغييرfrombottom أو fromtop

و أخيرا تستطيع التحكم أيضا في لون الجدول

هذه هو الكود

كود PHP:

<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" bgcolor="#FFFFCC">
      <p align="center"><b><font size="4">Menu</font></b></td>
  </tr>
  <tr>
    <td width="100%" bgcolor="#FFFFFF">
      <p align="left"> <a href="الرابط0">titre de la page</a><br>
       <a href="الرابط رقم 1">titre de la page</a><br>
       <a href="الرابط رقم 2">titre de la page</a><br>
       <a href="الرابط رقم3">titre de la page</a><br>
       <a href="الرابط رقم 4">titre de la page</a></td>
  </tr>
</table>
<!--END OF EDIT-->

</layer>


<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (https://www.javascript-fx.com/)
Script featured on/available at https://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
    var startX = 3,
    startY = 150;
    var ns = (navigator.appName.indexOf("Netscape") != -1);
    var d = document;
    function ml(id)
    {
        var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
        if(d.layers)el.style=el;
        el.sP=function(x,y){this.style.left=x;this.style.top=y;};
        el.x = startX;
        if (verticalpos=="fromtop")
        el.y = startY;
        else{
        el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
        el.y -= startY;
        }
        return el;
    }
    ********stayTopLeft=function()
    {
        if (verticalpos=="fromtop"){
        var pY = ns ? pageYOffset : document.body.scrollTop;
        ftlObj.y += (pY + startY - ftlObj.y)/8;
        }
        else{
        var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
        ftlObj.y += (pY - startY - ftlObj.y)/8;
        }
        ftlObj.sP(ftlObj.x, ftlObj.y);
        setTimeout("stayTopLeft()", 10);
    }
    ftlObj = ml("divStayTopLeft");
    stayTopLeft();
}
JSFX_FloatTopDiv();
</script> 


مثال للقائمة مع روابط



مثال للقائمة مع بانرات إعلانية