مرجع دانلود اسکریپت

وان اسکریپت | اولین مرجع دانلود رایگان اسکریپت در ایران

خرید هاست
تبلیغات
تبلیغات
تبلیغات

درخواست شما

اگـر به دنبال قالب و اسکریپت یا هر مطلب دیگری هستید و آن را پیدا نکرده اید ، می توانید درخواست خود را به تیم وان اسـکریپت ارسال کنید تا در کوتاه ترین زمان مطلب مورد نظر شما در سایت قـرار گیرد ! وان اسـکریپت همچنان به دنبال ارائه خدمــاتی با کیفیت بالا به کاربران خود می باشد.

نحوه درست کردن یک سایدبار حرفه ای

نحوه درست کردن یک سایدبار حرفه ایReviewed by صادق محمدزاده on Jul 21Rating:

 

 

 

 

 

 

 

 

هدیه اول وان اسکریپت به مناسبت ماه مبارک رمضان

به عنوان اولین هدیه برای ماه مبارک رمضان ، نحوه درست کردن یک سایدبار حرفه ای که توسط وان اسکریپت نیز استفاه شده است ، + منوی حرفه ای را برایتان آماده کرده ام ، امیدوارم که کاربردی باشد برایتان .

 

ابتدا یک فایل بسازید با نام style.css و دریک پوشه به نام menu ذخیره کنید .

سپس یک فایل دیگر بسازید با نام index.htm و این فایل را نیز در همان پوشه ذخیره کنید .

در فایل style.css کدهای css زیر را وارد کنید :

 


        /*menu css – onescript.ir */

        .lifted {
            -moz-border-radius:0px;
                 border-radius:2px;
        }
        
        .lifted:before,
        .lifted:after {
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:300px;
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
               -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
                    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform:rotate(-3deg);    
               -moz-transform:rotate(-3deg);   
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }
        
        .lifted:after {
            right:10px;
            left:auto;
            -webkit-transform:rotate(3deg);   
               -moz-transform:rotate(3deg);  
                 -o-transform:rotate(3deg);
                    transform:rotate(3deg);
        }
        
        /* Curled corners */
               .drop-shadow {
            position:relative;
            float:right;
            width:199px;    
            background:#fff;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }

        .drop-shadow:before,
        .drop-shadow:after {
            content:"";
            position:absolute;
            z-index:-2;
        }
        
        .drop-shadow p {
            font-size:16px;
            font-weight:bold;
        }
.onescript-style {
    font-family:Tahoma, Geneva, sans-serif;
    border: 1px solid #bcbbbb;
    width:206px;
    background-color: #ffffff;
    -moz-border-radius: 5px;
    color: #006d9a;
}
.mainmenutop{background-image:url(http://www.onescript.ir/wp-content/uploads/2012/07/main-menu3.png);width:208px;height:39px;margin:0 0 0 0;}
.submenu,.menu-categories
{
    overflow:hidden;
    padding:0px;
    width:100%;
    
}
.submenu li,.menu-categories li
{
   width:100%;
}
.submenu li a,.menu-categories li a
{
    padding-right:10%;
    width:90%;
    
}
.submenu a,.menu-categories a
{
    border-bottom:1px solid #eee;
    color:#484d55;
    display:block;
    font:bold 17px/40px 'B Roya',BRoya,Arial;
    
}
.submenu a:hover,.menu-categories a:hover
{
    background-color:#C23C2F;
    color:#fff;
}
.submenu,.menu-categories
{
    overflow:hidden;
    padding:0px;
    width:100%;
}
.submenu li,.menu-categories li
{
   width:100%;
}
.submenu li a,.menu-categories li a
{

    width:90%;
    
}
.submenu a,.menu-categories a
{
    border-bottom:1px solid #eee;
    color:#484d55;
    display:block;
    font:bold 17px/40px 'B Roya',BRoya,Arial;
}
.submenu a:hover,.menu-categories a:hover
{
    background-color:#C23C2F;
    color:#fff;
}

 


 

بعد از کپی کردن این کدها و قرار دادن در فایل مربوطه ، آن را ذخیره کنید و فایل index.htm را با یک ادیتور ساده ، مانند نوت پد بار کنید ، و کد های زیر را در آن قرار دهید .  و سپس ان ذخیره کنید .

 


<html>
<head>
<title>سایدبار حرفه ای – وان اسکریپت</title>

<link src="style.css" rel="stylesheet" />
</head>
<body>
<div class="mainmenutop"></div>
<div class="onescript-style drop-shadow lifted">
 <ul class="submenu">
 <ul class="menu-categories">
 <li><a href="http://www.onescript.ir/">صفحه اصلی</a></li>
 <li><a href="http://www.onescript.ir/forum">تالار گفتگو</a></li>
 <li><a href="http://news.onescript.ir/">اخبار</a></li>
<li><a href="http://design.onescript.ir/">گرافیک و طراحی</a></li>
<li><a href="http://www.onescript.ir/menu">ابزار وبمستر</a></li>
 <li><a href="http://www.onescript.ir/?page_id=1977">رفع مسئولیت</a></li>
<li><a href="http://www.onescript.ir/shop">فروشگاه</a></li>
<li><a href="http://www.onescript.ir/countus/">تماس با ما</a></li>
 <li><a href="http://www.onescript.ir/%d8%aa%d8%a8%d9%84%db%8c%d8%ba%d8%a7%d8%aa-%d8%af%d8%b1-%d9%88%d8%a7%d9%86-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa/">پذیرش آگهی</a></li>
</ul>
  </ul>
</div>
</body>
</html>

 


 

خوب حال اگر فایل index.htm را توسط یک مرورگر وب باز کنید ، میبینید که سایدبار و منوی شما آماده است .

موفق و سربلند باشید .

 

 

 

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
نوشته شده در ۱۳۹۱/۰۴/۳۱ / 3,652 نمایش / کد مطلب : 2162

5 دیدگاه در “نحوه درست کردن یک سایدبار حرفه ای”

  1. salam
     
    من هرچی اتحان کردم نتونستم اگه امکانش هست خودتون یدونه بسازید و واس دانلود بزارین

  2. با سلام من اگر بخوام از این کد به طور مستقیم در قالب وب سایتم استفاده کنم باید چکار کنم؟؟؟میشه راهنمایی کنید چگونه در سایدبار وب سایتم قرار بدم؟؟؟؟؟

دیدگاه خود را به اشتراک بگذارید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

خرید vpn