0%

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

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


حصريةSadكود وضع قائمة بجانب المنتدى بشكل جديد وحصرى / ومتعددة الالوان )
اليوم سأقدم لكم كود حصرى ومميز وهو وضع قائمة بجانب الايمين من المنتدى بشكل جديد جدا 
رابط مباشر لمشاهدة الكود على الطبيعة
طريقة وضعه ؟
يمكنك وضعه فى التومبلايت عبر قالب : overall_footer_end
ضع الكود قبل 
</body>
</html>

ملاحظةالكود يظهر فقط للزوار وليس للأعضاء او المشرفين او المدراء!! 
اما اذا ارت اظهاره للجميع يمكنك وضعه فى التشكيلات العامة

:: صوره حول الكود 
صورة قبل المرور عليه ؟


فضلا وليس امر ضع رد ليظهر لك المحتوى

الكود ؟
الكود:
  <!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'">&nbsp;</div>     <div id="hidenav" class="hidenav0"onmouseover="document.getElementById('navbar').className='navbar0'"onmousemove="document.getElementById('hidenav').className='hidenav0'">&nbsp;</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 فقط
صورة له ؟


http://i67.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 فقط صورة له ؟



http://i66.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


القلوب المكسورة كالزجاج المكسور خطرة و مؤذية لا تحتاج للحب بقدر ما تحتاج للوحدة حتى يتم شفاؤها
تستطيع الرد على المواضيع في هذا المنتدى