نحوه درست کردن یک سایدبار حرفه ای
هدیه اول وان اسکریپت به مناسبت ماه مبارک رمضان
به عنوان اولین هدیه برای ماه مبارک رمضان ، نحوه درست کردن یک سایدبار حرفه ای که توسط وان اسکریپت نیز استفاه شده است ، + منوی حرفه ای را برایتان آماده کرده ام ، امیدوارم که کاربردی باشد برایتان .
ابتدا یک فایل بسازید با نام 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 را توسط یک مرورگر وب باز کنید ، میبینید که سایدبار و منوی شما آماده است .
موفق و سربلند باشید .
5 دیدگاه در “نحوه درست کردن یک سایدبار حرفه ای”
دیدگاه خود را به اشتراک بگذارید
دیدگاهتان را بنویسید
مطالب مرتبط
فرم ورود به سایت زیبا و فارسی
توسط صادق محمدزاده در تاریخ نوامبر 5, 2016با سلام خدمت شما کاربران عزیز وان اسکریپت، امروز برای شما عزیزان فرمی حرفه ای جهت ورود کاریران به سایت را آماده دانلود کرده ایم. این فرم در سایت های خارجی برای فروش گذاشته شده است که توسط وان اسکریپت فارسی سازی و به صورت رایگان بری دانلود قرار گرفته…
آموزش CSS Reset و آشنایی با کاربرد های آن در طراحی سایت
توسط نگار مظفری در تاریخ اکتبر 30, 2016اگر به هر نحوی با طراحی سایت سر و کار داشته باشید، حتما تا امروز بار ها و بارها با فایل reset.css مواجه شده اید. اگر برایتان این سوال مطرح شده که فایل reset.css چیست و چه کاربردی دارد، این نوشته ی نسبتا کوتاه و کاملا ساده، مخصوص شماست. امروز…
آموزش ساخت منوی کشویی در سایت + افزونه
توسط آرش حسینی در تاریخ اکتبر 28, 2016درست کردن منو زیر منو با jquery و امروزه هم با CSS3 کار چندان مشکلی نیست ولی خب برای دوستانی که یه مقدار آشنایی کمتری دارند سخت است. امروز یه بسته خیلی خوب داریم که دیگه از این به بعد میتوانید به راحتی آب خوردن منو های سایت خودتون رو…
روش صحیح قرار دادن فایل فلش در سایت
توسط نگار مظفری در تاریخ اکتبر 27, 2016هرچند در حال حاضر استفاده از فایل های فلش به نسبت سالهای گذشته با کاهش روبرو شده ولی این نوع فایل ها، هنوز هم در اینترنت کاربرد دارند. چه به یک پلیر نیاز داشته باشید و چه مایل باشید یک انیمیشن در سایت خود پخش کنید و یا حتی اگر…
آموزش ایجاد افکت های مختلف چرخش عکس
توسط نگار مظفری در تاریخ اکتبر 27, 2016آموزش ایجاد افکت های مختلف چرخش عکس با رفتن ماوس به روی آن! چندی قبل (یکمی بیشتر از چندی قبل!) با هم روش کمرنگ کردن تصویر در هنگام قرار گیری ماوس به روی آن را مرور کردیم. امروز تصمیم داریم با هم روش چرخش تصویر با استفاده از CSS را…
افزونه اسلایدر حرفه ای وردپرس Slider Revolution به همراه افزودنی های کامل
توسط صادق محمدزاده در تاریخ اکتبر 25, 2016اسلایدرهای حرفه ای بسازید! اسلایدر ها در برخی از سایت ها برای مثال گالری ها و... یکی از بخش های اساسی سایت می باشد که باید به صورت حرفه ای پیاده سازی شود. امروز در وان اسکریپت افزونه ای قدرتمند به نام Slider Revolution را برای شما عزیزان آماده دانلود…
salam
من هرچی اتحان کردم نتونستم اگه امکانش هست خودتون یدونه بسازید و واس دانلود بزارین
سلام دوست عزیز
با توجه به درخواست شما نمونه اش برای دانلود قرار داده شد
لینک دانلود : http://www.onescript.ir/wp-content/uploads/2012/07/menu.zip
با سلام من اگر بخوام از این کد به طور مستقیم در قالب وب سایتم استفاده کنم باید چکار کنم؟؟؟میشه راهنمایی کنید چگونه در سایدبار وب سایتم قرار بدم؟؟؟؟؟
دوست عزیز خوب آموزش درج کدها گذاشته شده !
ممنون . عالی بود