آموزش ساخت منوی مترو ثابت کنار سایت

با سلام خدمت تمام وردپرسی ها

امروز یک آموزش مفید و همچنین ساده ایی رو براتون آماده کردم درباره طراحی یک منوی مترو ثابت کنار سایت

البته بنده برای زیبایی بیشتر با فونت بی یکان طراحی کردم ..

کدهای CSS :

<style type="text/css">
@font-face {
font-family: 'BYekan';
src: url('http://iranian-cs.com/wp-content/themes/iranian-cs/fonts//BYekan.eot');
src: local('b BYekan'), url('/fonts//BYekan.woff') format('woff'), url('/fonts//BYekan.ttf') format('truetype'), url('BYekan.svg') format('svg');
font-weight: normal;
font-style: normal;
}
a,a:hover{text-decoration:none;}

.tab {
font: 12px BYekan, Tahoma, Geneva, sans-serif;
width:100px;
height:20px;
background:#6498dd;
text-align:center;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
float: left;
position: fixed;
left: -95px;
top: 205px;
-moz-transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
-ms-transition:all 0.3s ease-in;
z-index: 1000;
}

.tab:hover {
left: 0px;
}

.tab1 {
font: 12px BYekan, Tahoma, Geneva, sans-serif;
width:100px;
height:20px;
background:#CA226B;
text-align:center;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
float: left;
position: fixed;
left: -95px;
top: 235px;
-moz-transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
-ms-transition:all 0.3s ease-in;
z-index: 1000;
}

.tab1:hover {
left: 0px;
}

.tab2 {
font: 12px BYekan, Tahoma, Geneva, sans-serif;
width:100px;
height:20px;
background:#48CCCD;
text-align:center;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
float: left;
position: fixed;
left: -95px;
top: 265px;
-moz-transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
-ms-transition:all 0.3s ease-in;
z-index: 1000;
}

.tab2:hover {
left: 0px;
}
.tab4 {
font: 12px BYekan, Tahoma, Geneva, sans-serif;
width:100px;
height:20px;
background:#FF4500;
text-align:center;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
float: left;
position: fixed;
left: -95px;
top: 295px;
-moz-transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
-ms-transition:all 0.3s ease-in;
z-index: 1000;
}

.tab4:hover {
left: 0px;
}
.tab5 {
font: 12px BYekan, Tahoma, Geneva, sans-serif;
width:100px;
height:20px;
background:#9ACD32;
text-align:center;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
float: left;
position: fixed;
left: -95px;
top: 325px;
-moz-transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
-ms-transition:all 0.3s ease-in;
z-index: 1000;
}

.tab5:hover {
left: 0px;
}

.tab6 {
font: 12px BYekan, Tahoma, Geneva, sans-serif;
width:100px;
height:20px;
background:#CA226B;
text-align:center;
padding:5px;
color:#f7f7f7;
margin-top:10px;
margin-bottom:10px;
float: left;
position: fixed;
left: -95px;
top: 355px;
-moz-transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
-ms-transition:all 0.3s ease-in;
z-index: 1000;
}

.tab6:hover {
left: 0px;
}

</style>

کدهای HTML :

<a href="#" title=""><div class="tab">خانه</div></a>
<a href="#" title=""><div class="tab1">ارسال کانفیگ</div></a>
<a href="#" title=""><div class="tab2">وردپرس فارسی</div></a>
<a href="#" title=""><div class="tab4">اسکین و ابزار</div></a>
<a href="#" title=""><div class="tab5">سفارش طراحی</div></a>
<a href="#" title=""><div class="tab6">پشتیبانی آنلاین</div></a>

آموزش جدا سازی و نصب بر روی قالب های وردپرس :

از اونجایی که وردپرس قابلیت جداسازی داره میتونیم با استفاده از این قابلیت حجم صفحه خودمون رو بیاریم پایین و کد های منو مترو رو در یک سند دیگر قرار دهیم و در قالب وردپرسی خودمون فراخوانی کنیم

ابتدا کدها رو در یک فایل php و با نام menu-top ذخیره کنید !

و یا اینکه از لینک روبه رو دانلود کنید :  menu-top.php   3.42K   12 تعداد دریافت ها

و پس از اون فایل php رو در روت هاست خود و در فایل قالب وردپرستون آپلود کنید

حالا میتونید با استفاده از این کد منوی مترو رو در index قالب و یا هر جای دیگه که خواستید فراخوانی کنید !

<?php include (TEMPLATEPATH . "/menu-top.php"); ?>

سعی کردم توضیحات رو تا جای ممکن ساده مطرح کنم امیدوارم از این منوی مترو لذت برده باشید …

دموی آنلاین : کلیک کنید

منبع  : http://picor.ir/