[css] كود وضع قائمة بجانب المنتدى بشكل جديد / ومتعددة الالوان

الخميس أغسطس 02, 2018 12:19 am1

وهبة الساحر

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

حصريةكود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )

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

رابط مباشر لمشاهدة الكود على الطبيعة

معيانة

طريقة وضعه ؟

يمكنك وضعه فى التومبلايت عبر قالب : overall_footer_end
ضع الكود قبل
</body>
</html>

ملاحظة: الكود يظهر فقط للزوار وليس للأعضاء او المشرفين او المدراء!! [css] كود وضع قائمة بجانب المنتدى بشكل جديد / ومتعددة الالوان Icon_arrow

اما اذا ارت اظهاره للجميع يمكنك وضعه فى التشكيلات العامة

:: صوره حول الكود

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>  <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">  <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>  </div>    <script>  $('a[href^=#]').on('click', function(e){ var href = $(this).attr('href'); $('html, body').animate({ scrollTop:$(href).offset().top },'slow'); e.preventDefault(); });  </script>  </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;}

دامت بخير انشاء الله
والقادم احلى

Tags: #html #css #tutorial