منو آیکون عمودی کنار سایت
آنچه می خوانید
در این مطلب قرار هستش که کدهای قرار گرفتن منو آیکون عمودی ثابت کنار سایت رو توضیح بدیم تا بتونید با استفاده از اون قالب خودتونو قشنگ تر کنید.
کدهای 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 قالب رو ادیت کنید .
دمو و دانلود فایل ضمیمه منو آیکون عمودی
منبع (فــــیلتر هست باید با قند شکن بازش کنین ! )
سلام من هر کاری میکنم نمیشه ممنون میشم تو ایمیل کمکم کنید
فایلهای css رو توی قالبتون قرار بدین و بعد توی فایل header.php قالبتون بعد از تگ کدهای html رو قرار بدین و ذخیره کنید درست میشه!
با سلام و خسته نباشید
من فونت ها در پوشه فونت قالب کپی کردم
کدها هم در فایل هدر سایت ریختم ولی بالای سایتم یه صفحه سیاه رنگ اومد
با تشکر
سلام
فونت آیکون های این منو عمودی منظورتون هستش ؟
کدها باید داخل فایل استایل قرار بگیردند به صورت درست .
مطلب با عنوان قرار دادن فونت داخل قالب نوشتیم که مفید هستش برای شما
سلام من یک منو نیاز دارم کع وقتی موس رو به روی منو میبریم اطلاعات تماس – شماره همراه نمایش داده بشه . لطفا” راهنمایی کنید
لینک دمو خرابه!
سلام
اصلاح شد
ممنون
با سلام
خیلی خوب بود ممنون.
با سلام من میخوام فقط اون منو جاش حفظ بشه و ثابت بمونه یعنی وقتی که از بالا به پایین اومدم وقتی رسیدم به منو ی بالا ، دیگه ثابت بمونه
سلام
الان دقیقا همینطور هستش دیگه ، ثابت میمونه
سلام . بخوام از چپ چین . راست چین بشه این کد باید کجاشو دستکاری کنم . هرچی گشتم right نداشت که left کنمش
مرسی عالی بود
قند شکن رو خوب اومدیا :))
مرسی ولی کجا گفتین
حداقل لینکشو بذارید
خیلی دنبالشم
میشه در مورد نحوه گذاشتن فونت ها توضیح بدید؟
سلام
جستجو کنید توضیح دادیم قبلا
ممنون
سلام توضیحات عالی بود
فقط اونجایی که فرمودین فونت ها رو اضافه کنیم و خودمون درست کنیم .
میشه با تصاویر توضیح بدین؟
خیلی ممنون میشم
سلام. مرسی داداش عالی بود.
اما گرافیکش پاین بود و این که من به همچین چیزی احتیاج دارم اما میخوام گرافیک و قابلیتاش بیشتر باشه…. .
ولی باز هم ممنون.
ممنون آرش جالب بود
بسیار عالی ممنون
چطور میتونم از این کد توی رزبلاگ استفاده کنم.اصلا میشه؟؟؟
ممنونم عالی بود.
ممنونم عالی بود
اقای حیدری ابزار مفیدی هست ممنون
با سلام
یه سوال:
من بجای این فونتی که شما گذاشتید یه فونت دیگه ای رو انتخاب کردم به اسمه icomoon و با توجه به اون fontface اشم نوشتم و استایل دادم اما وقتی برای آیکون های مختلف کدشون رو مینویسم نشون نمیده آیکون هارو….
در این مورد اگه امکانش هست راهنمایی بفرمایید.
با تشکر
کمی دقیق تر توضیح بدهید!
سلام
بفرمایید کجا رو متوجه نشدید تا توضیح بدیم
با تشکر
سلام . مطلب جالبی بود استفاده کردم ازش و ممنون ازتون . من خیلی وقته پی گیر سایت شما هستم تقریبا هر روز که نه ولی یکروز در میون میام سر میزنم چند وقتیه سایت بدون قالب شده چرا ؟؟؟ منتظر قالب جدید باید باشیم آیاااا ؟؟؟
سلام
شاید روی کش مرورگرتون هست ، قالب رو تغییر دادیم ، دکمه F5 رو بزنید تا سایت ریلود بشه و قالب براتون لود بشه
با تشکر
مطلب مفیدی بود و به کارم اومد دستتون درد نکنه…
لینک منبع هم بررسی کردم سایت پرمحتوایی بود…
یه پیشنهاد داشتم: اگه براتون مقدور هست تو یه پست یک سری از سایت های آموزشی رو که میشناسید و میدونید برای کاربرا ممکنه مفید باشه رو معرفی کنید خیلی خوب میشه…
البته منظورم جدای سایت های آموزشی معروف هست…
بازم بابت پست تشکر
سلام
چشم حتما ، ما همیشه منبع مطالب رو قید می کنیم برای همین کار ، حتی اگر فقط قسمتی از مطلب رو الهام گرفته باشیم باز لینک منبع رو قید می کنیم .
با تشکر
سلام آقای حیدری
ببخشید سوالم ربطی به پست تون نداره ولی نیاز ضروری داشتم که سوالمو بپرسم
اگه امکانش هست میشه راهنمایی کنین چطور می تونم وایرلس لب تاپم را به گوشی اندروید (سامسونگ) وصل کنم؟
با ادهاک connection ساختم ولی گوشیم اونو پیدا نمی کنه
پیشاپیش ممنونم
سلام
راستش اطلاعی ندارم ، باید گوگل سرچ کنید سایت های دیگه که بیشتر در زمینه ویندوز می نویسند بیشتر کمکتون می کنه
با تشکر
خداییش حرف نداشت،دست گلت درد نکنه
با تشکر از مطالب خوبتون