تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 1 از 4 1234 آخرینآخرین
نمایش نتایج: از 1 به 10 از 40

مقاله: [آموزش] قرار دادن منوی کشویی زیبا کنار انجمن ( جدید )

    1. [آموزش] قرار دادن منوی کشویی زیبا کنار انجمن ( جدید ) »

      [آموزش] قرار دادن منوی کشویی زیبا کنار انجمن ( جدید )

      نگارش: , by (کاندیدای مدیریت)
      2012/08/23 08:42 PM
      امتیاز: 

      درود

      امروز یک کد نوشتم که با استفاده از اون میتونین یک منوی کوچولو کنار انجمنتون داشته باشید

      عکس :





      دمو : http://mohseneo.persiangig.com/other/mn_menu.html

      خوب اگه خوشتون اومد بریم اضافه کنیم

      استایل ها & قالب ها > جست و جو در قالب ها

      به استایل additional.css اضافه کنید :

      کد:
      #mn_menu1
      {text-align:left;
      color:#fff;
      font-family:Tahoma, Geneva, sans-serif;
      line-height:-10px; }
      #mn_menu1 a
      {color:#fff;
      text-decoration:none;
      font-family:Tahoma, Geneva, sans-serif;
      font-size:11px;padding:5px;
      
      }
      #mn_menu1 a:hover 
      {color:#3a345f;  text-shadow:0px 1px 0px #ccc;
      display:inline;
      padding:5px;
      -webkit-box-shadow: 0 0 2px #CCC, inset 0 0 20px rgba(0,0,0,0.2), 0 
      5px 10px rgba(0,0,0,0.35);
          box-shadow: 0 0 2px #CCC, inset 0 0 20px rgba(0,0,0,0.2), 0 5px 10px 
      rgba(0,0,0,0.35);
      }a.mn_menu_nv1
      {color:fff;
      text-decoration:none;
      }a:link.mn_menu_nv1
      {
          text-decoration:overline;
      }
      a:hover.mn_menu_nv1{
          color:#fff;
          display:inline;
      }
      .menu2
      {
      background:#039;z-index:100;
      }
      .mn_menu_nv1
      {
          top:0px;z-index:100;
          left:-120px;
          margin-left:3px;
          position:relative;
              -webkit-transition: all .3s ease-out;
          -moz-transition: all .3s ease-out;
          -ms-transition: all .3s ease-out;
          -o-transition: all .3s ease-out;
          transition: all .3s ease-out;
      }
      .mn_menu_nv1:hover
      {
          top:0px;z-index:100;
          left:-5px;
          margin-left:3px;
          position:relative;
          
      
      
      }
      .mn_menu_td1
      {      background:#1faf52;
      background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
        background-image:linear-gradient(left, #28bb5c, #1faf52);
          padding:10px;
      z-index:100;
      }
      
      .mn_menu_td2
      {background:#1faf52;
      background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
        background-image:linear-gradient(left, #28bb5c, #1faf52);
          height:10px;
          padding:10px;
      z-index:100;
      }
      .mn_menu_td3
      {background:#1faf52;
      background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
        background-image:linear-gradient(left, #28bb5c, #1faf52);z-index:100;padding:10px;
      }
      .mn_menu_td4
      {background:#1faf52;
      background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
        background-image:linear-gradient(left, #28bb5c, #1faf52);    border:##9896B7 1px;
          moz-border-radius: 5px;
          webkit-border-radius: 5px;
          border-radius:0px 0px 10px 0px;
          padding:10px;z-index:100;
      }
      .td5
      {background:#1faf52;
      background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
        background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
        background-image:linear-gradient(left, #28bb5c, #1faf52);    border:#9896B7 1px;
          moz-border-radius: 5px;
          webkit-border-radius: 5px;
          border-radius:0px ;
          padding:10px;
      z-index:100;
      }
      به استایل header اضافه کنید :

      کد:
      <div style="position: fixed; z-index:100; left:0px; top:200px;height:200px; float:left; width:200px;"><div 
      
      id="mn_menu1" style="clear:both" >   
      <table  dir="rtl" width="150px" align="left" cellpadding="0" cellspacing="0" onMouseOver="showmenua()" 
      
      onMouseOut="hidemenua()" class="mn_menu_nv1" id="myMenu2"  name="myMenu2">
                              <tr>
                                  <td valign="top" class="td6" rowspan="5" align="center"><img 
      
      src="http://mohseneo.persiangig.com/other/mn_menu02.png"/>
                                  </td>
                                  <td align="right" width="200" class="td5" valign="top"><a href="#">قوانین سایت</a>
                                  </td>
                              </tr>
                              <tr align="right">
      
                                      <td class="mn_menu_td1"><a href="uploader.php">آپلود سنتر</a>
                                  </td>
                              </tr>
                              <tr align="right">
                                  <td class="mn_menu_td2"><a href="activity.php">فعالیت ها</a>
                                </td>
                             </tr>
                             <tr align="right">
      
                                <td class="mn_menu_td3"><a href="http://facebook.com/mohsen.neo">پیج فیس بوک</a>
                                </td>
                             </tr>
      
                             <tr align="right">
                                    <td class="mn_menu_td4"><a href="misc.php?do=cchatbox">چـت باکس کامل</a>
                                  </td>
                              </tr>
                  </table>
      
                </div></div>
      می تونین لینک هارو از کد بالا تغییر بدید

      تمام .

      موفق باشید
  1. Top | #2
    کاربر ویژه

    ورژن ویبولتین
    4.2.0
    نوشته ها
    122
    میزان امتیاز
    20

    پیش فرض

    سلام ممنون از مطلب عالیتون میشه اینو جوری طراحی کرد که داخل وردپرس هم ازش استفاده کرد ؟

  2. Top | #3
    کاربر سایت

    ورژن ویبولتین
    4.1.8
    نوشته ها
    310
    میزان امتیاز
    37

    پیش فرض

    چجوری میشه رنگ بک گراندشو که سبز هست تغییر داد ؟ .و چجوری میشه رنگ متنشو تغییر داد ؟ ممنون یاعلی

  3. Top | #4
    کاربر سایت

    ورژن ویبولتین
    4.1.10
    نوشته ها
    506
    میزان امتیاز
    57

    پیش فرض

    چطور میشه تصویرش را عوض کرد

    جای عکس را هم میشه عوض کرد

  4. Top | #5
    کاربر سایت

    ورژن ویبولتین
    4.1.8
    نوشته ها
    310
    میزان امتیاز
    37

    پیش فرض

    جای عکس که منظورت همون لینکا هست ؟
    خب مثلا جای آپلود سنتر یچی دیگه بنویس و با لینک مربوطه ....

    اینم عکس قسمت بیرونش

    یاعلی


  5. Top | #6
    کاربر ویژه

    ورژن ویبولتین
    4.2.0
    نوشته ها
    122
    میزان امتیاز
    20

    پیش فرض

    نقل قول نوشته اصلی توسط CIVILBAX نمایش پست ها
    چجوری میشه رنگ بک گراندشو که سبز هست تغییر داد ؟ .و چجوری میشه رنگ متنشو تغییر داد ؟ ممنون یاعلی
    کد رنگ های بکگراند:


    #28bb5c, #1faf52

    کاربر مقابل از Naghsh-Negar بابت این پست مفید تشکر کرده است:


  6. Top | #7
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    154
    میزان امتیاز
    23

    پیش فرض

    نقل قول نوشته اصلی توسط Naghsh-Negar نمایش پست ها
    سلام ممنون از مطلب عالیتون میشه اینو جوری طراحی کرد که داخل وردپرس هم ازش استفاده کرد ؟
    نقل قول نوشته اصلی توسط Naghsh-Negar نمایش پست ها
    سلام ممنون از مطلب عالیتون میشه اینو جوری طراحی کرد که داخل وردپرس هم ازش استفاده کرد ؟
    کد:
     
    
    #mn_menu1
    {text-align:left;
    color:#fff;
    font-family:Tahoma, Geneva, sans-serif;
    line-height:-10px; }
    #mn_menu1 a
    {color:#fff;
    text-decoration:none;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:11px;padding:5px;
    
    }
    #mn_menu1 a:hover 
    {color:#3a345f;  text-shadow:0px 1px 0px #ccc;
    display:inline;
    padding:5px;
    -webkit-box-shadow: 0 0 2px #CCC, inset 0 0 20px rgba(0,0,0,0.2), 0 
    5px 10px rgba(0,0,0,0.35);
        box-shadow: 0 0 2px #CCC, inset 0 0 20px rgba(0,0,0,0.2), 0 5px 10px 
    rgba(0,0,0,0.35);
    }a.mn_menu_nv1
    {color:fff;
    text-decoration:none;
    }a:link.mn_menu_nv1
    {
        text-decoration:overline;
    }
    a:hover.mn_menu_nv1{
        color:#fff;
        display:inline;
    }
    .menu2
    {
    background:#039;z-index:100;
    }
    .mn_menu_nv1
    {
        top:0px;z-index:100;
        left:-120px;
        margin-left:3px;
        position:relative;
            -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }
    .mn_menu_nv1:hover
    {
        top:0px;z-index:100;
        left:-5px;
        margin-left:3px;
        position:relative;
        
    
    
    }
    .mn_menu_td1
    {      background:#1faf52;
    background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
      background-image:linear-gradient(left, #28bb5c, #1faf52);
        padding:10px;
    z-index:100;
    }
    
    .mn_menu_td2
    {background:#1faf52;
    background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
      background-image:linear-gradient(left, #28bb5c, #1faf52);
        height:10px;
        padding:10px;
    z-index:100;
    }
    .mn_menu_td3
    {background:#1faf52;
    background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
      background-image:linear-gradient(left, #28bb5c, #1faf52);z-index:100;padding:10px;
    }
    .mn_menu_td4
    {background:#1faf52;
    background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
      background-image:linear-gradient(left, #28bb5c, #1faf52);    border:##9896B7 1px;
        moz-border-radius: 5px;
        webkit-border-radius: 5px;
        border-radius:0px 0px 10px 0px;
        padding:10px;z-index:100;
    }
    .td5
    {background:#1faf52;
    background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
      background-image:linear-gradient(left, #28bb5c, #1faf52);    border:#9896B7 1px;
        moz-border-radius: 5px;
        webkit-border-radius: 5px;
        border-radius:0px ;
        padding:10px;
    z-index:100;
    }

    عزيزم شما كد هاي بالا رو در فايل style.css كه در قالب مورد استفاده ي خودتون در ورد پرس موجود هست اضافه كنيد .

    و كد هاي زير رو در قالب footet.php اضافه كنيد تا در سايت به نمايش در بياد ..
    دليل اينكه بجاي header گفتم داخل footer قرار بديد اينه كه جلوي سرعت لود شدن سايت رو نگيره .

    کد:
    
    <div style="position: fixed; z-index:100; left:0px; top:200px;height:200px; float:left; width:200px;"><div   id="mn_menu1" style="clear:both" >    <table  dir="rtl" width="150px" align="left" cellpadding="0" cellspacing="0" onMouseOver="showmenua()"   onMouseOut="hidemenua()" class="mn_menu_nv1" id="myMenu2"  name="myMenu2">                         <tr>                             <td valign="top" class="td6" rowspan="5" align="center"><img   src="http://mohseneo.persiangig.com/other/mn_menu02.png"/>                             </td>                             <td align="right" width="200" class="td5" valign="top"><a href="#">قوانین سایت</a>                             </td>                         </tr>                         <tr align="right">                                  <td class="mn_menu_td1"><a href="uploader.php">آپلود سنتر</a>                             </td>                         </tr>                         <tr align="right">                             <td class="mn_menu_td2"><a href="activity.php">فعالیت ها</a>                           </td>                        </tr>                        <tr align="right">                            <td class="mn_menu_td3"><a href="http://facebook.com/mohsen.neo">پیج فیس بوک</a>                           </td>                        </tr>                         <tr align="right">                               <td class="mn_menu_td4"><a href="misc.php?do=cchatbox">چـت باکس کامل</a>                             </td>                         </tr>             </table>            </div></div>

    2 تشکر توسط:


  7. Top | #8
    کاربر ویژه

    ورژن ویبولتین
    4.2.0
    نوشته ها
    877
    میزان امتیاز
    98

    پیش فرض

    رنگهای باکس رو چجوری باید تغییر داد؟

  8. Top | #9
    مدیریت کل سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,685
    میزان امتیاز
    3117

    پیش فرض

    کد رنگ سبز رو میتونید تغییر بدید :

    #1FAF52

    یک عکس هم داره باید با فوتوشاپ ctrl + u کنید :

    3 تشکر توسط:


  9. Top | #10
    کاربر ویژه

    ورژن ویبولتین
    4.2.0
    نوشته ها
    122
    میزان امتیاز
    20

    پیش فرض

    نقل قول نوشته اصلی توسط Pars2fa نمایش پست ها
    کد:
     
    
    #mn_menu1
    {text-align:left;
    color:#fff;
    font-family:Tahoma, Geneva, sans-serif;
    line-height:-10px; }
    #mn_menu1 a
    {color:#fff;
    text-decoration:none;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:11px;padding:5px;
    
    }
    #mn_menu1 a:hover 
    {color:#3a345f;  text-shadow:0px 1px 0px #ccc;
    display:inline;
    padding:5px;
    -webkit-box-shadow: 0 0 2px #CCC, inset 0 0 20px rgba(0,0,0,0.2), 0 
    5px 10px rgba(0,0,0,0.35);
        box-shadow: 0 0 2px #CCC, inset 0 0 20px rgba(0,0,0,0.2), 0 5px 10px 
    rgba(0,0,0,0.35);
    }a.mn_menu_nv1
    {color:fff;
    text-decoration:none;
    }a:link.mn_menu_nv1
    {
        text-decoration:overline;
    }
    a:hover.mn_menu_nv1{
        color:#fff;
        display:inline;
    }
    .menu2
    {
    background:#039;z-index:100;
    }
    .mn_menu_nv1
    {
        top:0px;z-index:100;
        left:-120px;
        margin-left:3px;
        position:relative;
            -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }
    .mn_menu_nv1:hover
    {
        top:0px;z-index:100;
        left:-5px;
        margin-left:3px;
        position:relative;
        
    
    
    }
    .mn_menu_td1
    {      background:#1faf52;
    background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
      background-image:linear-gradient(left, #28bb5c, #1faf52);
        padding:10px;
    z-index:100;
    }
    
    .mn_menu_td2
    {background:#1faf52;
    background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
      background-image:linear-gradient(left, #28bb5c, #1faf52);
        height:10px;
        padding:10px;
    z-index:100;
    }
    .mn_menu_td3
    {background:#1faf52;
    background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
      background-image:linear-gradient(left, #28bb5c, #1faf52);z-index:100;padding:10px;
    }
    .mn_menu_td4
    {background:#1faf52;
    background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
      background-image:linear-gradient(left, #28bb5c, #1faf52);    border:##9896B7 1px;
        moz-border-radius: 5px;
        webkit-border-radius: 5px;
        border-radius:0px 0px 10px 0px;
        padding:10px;z-index:100;
    }
    .td5
    {background:#1faf52;
    background-image:-webkit-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-moz-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-ms-linear-gradient(left, #28bb5c, #1faf52);
      background-image:-o-linear-gradient(left, #28bb5c, #1faf52);
      background-image:linear-gradient(left, #28bb5c, #1faf52);    border:#9896B7 1px;
        moz-border-radius: 5px;
        webkit-border-radius: 5px;
        border-radius:0px ;
        padding:10px;
    z-index:100;
    }

    عزيزم شما كد هاي بالا رو در فايل style.css كه در قالب مورد استفاده ي خودتون در ورد پرس موجود هست اضافه كنيد .

    و كد هاي زير رو در قالب footet.php اضافه كنيد تا در سايت به نمايش در بياد ..
    دليل اينكه بجاي header گفتم داخل footer قرار بديد اينه كه جلوي سرعت لود شدن سايت رو نگيره .

    کد:
    
    <div style="position: fixed; z-index:100; left:0px; top:200px;height:200px; float:left; width:200px;"><div   id="mn_menu1" style="clear:both" >    <table  dir="rtl" width="150px" align="left" cellpadding="0" cellspacing="0" onMouseOver="showmenua()"   onMouseOut="hidemenua()" class="mn_menu_nv1" id="myMenu2"  name="myMenu2">                         <tr>                             <td valign="top" class="td6" rowspan="5" align="center"><img   src="http://mohseneo.persiangig.com/other/mn_menu02.png"/>                             </td>                             <td align="right" width="200" class="td5" valign="top"><a href="#">قوانین سایت</a>                             </td>                         </tr>                         <tr align="right">                                  <td class="mn_menu_td1"><a href="uploader.php">آپلود سنتر</a>                             </td>                         </tr>                         <tr align="right">                             <td class="mn_menu_td2"><a href="activity.php">فعالیت ها</a>                           </td>                        </tr>                        <tr align="right">                            <td class="mn_menu_td3"><a rel="nofollow" href="http://facebook.com/mohsen.neo">پیج فیس بوک</a>                           </td>                        </tr>                         <tr align="right">                               <td class="mn_menu_td4"><a rel="nofollow" href="misc.php?do=cchatbox">چـت باکس کامل</a>                             </td>                         </tr>             </table>            </div></div>

    سلام انجام دادم قبل اینکه سوال کنم اما متاسفانه چون از td / tr / table استفاده شده داخل قالب وردپرسی بنده جدا جدا نمایش داده میشه اما اگر داخل یک صفحه html معمولی بزنیم کاملا سالم هست مشکل از طراحی قالب من هست

صفحه 1 از 4 1234 آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. پاسخ: 35
    آخرين نوشته: 2014/03/30, 11:21 AM
  2. پاسخ: 9
    آخرين نوشته: 2013/06/29, 08:12 PM
  3. پاسخ: 15
    آخرين نوشته: 2012/07/22, 11:15 AM
  4. پاسخ: 0
    آخرين نوشته: 2011/11/15, 02:36 PM
  5. اموزش کامل اضافه کردن زیرانجمنها در وی بی
    توسط Hamed.Ramzi در انجمن آموزش های وی بولتین
    پاسخ: 4
    آخرين نوشته: 2011/10/17, 06:33 PM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •