نحوه درست کردن یک سایدبار حرفه ای
هدیه اول وان اسکریپت به مناسبت ماه مبارک رمضان
به عنوان اولین هدیه برای ماه مبارک رمضان ، نحوه درست کردن یک سایدبار حرفه ای که توسط وان اسکریپت نیز استفاه شده است ، + منوی حرفه ای را برایتان آماده کرده ام ، امیدوارم که کاربردی باشد برایتان .
ابتدا یک فایل بسازید با نام 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 را توسط یک مرورگر وب باز کنید ، میبینید که سایدبار و منوی شما آماده است .
موفق و سربلند باشید .
salam
من هرچی اتحان کردم نتونستم اگه امکانش هست خودتون یدونه بسازید و واس دانلود بزارین
سلام دوست عزیز
با توجه به درخواست شما نمونه اش برای دانلود قرار داده شد
لینک دانلود : http://www.onescript.ir/wp-content/uploads/2012/07/menu.zip
با سلام من اگر بخوام از این کد به طور مستقیم در قالب وب سایتم استفاده کنم باید چکار کنم؟؟؟میشه راهنمایی کنید چگونه در سایدبار وب سایتم قرار بدم؟؟؟؟؟
دوست عزیز خوب آموزش درج کدها گذاشته شده !
ممنون . عالی بود