قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

12 - 02 - 2012, 23:14 hostusite.com غير متواجد حاليآ بالمنتدى

hostusite.com

:: عضو جديد ::

بيانات موقعي

اسم الموقع: مؤسسة استضف موقعك

اصدار المنتدى: 3.8.7

أرسل رسالة بواسطة Yahoo إلى hostusite.com

قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

بسم االله الرحمن الرحيم

الناتج
-----------------------------------------
المعاينة المباشرة
من هنا

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

مميزات القائمة :-

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

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

طريقة التركيب :-

1. تحميل الملف من المرفقات او من هنا
2. رفع ملف images الي ملف المنتدي (vb)
3. رفع ملف js الي ملف المنتدي (vb)
4. اضافة الاكواد الاتية :

اضافة الكود التالي في نهاية قالب الهيدر

رمز PHP:


			
        <ul id="navigation">
            <li class="home"><a href="#" title="Home"></a></li>
            <li class="about"><a href="#" title="About"></a></li>
            <li class="search"><a href="#" title="Search"></a></li>
            <li class="photos"><a href="#" title="Photos"></a></li>
            <li class="rssfeed"><a href="#" title="Rss Feed"></a></li>
            <li class="podcasts"><a href="#" title="Podcasts"></a></li>
            <li class="contact"><a href="#" title="Contact"></a></li>
        </ul>

طبعا هنغير الهاش (#) علي حسب روابط منتداك

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

اضافة الكود التالي في Additional CSS Definitions

رمز PHP:


			
#container_buttons{
    width: 400px;
    margin: 0 auto;
    background: rgba(255,255,255,0.3);
    padding: 60px 60px 30px;
    border-radius: 20px;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.09) inset;
}

#container_buttons p{
    display:block;
    padding-bottom:60px;
}


ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:2px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;

    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(images/home.png);
}
ul#navigation .about a      {
    background-image: url(images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(images/mail.png);
}

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

اضافة الكود التالي في نهاية قالب headinclude

رمز PHP:


			
        <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);







                    }
                );
            });
        </script>

اتمني يكون الشرح مفصل وسهل عليكم

الصور المصغرة المرفقة

اضغط على الصورة المصغرة لمشاهدتها بحجمها الأصلي

اسم الصورة : prev.png
عدد المشاهدات : 1700
حجم الصورة : 133.2 كيلوبايت
رقم هوية الصورة : 629011

اضغط على الصورة المصغرة لمشاهدتها بحجمها الأصلي

اسم الصورة : vb.png
عدد المشاهدات : 9
حجم الصورة : 37.5 كيلوبايت
رقم هوية الصورة : 629012

الملفات المرفقة

Navigation by hostusite.zip (259.3 كيلوبايت, عدد مرات المشاهدة 360 مرة)

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

ALBRRY, الرهف, ساعة زمن و 3 آخرون معجبون بهذا.

توقيع hostusite.com

اسم الشركة : مؤسسة استضف موقعك
صاحب الشركة : احمد طارق
خدمات الشركة : استضافة - ريسلير - سيرفير VBS - ارشفة - دعم فني - تصميم
مقر الشركة : مصر - الاسكندرية - العجمي - ابو يوسف
هاتف الشركة : 02/0119962742
بريد الشركة : hostusite

yahoo.com
رابط الشركة : www.hostusite.com

رقم المشاركة : [ 2 ]

12 - 02 - 2012, 23:49 M.Daoud غير متواجد حاليآ بالمنتدى

M.Daoud

:: عضو نشيط ::

بيانات موقعي

اسم الموقع: كاش 4 عرب

اصدار المنتدى: مدونات

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

جميله اخى الكريم

جزيت خيرا على ما صنعت

واصل ابداعك ..,

M.Daoud

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

رقم المشاركة : [ 3 ]

13 - 02 - 2012, 00:05 زمن الإنكسار غير متواجد حاليآ بالمنتدى

زمن الإنكسار

:: عضو نشيط ::

بيانات موقعي

اسم الموقع: قريباً

اصدار المنتدى: 3.8.7

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

رائعه

يعطيك ربي العافيه

زمن الإنكسار

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع زمن الإنكسار

لا إله إلا الله

رقم المشاركة : [ 4 ]

13 - 02 - 2012, 00:26 :: dev-vb :: غير متواجد حاليآ بالمنتدى

:: dev-vb ::

:: عضـــو::

بيانات موقعي

اسم الموقع: :: منتديات زيباره التطويرية ::

اصدار المنتدى: 3.8.5

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

♥ جميلة بارك الله في أمثالك ~ تقبل تحيتاتي

:: dev-vb ::

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع :: dev-vb ::

الاسم : أشرف
الدولة : I ♥ Morocco
الهوايات : Jquery & Css3

as_lo@live.fr

رقم المشاركة : [ 5 ]

13 - 02 - 2012, 00:58 رموز الابداع غير متواجد حاليآ بالمنتدى

رموز الابداع

:: عضو نشيط ::

بيانات موقعي

اصدار المنتدى: 3.8.4

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

بارك الله فيك

رموز الابداع

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع رموز الابداع

اسم الشركه : رموز الابداع للدعم الفني والتصميم والارشفة
صاحب الشركه : محمود فايز الوادية
أداء الشركـــه : دعم فني - ارشفة - تصميم
بريد الشركـــه : admin@rmozz.com
هاتف الشركه : 00962785668632
رابط الشركة : http://www.rmozz.com/support

رقم المشاركة : [ 6 ]

13 - 02 - 2012, 09:39 إنسان حر غير متواجد حاليآ بالمنتدى

إنسان حر

:: عضـــو::

بيانات موقعي

اصدار المنتدى: صفحتي

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

هال بالامكان وضعها افقيه وثابته في اي مكان اريده في التصميم

إنسان حر

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

رقم المشاركة : [ 7 ]

13 - 02 - 2012, 10:50 أبومازن غير متواجد حاليآ بالمنتدى

أبومازن

:: عضو نشيط ::

بيانات موقعي

اسم الموقع: موقع مفاجأة قول بسم الله وادخل

اصدار المنتدى: صفحتي

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

لو كل واحده بلون مختلف كانت اصبحت اجمل

أبومازن

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع أبومازن

لعنة الله على اعداء الاسلام

رقم المشاركة : [ 8 ]

13 - 02 - 2012, 14:13 احـمد الجهنـي غير متواجد حاليآ بالمنتدى

احـمد الجهنـي

:: عضو نشيط ::

بيانات موقعي

اصدار المنتدى: لا أملك منتدى

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

تسلم ,, الله لايحرمنا منك . .

احـمد الجهنـي

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

رقم المشاركة : [ 9 ]

13 - 02 - 2012, 14:48 الحرامي غير متواجد حاليآ بالمنتدى

الحرامي

:: عضو نشيط ::

بيانات موقعي

اسم الموقع: فريقُ آلدعمُ ~| كتآلوجَ

اصدار المنتدى: 3.8.7

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

رووعه وربي بارك الله فيك
وجاري تركيبها بالستايل الجديد

مشكور اخوي ما كصرت

الحرامي

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع الحرامي

اسم الشركه : معهد كتآلوج
صاحب الشركه : الاخ عثمآن ابو ياسر
أداء الشركـــه : دعم فني وتصميم وآستضافة
بريد الدعم الفني : iqcoffe

yahoo.com آو hassaan.teto

gmail.com
هاتف الدعم الفني بالشركة : من داخل وخارج العراق / 009647702574330
الدعم والتصميم والاستضافة : www.ss0s.net

الدعم الفني الخآص بشركة كتالوج
حسان الآلوسي

الفيس بوك

رقم المشاركة : [ 10 ]

13 - 02 - 2012, 21:40 hostusite.com غير متواجد حاليآ بالمنتدى

hostusite.com

:: عضو جديد ::

بيانات موقعي

اسم الموقع: مؤسسة استضف موقعك

اصدار المنتدى: 3.8.7

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

منورين ياشباب شكرا علي مروركم
وبالنسبة للطلبوا تعديلات جاري عملها

hostusite.com

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع hostusite.com

yahoo.com
رابط الشركة : www.hostusite.com

رقم المشاركة : [ 11 ]

13 - 02 - 2012, 22:04 Meko saad غير متواجد حاليآ بالمنتدى

Meko saad

:: عضو نشيط ::

بيانات موقعي

اسم الموقع: منتدى كول مان

اصدار المنتدى: 3.8.6

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

شكرا ليك على القائمة الاكثر من رائعه
ولكن ظهرت معى مشكلة وهى القائمة لا تتحرك ثابتة مو مثل فى المثال
وده مثل من موقعى التجريبى
Meko

Meko saad

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

قروشة نت معجب بهذا.

توقيع Meko saad

منتدى كول مان

WebMaster@CoOolMan.CoM
آحسن منتدى شبابى فى جمهورية مصر العربية
WwW.CoOolMan.Com
والان

موقع ومنتدى كول مان معروض للبيع بسعر خيالى

آضغط هنا لمشاهدة الموضوع

رقم المشاركة : [ 12 ]

13 - 02 - 2012, 22:18 hostusite.com غير متواجد حاليآ بالمنتدى

hostusite.com

:: عضو جديد ::

بيانات موقعي

اسم الموقع: مؤسسة استضف موقعك

اصدار المنتدى: 3.8.7

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

اقتباس

المشاركة الأصلية أضيفت بواسطة : Meko saad


	شكرا ليك على القائمة الاكثر من رائعه ولكن ظهرت معى مشكلة وهى القائمة لا تتحرك ثابتة مو مثل فى المثال وده مثل من موقعى التجريبى Meko

تاكد من رفع ملف js داخل ملف المنتدي
وتاكد من وضع هذا الكود في نهاية قالب headinclude

رمز PHP:


			
        <script type="text/javascript" src="js/jquery-1.3.2.js"></script>

        <script type="text/javascript">

            $(function() {

                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);



                $('#navigation > li').hover(

                    function () {

                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);

                    },

                    function () {

                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);

                    }

                );

            });

        </script>

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع hostusite.com

yahoo.com
رابط الشركة : www.hostusite.com

رقم المشاركة : [ 13 ]

13 - 02 - 2012, 22:33 Meko saad غير متواجد حاليآ بالمنتدى

Meko saad

:: عضو نشيط ::

بيانات موقعي

اسم الموقع: منتدى كول مان

اصدار المنتدى: 3.8.6

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

تم التاكد وتم رفع الملفات مرة اخرى ولكن ما فى جديد

Meko saad

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع Meko saad

رقم المشاركة : [ 14 ]

13 - 02 - 2012, 22:55 hostusite.com غير متواجد حاليآ بالمنتدى

hostusite.com

:: عضو جديد ::

بيانات موقعي

اسم الموقع: مؤسسة استضف موقعك

اصدار المنتدى: 3.8.7

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

اقتباس

المشاركة الأصلية أضيفت بواسطة : Meko saad


	تم التاكد وتم رفع الملفات مرة اخرى ولكن ما فى جديد

انا مجرب القائمة علي اكثر من موقع واكثر من منتدي ومافيهاش مشكلة
ياريت الاخوة الاعضاء الي جربوها يقولوا لو في مشكلة

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع hostusite.com

yahoo.com
رابط الشركة : www.hostusite.com

رقم المشاركة : [ 15 ]

15 - 02 - 2012, 15:05 mr.arabyun غير متواجد حاليآ بالمنتدى

mr.arabyun

مشرف
الاعدادات الشامله للاستايلات
مشاكل الإستايلات والقوالب

بيانات موقعي

اسم الموقع: :: مايردك غير أصبعـك ::

اصدار المنتدى: 3.8.5

رد : قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

بارك الله فيك يالذيب .,

mr.arabyun

أضفني كصديق

- مشاركة هذا الرد في
- Digg
- Del.icio.us
- Technorati
- Twitter

توقيع mr.arabyun

ملاحظات

مـن هـ ن ـآ
فتره إختبارات دخولي من نصف ساعه إلى ساعتين فقط
تستطيع التواصل معي arabyunhotmail.com في غير أمور ترايدنت ! (مشاكل - طلبات -إلخ..)
أضع الدروس والأعمال وأتقبل النقد البناء
يرجى عند مراسلتي بالتقيم ذكر الإسم

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