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

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

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

کدهای 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 قالب رو ادیت کنید .

پیام بگذارید

طراحی و پیاده سازی توسط دکو وب