خبرنامه
با عضویت در خبرنامه میتوانید آخرین اسکریپــت ها و قالب ها را در ایمیل خود دریافت کنید

برای عضویت در خبرنامه پیامکی، اطلاعات خود را وارد کنید

اطلاعات مطلب

نویسنده : Mehrdad Mohammadi
تاریخ ارسال : 7 ژوئن 2015 در 11:41 ب.ظ
تعداد دیدگاه : بدون ديدگاه
دسته بندی
آمار بازدید
  • 682
  • 1,483
  • 847,318
  • 725
  • 108
  • 205
  • 83
  • 0
  • آوریل 3, 2017
دکووب را دنبال کنید

منو آیکون عمودی کنار سایت

منو آیکون عمودی کنار سایتReviewed by مهرداد محمدی on Jun 7Rating:
[تعداد: 0    میانگین: 0/5]

در این مطلب قرار هستش که کدهای قرار گرفتن منو آیکون عمودی ثابت کنار سایت رو توضیح بدیم تا بتونید با استفاده از اون قالب خودتونو قشنگ تر کنید.

کدهای html منو آیکون ثابت کنار سایت

کدهای html زیر رو باید بعد از تگ <body> داخل قالبتون قرار بدید.

<ul class="cbp-vimenu">
 <li><a href="#" class="icon-logo">Logo</a></li>
 <li><a href="#" class="icon-archive">Archive</a></li>
 <li><a href="#" class="icon-search">Search</a></li>
 <li class="cbp-vicurrent"><a href="#" class="icon-pencil">Pencil</a></li>
 <li><a href="#" class="icon-location">Location</a></li>
 <li><a href="#" class="icon-images">Images</a></li>
 <li><a href="#" class="icon-download">Download</a></li>
</ul>

 

دقت کنید که آدرس لینک ها رو بجای # باید وارد کنید.در ادامه باید استایل این منو رو اضافه کنید .

استایل منوی عمودی ثابت کنار قالب

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

@font-face {
 font-family: 'ecoico';
 src:url('fonts/ecoico.eot');
 src:url('fonts/ecoico.eot?#iefix') format('embedded-opentype'),
 url('fonts/ecoico.woff') format('woff'),
 url('fonts/ecoico.ttf') format('truetype'),
 url('fonts/ecoico.svg#ecoico') format('svg');
 font-weight: normal;
 font-style: normal;
}
 
.cbp-vimenu {
 position: fixed;
 overflow: hidden;
 top: 0;
 left: 0;
 height: 100%;
 list-style-type: none;
 margin: 0;
 padding: 0;
 background: #f7f7f7;
}
 
.cbp-vimenu li a {
 display: block;
 text-indent: -500em;
 height: 5em;
 width: 5em;
 line-height: 5em;
 text-align: center;
 color: #999;
 position: relative;
 border-bottom: 1px solid rgba(0,0,0,0.05);
 -webkit-transition: background 0.1s ease-in-out;
 -moz-transition: background 0.1s ease-in-out;
 transition: background 0.1s ease-in-out;
}
 
.cbp-vimenu li a:hover,
.cbp-vimenu li:first-child a{
 background: #47a3da;
 color: #fff;
}
 
/* class for current item */
.cbp-vimenu li.cbp-vicurrent a {
 background: #fff;
 color: #47a3da;
}
 
.cbp-vimenu li a:before {
 font-family: 'ecoico';
 speak: none;
 font-style: normal;
 font-weight: normal;
 text-indent: 0em;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 font-size: 1.4em;
 -webkit-font-smoothing: antialiased;
}
 
.cbp-vimenu li a.icon-logo:before {
 content: "C";
 font-weight: 700;
 font-size: 300%;
 font-family: 'Lato', Calibri, Arial, sans-serif;
}
 
.icon-search:before {
 content: "e004";
}
 
.icon-archive:before {
 content: "e005";
}
 
.icon-download:before {
 content: "e006";
}
 
.icon-location:before {
 content: "e007";
}
 
.icon-images:before {
 content: "e009";
}
 
.icon-pencil:before {
 content: "e008";
}
 
/* Example for media query (depends on total height of menu) */
@media screen and (max-height: 34.9375em) {
 
.cbp-vimenu {
 font-size: 70%;
 }
 
}

 

کدهای بالا رو به ابتدای فایل style.css بعد از {}body یا هرکجای دیگه اضافه کنید .

نکته : در این کدها برای نمایش آیکون ها از فونت ecoico استفاده شده و عکسی در کار نیست ، برای همین نیاز هستش تا یک پوشه بنام fonts کنار style.css خودتون درست کنید ( یا اگر پوشه از قبل بودش ، فقط فونت ها رو داخل پوشه اضافه کنید ) . فونت ها در فایل پیوست در انتهای مطلب برای دانلود آماده می باشد.

آموزش اضافه کردن منو آیکون عمودی به قالب وردپرس

در واقع همون کدها و آموزش بالا هستش ، اما برای راحتی کار خدمتتون عرض می کنم که کد های html رو باید بعد از <body> قرار بدید ، برای این کار فایل header.php قالب رو ویرایش کنید و کدها رو بعد از تگ <body> قرار بدید .

البته فرقی هم نمی کنه می تونید کدها رو قبل از تموم شدن <body/> وارد کنید ، برای این کار باید فایل footer.php قالب رو ادیت کنید .

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