افضل قائمة علوية بتقنية css . jquery خفيفة و متوافقة مع كل المتصفحات للـ:vb

http://www.dzbatna.com/images/icons/iconrote.gif ط§ظپط¶ظ„ ظ‚ط§ط¦ظ…ط© ط¹ظ„ظˆظٹط© ط¨طھظ‚ظ†ظٹط© css . jquery ط®ظپظٹظپط© ظˆ ظ…طھظˆط§ظپظ‚ط© ظ…ط¹ ظƒظ„ ط§ظ„ظ…طھطµظپط*ط§طھ ظ„ظ„ظ€:vb

---

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

كيفكم يالغالين ،، إن شاء الله بخير دايمــاً ،

اقدم لكم افضل قائمة علوية ( فوق هيدر المنتدى forum ) بتقنية jquery و css في منتدى الاناقة و الجمال ..
متوافق مع جميع المتصفحات خفيف جدا و ما يأثر على سرعة المنتدى forum ...

اول اعطيكم صورة للمثال :

http://www8.0zz0.com/2014/10/08/10/393132017.jpg

و لمعاينة المثال على منتداي :

منتديات طلاب الجزائر





الآن شرح طريقة طريقة التركيب install :

اولا كل ما عليك فعله هو اضافة الكود code التالي الى : تعاريف CSS الإضافية/Additional CSS Definitions الخاصة بستايل styleك ..

رمز Code:
/*Start Code etuddz.com*/ #headerWrapper { width:1330px; height:376px; overflow:visible; } .topNav { width:1330px; height:46px; overflow:visible; margin:0 auto; background-image: url('http://www.etuddz.com/vb/blue-css/cat.jpg'); background-repeat:repeat; } .home { width:24px; height:24px; float:right; background:url(http://www.etuddz.com/vb/etuddz/images/home.png) center top no-repeat; margin:12px 20px 0 0; } .home a { display:block; width:24px; height:24px; } .topMenu { height:46px; width:740px; float:right; overflow:visible; margin:0px 0 0 0; } .topMenu ul { margin: 0px 15px 0 0; text-align:right; } .topMenu ul li { } .topMenu ul li a { } .topMenu ul li a:hover { color:#fff; } #dropmenu, #dropmenu ul { margin: 0px 15px 0 0; padding: 0; list-style-type: none; list-style-position: outside; position: relative; line-height: 1.5em; z-index: 999; width: 1330px; font-weight: bold; } #dropmenu a { -moz-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ; -webkit-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; transition: all 0.30s ease-in-out; display:block; font: normal 11px/42px GE_bold, Geneva, sans-serif; color:#ffffff; height:46px; display:block; text-shadow:0 1px #1a1b20; padding: 0 20px; } #dropmenu a:hover { } #dropmenu .current a, #dropmenu li:hover > a { color:#fff; text-shadow:0 1px #000; background:#000000; } #dropmenu li { float:right; height:46px; background:url(http://www.etuddz.com/vb/etuddz/images/top_sep.png) right top no-repeat; position: relative; } } #dropmenu li:last-child { background: none; } #dropmenu ul { padding: 10px 0 2px 0; position: absolute; display: none; width: 293px; top: 46px; right: -15px; background:#000000; } #dropmenu ul a { } #dropmenu li ul li { float: right; background: none !important; height: 29px; width: 130px; padding:0 !important; margin: 0px 9px 10px 4px !important; } #dropmenu li ul li:hover { background: none !important; height: 29px !important; width: 130px !important; } #dropmenu li ul a { font: normal 11px/27px Tahoma, Geneva, sans-serif !important; padding:0 !important; float: right; height: 29px; width: 130px; color: #000; text-shadow:0 1px #ffffff; background:#ffffff; text-align:right; text-indent:8px; } #dropmenu li ul a:hover { background: #18acbd; color: #000 !important; height: 29px; text-shadow:0 1px #1dbecb; width: 130px; font: normal 11px/27px Tahoma, Geneva, sans-serif !important; border-top:none !important; } #dropmenu ul ul { top: auto; } #dropmenu li ul ul { left: 12em; margin: 0px 0 0 10px; } #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul { display: none; } #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul { display: block; } .topNav .socials { width:130px; height:46px; float:left; margin:0px 0 0 20px; } .topNav .socials ul, .endSocials ul { margin: 11px 0 0 0; text-align:right; } .topNav .socials ul li, .endSocials ul li { float:left; margin:0 5px 0 0; } .topNav .socials ul li a, .endSocials ul li a { display:block; width:27px; height:27px; }
و رفع الصور المرفقة الى مجلد منتداك ...

و يمكنك التعديل على حجم القائمة لتتناسب مع ستايل style منتداك عن طريق تعديل الكود code التالي :

رمز Code:
#headerWrapper { width:1330px; height:376px; overflow:visible;

ثم حفظ وشوف نتيجة http://www.dzbatna.com/images/smilies/shiny01.gif

*******************

إنتهت ،، تم بحمد لله

الموضوع كامل جهد شخصي ،، دعواتكم لي بالتوفيق والنجاح


منتديات طلاب الجزائر

ملاحظة :