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

دسته بندی ها : اخبار سایت 18 اکتبر 2013 خانه وردپرس 1887 بازدید

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

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

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

کدهای 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/

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

  • چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
  • چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
  • چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
  • چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
  • چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.

نظرات کاربران

    دیدگاهتان را بنویسید

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

    Time limit is exhausted. Please reload CAPTCHA.

    این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    لینک کوتاه :
    0