الرئيسية
أحدث الصور
التسجيل
دخولحصرية:(كود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )
+6
Avast
SLGray
same7
تامر معاز
نايبل الازهر
BJO
10 مشترك
BJOلمسة حرة- الدولة :
المساهمات : 1603
نقاط : 2575
العمر : 23
الموقع : عرب واي
حصرية:(كود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )
الثلاثاء نوفمبر 20, 2018 8:17 am
السلام عليكم ورحمة الله وبركاته
حصرية:(كود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )
اليوم سأقدم لكم كود حصرى ومميز وهو وضع قائمة بجانب الايمين من المنتدى بشكل جديد جدا
رابط مباشر لمشاهدة الكود على الطبيعة
معيانة
طريقة وضعه ؟
يمكنك وضعه فى التومبلايت عبر قالب : overall_footer_end
ضع الكود قبل
</body>
</html>
ملاحظة: الكود يظهر فقط للزوار وليس للأعضاء او المشرفين او المدراء!!
اما اذا ارت اظهاره للجميع يمكنك وضعه فى التشكيلات العامة
ضع الكود قبل
</body>
</html>
ملاحظة: الكود يظهر فقط للزوار وليس للأعضاء او المشرفين او المدراء!!
اما اذا ارت اظهاره للجميع يمكنك وضعه فى التشكيلات العامة
:: صوره حول الكود
https://2img.net/h/oi63.tinypic.com/2vs59gg.png
صورة قبل المرور عليه ؟
https://2img.net/h/oi66.tinypic.com/warads.png
- الكود:
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="utf-8" /> <title>تم التصميم بواسطة وهبة الساحر</title> <!-- CSS لغة العرض --> <style> /*======وهبة الساحر============== NAVIGATION ======= تم التصميم =========*/ .menu-icon { position:fixed; background: #1F282D; width: 48px; height: 120px; border-top-right-radius: 24px; border-bottom-right-radius: 24px; left: -24px; box-shadow: 0px 0px 3px #444; top:45%;} .menu-icon img { padding: 15px 0 0 25px; opacity: 0.8;} #navbar a { text-decoration: none; color: #ededed;} .shownav{ z-index:9999; width:40px; height:100%; left:0; top:0; position:fixed;} .hidenav0{ z-index:-9999; width:0; height:100%; left:0; top:0; position:fixed;} .hidenav1{ z-index:9996; width:100%; height:100%; left:0; top:0; position:fixed;} .navbar0{ z-index:10000; background:#1f282d; width:100px; height:100%; position:fixed; left:-100px; top:0; vertical-align:middle; display:table;-webkit-transition:all 600ms cubic-bezier(0.000,0,0,1.000);transition:all 600mscubic-bezier(0.000,0,0,1.000);} .navbar1{ z-index:10000; box-shadow: 0px 0px 3px #444; background:#1f282d; width:100px; height:100%; position:fixed; left:0; top:0; vertical-align:middle; display:table;-webkit-transition:all 600ms cubic-bezier(0.000,0,0,1.000);transition:all 600mscubic-bezier(0.000,0,0,1.000);} .navbar-inner { display: table-cell; vertical-align: middle; height: 500px;} .nav-item{ background:#1f282d; text-align:center; vertical-align:middle; display:block; width:100px; height:100px;} .nav-item.one:hover{background:#ED5565;}.nav-item.two:hover{background:#A0D468;}.nav-item.three:hover{background:#FFCE54;}.nav-item.four:hover{background:#5D9CEC;}.nav-item.five:hover{background:#EC87C0;}.nav-item.six:hover{background:#967ADC;} .nav-item img { width: 40px; height: 40px; padding: 15px 0 0 0; opacity: 0.9;} .nav-item p { color: #ededed; font-size: 15px; font-weight: bold;} </style> </head> <body> <div class="menu-icon"><img src="http://projects.timmuennig.com/navigation/left-nav/img/icons-small.png"></div> <div class="shownav" onmouseover="document.getElementById('navbar').className='navbar1'"onmousemove="document.getElementById('hidenav').className='hidenav1'"> </div> <div id="hidenav" class="hidenav0"onmouseover="document.getElementById('navbar').className='navbar0'"onmousemove="document.getElementById('hidenav').className='hidenav0'"> </div> <div id="navbar" class="navbar0"> <!-- navbar --> <div class="navbar-inner"> <a class="nav-item one" href="#ضع رابط المعرض"> <img src="http://projects.timmuennig.com/navigation/left-nav/img/design-icon.png"alt="Design-Icon"/> <p color="white">المعرض</p> </a> <a class="nav-item two" href="#رابط لقسم الاكواد"> <img src="http://projects.timmuennig.com/navigation/left-nav/img/development-icon.png" alt="Development-Icon"/> <p color="white">اكواد جديدة</p> </a> <a div class="nav-item three" href="#support"> <img src="http://projects.timmuennig.com/navigation/left-nav/img/support-icon.png"alt="Support-Icon"/> <p color="white">التحكم</p> </a> <a class="nav-item four" href="#رابط المواضيع الجديد"> <img src="http://projects.timmuennig.com/navigation/left-nav/img/portfolio-icon.png" alt="Portfolio-Icon"/> <p color="white">المواضيع الجديدة</p> </a> <a class="nav-item five" href="#رابط خروج"> <img src="http://projects.timmuennig.com/navigation/left-nav/img/contact2-icon.png" alt="Contact-Icon"/> <p color="white">خروج </p> </a> </div> <!-- end navbar-inner --> </div> <!-- وهبة الساحر --> <!--======وهبة الساحر============== NAVIGATION ======= تم التصميم ========--> <!-- JavaScript لغة التفاعل. --> <script> <!--======وهبة الساحر============== NAVIGATION ======= تم التصميم ========--> $('a[href^=#]').on('click', function(e){ var href = $(this).attr('href'); $('html, body').animate({ scrollTop:$(href).offset().top },'slow'); e.preventDefault(); }); <!--======وهبة الساحر============== NAVIGATION ======= تم التصميم ========--> </script> <!--======وهبة الساحر============== NAVIGATION ======= تم التصميم ========--> </body> </html>
يمكنك استبدال كود css فقط
صورة له ؟
https://2img.net/h/oi67.tinypic.com/200qp2g.png
- الكود:
.menu-icon { position:fixed; background: #00FFFF; width: 48px; height: 120px; border-top-right-radius: 24px; border-bottom-right-radius: 24px; left: -24px; box-shadow: 0px 0px 3px #444; top:45%;} .menu-icon img { padding: 15px 0 0 25px; opacity: 0.8;} #navbar a { text-decoration: none; color: #ededed;} .shownav{ z-index:9999; width:40px; height:100%; left:0; top:0; position:fixed;} .hidenav0{ z-index:-9999; width:0; height:100%; left:0; top:0; position:fixed;} .hidenav1{ z-index:9996; width:100%; height:100%; left:0; top:0; position:fixed;} .navbar0{ z-index:10000; background:#00FFFF; width:100px; height:100%; position:fixed; left:-100px; top:0; vertical-align:middle; display:table;-webkit-transition:all 600ms cubic-bezier(0.000,0,0,1.000);transition:all 600ms cubic-bezier(0.000,0,0,1.000);} .navbar1{ z-index:10000; box-shadow: 0px 0px 3px #444; background:#00FFFF; width:100px; height:100%; position:fixed; left:0; top:0; vertical-align:middle; display:table;-webkit-transition:all 600ms cubic-bezier(0.000,0,0,1.000);transition:all 600ms cubic-bezier(0.000,0,0,1.000);} .navbar-inner { display: table-cell; vertical-align: middle; height: 500px;} .nav-item{ background:#00FFFF; text-align:center; vertical-align:middle; display:block; width:100px; height:100px;} .nav-item.one:hover{background:#ED5565;}.nav-item.two:hover{background:#A0D468;}.nav-item.three:hover{background:#FFCE54;}.nav-item.four:hover{background:#5D9CEC;}.nav-item.five:hover{background:#EC87C0;}.nav-item.six:hover{background:#967ADC;} .nav-item img { width: 40px; height: 40px; padding: 15px 0 0 0; opacity: 0.9;} .nav-item p { color: #ededed; font-size: 15px; font-weight: bold;}
شكل اخر
يمكنك استبدال كود css فقط
صورة له ؟
https://2img.net/h/oi66.tinypic.com/2sbakq9.png
الكود
- الكود:
/*============================ NAVIGATION ============================*/ .menu-icon { position:fixed; background: #FF0000; width: 48px; height: 120px; border-top-right-radius: 24px; border-bottom-right-radius: 24px; left: -24px; box-shadow: 0px 0px 3px #444; top:45%;} .menu-icon img { padding: 15px 0 0 25px; opacity: 0.8;} #navbar a { text-decoration: none; color: #ededed;} .shownav{ z-index:9999; width:40px; height:100%; left:0; top:0; position:fixed;} .hidenav0{ z-index:-9999; width:0; height:100%; left:0; top:0; position:fixed;} .hidenav1{ z-index:9996; width:100%; height:100%; left:0; top:0; position:fixed;} .navbar0{ z-index:10000; background:#FF0000; width:100px; height:100%; position:fixed; left:-100px; top:0; vertical-align:middle; display:table;-webkit-transition:all 600ms cubic-bezier(0.000,0,0,1.000);transition:all 600mscubic-bezier(0.000,0,0,1.000);} .navbar1{ z-index:10000; box-shadow: 0px 0px 3px #444; background:#FF0000; width:100px; height:100%; position:fixed; left:0; top:0; vertical-align:middle; display:table;-webkit-transition:all 600ms cubic-bezier(0.000,0,0,1.000);transition:all 600ms cubic-bezier(0.000,0,0,1.000);} .navbar-inner { display: table-cell; vertical-align: middle; height: 500px;} .nav-item{ background:#FF0000; text-align:center; vertical-align:middle; display:block; width:100px; height:100px;} .nav-item.one:hover{background:#ED5565;}.nav-item.two:hover{background:#A0D468;}.nav-item.three:hover{background:#FFCE54;}.nav-item.four:hover{background:#5D9CEC;}.nav-item.five:hover{background:#EC87C0;}.nav-item.six:hover{background:#967ADC;} .nav-item img { width: 40px; height: 40px; padding: 15px 0 0 0; opacity: 0.9;} .nav-item p { color: #ededed; font-size: 15px; font-weight: bold;}
نايبل الازهرلمسة حرة مبتدئ- الدولة :
المساهمات : 236
نقاط : 236
العمر : 24
رد: حصرية:(كود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )
الخميس ديسمبر 13, 2018 3:16 pm
مشكوووووور علي الكود المميز
- تامر معازلمسة حرة مبتدئ
- الدولة :
المساهمات : 150
نقاط : 150
العمر : 25
رد: حصرية:(كود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )
الخميس ديسمبر 13, 2018 7:30 pm
مشكور علي الموضوع القيم والمميز
same7لمسة حرة مبتدئ- الدولة :
المساهمات : 210
نقاط : 210
العمر : 25
رد: حصرية:(كود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )
الجمعة ديسمبر 14, 2018 8:42 am
مشكور علي الموضوع القيم والمميز
SLGrayلمسة حرة مبتدئ- الدولة :
المساهمات : 294
نقاط : 347
العمر : 22
الموقع : عرب واي
رد: حصرية:(كود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )
الجمعة ديسمبر 14, 2018 3:37 pm
سلمت يداك علي الموضوع المميز
- Avastلمسة حرة مبتدئ
- الدولة :
المساهمات : 206
نقاط : 206
العمر : 24
رد: حصرية:(كود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )
الإثنين ديسمبر 31, 2018 6:15 pm
مشكور علي الموضوع القيم والمميز
The Godfatherلمسة حرة- الدولة :
المساهمات : 400
نقاط : 412
رد: حصرية:(كود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )
الإثنين يناير 07, 2019 8:48 pm
بصراحه انت تمتلك ذوق راقي في جـلب ماهو مميّز وجميل
- khaked22لمسة حرة
- الدولة :
المساهمات : 653
نقاط : 651
العمر : 24
رد: حصرية:(كود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )
الجمعة يناير 18, 2019 1:38 pm
شكرا علي الموضوع
Castroمجلس الادارة
افضل مديرجائزة افضل مدير اداري للمنتدي- الدولة :
المساهمات : 1205
نقاط : 1640
العمر : 27 
رد: حصرية:(كود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )
الأربعاء يناير 23, 2019 9:53 am
روووووعه
يعطيك العافيه ولا حرمنا جديدك
دمتم بخير
يعطيك العافيه ولا حرمنا جديدك
دمتم بخير
Generalلمسة حرة مبتدئ- الدولة :
المساهمات : 176
نقاط : 176
العمر : 21
رد: حصرية:(كود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )
الأربعاء يناير 30, 2019 1:48 pm
thx
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى