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

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

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

دمو و دانلود فایل ضمیمه منو آیکون عمودی

لینک دانلود

پیش نمایش منو آیکون عمودی

منبع (فــــیلتر هست باید با قند شکن بازش کنین ! )

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 1 رای
Loading...