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

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

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

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

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

لینک دانلود

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

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

امتیاز شما برای این مقاله
35 نظرات
  1. mostafa می گوید

    سلام من هر کاری میکنم نمیشه ممنون میشم تو ایمیل کمکم کنید

    1. عباس صادقی می گوید

      فایلهای css رو توی قالبتون قرار بدین و بعد توی فایل header.php قالبتون بعد از تگ کدهای html رو قرار بدین و ذخیره کنید درست میشه!

  2. حامد می گوید

    با سلام و خسته نباشید
    من فونت ها در پوشه فونت قالب کپی کردم
    کدها هم در فایل هدر سایت ریختم ولی بالای سایتم یه صفحه سیاه رنگ اومد
    با تشکر

    1. دکتر آرش حیدری می گوید

      سلام
      فونت آیکون های این منو عمودی منظورتون هستش ؟
      کدها باید داخل فایل استایل قرار بگیردند به صورت درست .
      مطلب با عنوان قرار دادن فونت داخل قالب نوشتیم که مفید هستش برای شما

  3. ناصر می گوید

    سلام من یک منو نیاز دارم کع وقتی موس رو به روی منو میبریم اطلاعات تماس – شماره همراه نمایش داده بشه . لطفا” راهنمایی کنید

  4. ناراحت!! می گوید

    لینک دمو خرابه!

    1. دکتر آرش حیدری می گوید

      سلام
      اصلاح شد

      ممنون

  5. طراحی سایت می گوید

    با سلام
    خیلی خوب بود ممنون.

  6. امید می گوید

    با سلام من میخوام فقط اون منو جاش حفظ بشه و ثابت بمونه یعنی وقتی که از بالا به پایین اومدم وقتی رسیدم به منو ی بالا ، دیگه ثابت بمونه

    1. آرش حیدری می گوید

      سلام
      الان دقیقا همینطور هستش دیگه ، ثابت میمونه

  7. mehran می گوید

    سلام . بخوام از چپ چین . راست چین بشه این کد باید کجاشو دستکاری کنم . هرچی گشتم right نداشت که left کنمش

  8. تمبر می گوید

    مرسی عالی بود

  9. Reza می گوید

    قند شکن رو خوب اومدیا :))

  10. یاسر می گوید

    مرسی ولی کجا گفتین
    حداقل لینکشو بذارید
    خیلی دنبالشم

  11. یاسر می گوید

    میشه در مورد نحوه گذاشتن فونت ها توضیح بدید؟

    1. آرش حیدری می گوید

      سلام
      جستجو کنید توضیح دادیم قبلا
      ممنون

  12. ناشناس می گوید

    سلام توضیحات عالی بود
    فقط اونجایی که فرمودین فونت ها رو اضافه کنیم و خودمون درست کنیم .
    میشه با تصاویر توضیح بدین؟
    خیلی ممنون میشم

  13. محمد می گوید

    سلام. مرسی داداش عالی بود.
    اما گرافیکش پاین بود و این که من به همچین چیزی احتیاج دارم اما میخوام گرافیک و قابلیتاش بیشتر باشه…. .
    ولی باز هم ممنون.

  14. Guney می گوید

    ممنون آرش جالب بود

  15. هتل درویشی می گوید

    بسیار عالی ممنون

  16. رضا می گوید

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

  17. هتل درویشی می گوید

    ممنونم عالی بود.

  18. طراحی سایت در مشهد می گوید

    ممنونم عالی بود

  19. سایت دیزاین می گوید

    اقای حیدری ابزار مفیدی هست ممنون

  20. ایمان می گوید

    با سلام

    یه سوال:
    من بجای این فونتی که شما گذاشتید یه فونت دیگه ای رو انتخاب کردم به اسمه icomoon و با توجه به اون fontface اشم نوشتم و استایل دادم اما وقتی برای آیکون های مختلف کدشون رو مینویسم نشون نمیده آیکون هارو….

    در این مورد اگه امکانش هست راهنمایی بفرمایید.
    با تشکر

  21. ALI.AH می گوید

    کمی دقیق تر توضیح بدهید!

    1. آرش حیدری می گوید

      سلام
      بفرمایید کجا رو متوجه نشدید تا توضیح بدیم
      با تشکر

  22. مهرداد می گوید

    سلام . مطلب جالبی بود استفاده کردم ازش و ممنون ازتون . من خیلی وقته پی گیر سایت شما هستم تقریبا هر روز که نه ولی یکروز در میون میام سر میزنم چند وقتیه سایت بدون قالب شده چرا ؟؟؟ منتظر قالب جدید باید باشیم آیاااا ؟؟؟

    1. آرش حیدری می گوید

      سلام
      شاید روی کش مرورگرتون هست ، قالب رو تغییر دادیم ، دکمه F5 رو بزنید تا سایت ریلود بشه و قالب براتون لود بشه
      با تشکر

  23. ایمان می گوید

    مطلب مفیدی بود و به کارم اومد دستتون درد نکنه…

    لینک منبع هم بررسی کردم سایت پرمحتوایی بود…

    یه پیشنهاد داشتم: اگه براتون مقدور هست تو یه پست یک سری از سایت های آموزشی رو که میشناسید و میدونید برای کاربرا ممکنه مفید باشه رو معرفی کنید خیلی خوب میشه…

    البته منظورم جدای سایت های آموزشی معروف هست…

    بازم بابت پست تشکر

    1. آرش حیدری می گوید

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

  24. مریم می گوید

    سلام آقای حیدری
    ببخشید سوالم ربطی به پست تون نداره ولی نیاز ضروری داشتم که سوالمو بپرسم
    اگه امکانش هست میشه راهنمایی کنین چطور می تونم وایرلس لب تاپم را به گوشی اندروید (سامسونگ) وصل کنم؟
    با ادهاک connection ساختم ولی گوشیم اونو پیدا نمی کنه
    پیشاپیش ممنونم

    1. آرش حیدری می گوید

      سلام
      راستش اطلاعی ندارم ، باید گوگل سرچ کنید سایت های دیگه که بیشتر در زمینه ویندوز می نویسند بیشتر کمکتون می کنه
      با تشکر

  25. بهترین آهنگ می گوید

    خداییش حرف نداشت،دست گلت درد نکنه

  26. استخر پیش ساخته می گوید

    با تشکر از مطالب خوبتون

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.