اضافة قائمه متحركه جميله للمنتدى

kalid

عضو جديد
28 أكتوبر 2010
42
0
0
السلام عليكم

شرح حصري على معهد الصقور

اضافة قائمه جميله للمنتدى

ادخل الى لوحة تحكم المنتدى

وتابع الشرح بالصور

ghdfqwas1.png


-------------------------------------------------------------------------------------------

ghdfqwas2.png


-------------------------------------------------------------------------------------------

ghdfqwas3.png


-------------------------------------------------------------------------------------------

ghdfqwas4.png


-------------------------------------------------------------------------------------------

ghdfqwas5.png


-------------------------------------------------------------------------------------------

الان انسخ محتويات قالب هيدر

والصقها في الفرونت بيج

ghdfqwas6.png


انزل الى اخر قالب الهيدر

والصق الكود التالي

PHP:
<center><div id="dock">   
<div class="dock-container">   
        <a class="dock-item" href="index.html"><span>Example 1</span><img src="dock/home.png" alt="home"></a>   
        <a class="dock-item" href="example2.html"><span>Example 2</span><img src="dock/email.png" alt="contact"></a>   
        <a class="dock-item" href="example3.html"><span>Example 3</span><img src="dock/portfolio.png" alt="portfolio"></a>   
        <a class="dock-item" href="all-examples.html"><span>All Examples</span><img src="dock/music.png" alt="music"></a>   
        <a class="dock-item" href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/#"><span>Video</span><img src="dock/video.png" alt="video"></a>   
        <a class="dock-item" href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/#"><span>History</span><img src="dock/history.png" alt="history"></a>   
        <a class="dock-item" href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/#"><span>Calendar</span><img src="dock/calendar.png" alt="calendar"></a>   
        <a class="dock-item" href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/#"><span>Links</span><img src="dock/link.png" alt="links"></a>   
        <a class="dock-item" href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/#"><span>RSS</span><img src="dock/rss.png" alt="rss"></a>   
        <a class="dock-item" href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/#"><span>RSS2</span><img src="dock/rss2.png" alt="rss"></a>   
    </div>   
</div>   
</center>

ghdfqwas7.png


-------------------------------------------------------------------------------------------

تمام انسخ محتويات القالب بعد التعديل من الفرونت بيج

واحذف محتويات قالب الهيدر القديم والصق الجديد

ثم اضغط على حفظ

-------------------------------------------------------------------------------------------

ghdfqwas8.png


-------------------------------------------------------------------------------------------

يوجد بالمرفقات مجلد بأسم dock

او

حمل من هنا

ارفع الى مجلد المنتدى

نتيجة الدرس

-------------------------------------------------------------------------------------------

ghdfqwas9.png


-------------------------------------------------------------------------------------------

عند الضغط على زر

-------------------------------------------------------------------------------------------

ghdfqwas10.png


-------------------------------------------------------------------------------------------

ان شاء الله يكون الشرح واضح ومفهوم

بالتوفيق للجميع

المصدر : معهد الصقور

السلام عليكم​