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

[عميروش]

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

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

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

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

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

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

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

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

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

و ذلك من خلال تغيير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> 


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



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

[الأخ ياسين]

شكرا لك أخي عميروش مبتدرة حسنة لكن ممكن كود قائمة للإعلانات في جانب الصفحة لكن تتنقل مع الصفحة فعندما تنزل إسفل الصفحة يتنزل الإعلان أيضا أي تتبع المتصفح

[عميروش]

المشاركة الأصلية كتبت بواسطة bensfiayassin

شكرا لك أخي عميروش مبتدرة حسنة لكن ممكن كود قائمة للإعلانات في جانب الصفحة لكن تتنقل مع الصفحة فعندما تنزل إسفل الصفحة يتنزل الإعلان أيضا أي تتبع المتصفح

هذا الكود يلبي حاجتك أخي الكريم

القائمة ستنزل أسفل الصفحة أو ترتفع حسب المتصفح

يعني تتبع تحركات الزائر

[الأخ ياسين]

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

[الأخ ياسين]

لا أخي لم تتحرك

[الأستاذ سامي]

السلام عليكم و رحمة الله و بركاته
اخي عميروش موضوع مفيد
و ان كنت شخصيا لا احب اثقال موقعي بالجافا سكربت ان كانت غير ضرورية

بارك الله فيك

[عميروش]

المشاركة الأصلية كتبت بواسطة bensfiayassin

لا أخي لم تتحرك

زر الموقع الموجود في توقيعي

لرؤيت مثال حي للقائمة الجانبية المتحركة و جربها بنفسك

أيضا


شكرا للأستاذ سامي على المرور العطر

[الأخ ياسين]

حقا قد زرت الموقع و رأيت ذلك لكنهنا تخفي جزء من الموقع أخي
************************************************** ***********************
وانا سجلت في الموقع قصد الربح منه كما كتبت في التوقيع و لم أفهم شيء
************************************************** ****************************