به کانال تلگرام ما بپیوندید
@Codenvis

کدنویس|قالب وردپرس|افزونه وردپرس
کد منو دایره ای

کد منو دایره ای – کد منو با افکت پرانتز

با سلام به کاربران و دوستداران کدنویس در این مطلب کد منو دایره ای رو براتون آماده کردیم تا در طراحی و کدنویسی قالب‌هاتون ازش استفاده کنید تا قالبی جذاب با افکتی زیبا داشته باشید.

در کد منو دایره ای که براتون قرار دادیم افکت پرانتز برای هاور قرار داده شده که مطمئنا این رو در خیلی جاها دیدید و جدیدا به افکت محبوبی تبدیل شده.

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

از نام مطلب کاملا مشخصه که کد منو دایره ای به چه صورت هست اما باز هم توضیحاتی رو در اینباره میدهیم! کد منو دایره ای از چند آیتم به صورت آیکون که در دایره قرار دارند تشکیل میشه

و موقعی که شما موس رو روی آیتم میبرید ( هاور ) افکت پرانتز زیبایی با حالت چرخشی بر روی اون آیتم ظاهر میشه و به رنگ قرمز تغییر میکنه

کد منو با افکت پرانتز
کد منو با افکت پرانتز

آیکون‌ها و رنگ افکت پرانتز هم قابل تغییر میباشد و در آخر براتون توضیح میدیم که چجوری این دو ویژگی رو تغییر بدهید و منو رو برای خودتون شخصی سازی بکنید.

و در ضمن در کد منو دایره ای از فونت آیکون استفاده شده و از اونجایی که امروزه فونت آیکون خیلی زیاد شده 🙂 در این کد از آیکون‌های سایت ionicons استفاده میشه که اتفاقا کلی آیکون داره و میتونید به راحتی ازشون استفاده کنید

خب بریم سراغ آموزش استفاده از کد

آموزش استفاده از کد منو دایره ای

برای استفاده از کد منو دایره ای اول از همه کد استایل زیر رو در قسمت head قالبتون قرار بدید ( دقت کنید حتما در head باشد )

<link rel="stylesheet" href="http://dl.codenvis.ir/coding/Circle-menu/style-codenvis.css">

در قدم بعدی باید کد جاوا اسکریپت زیر رو در ناحیه head یا در آخر قالب قبل از اتمام تگ body قرار بدهید

<script  src="http://dl.codenvis.ir/coding/Circle-menu/js/circle-codenvis.js"></script>

و در آخر کد زیر که کد منو دایره ای هستش رو در هر جای قالب که میخواید از منو استفاده کنید بزارید تا کد براتون به نمایش در بیاد

<a href="#" class="snip1489 ion-ios-star-outline"></a>
<a href="#" class="snip1489 hover blue ion-ios-list-outline"></a>
<a href="#" class="snip1489 ion-ios-chatboxes-outline"></a>
<a href="#" class="snip1489 ion-ios-home-outline"></a>
<a href="#" class="snip1489 ion-ios-pie-outline"></a>
<a href="#" class="snip1489 ion-ios-gear-outline"></a>

برای تغییرات در کد میتونید از دستوراتی که در زیر تعریف میکنیم استفاده کنید و طبق اونا کد منو دایره ای رو تغییر بدید

اول برای تغییر آیکون به سایت ionicons بروید و نام آیکون مورد نظرتون رو پیدا کنید مثلا ios-add این نام رو بعد از کلمه ion بزارید برای مثال دقت کنید

ion-ios-home-outline رو داریم و میخواین به آیکون خودمون تغییر بدیم بعد از ion نام آیکونمون رو قرار میدیم : ion-ios-add

بعد از تغییر نام گفتیم که میتونید رنگ رو هم در کد منو دایره ای تغییر بدهید به همین منظور کد زیر رو در قسمت head قالبتون بزارید

و کد رنگ خودتون رو به جای #c0392b قرار بدهید تا رنگ افکت پرانتز در هاور تغییر کند و به رنگ دلخواه شما درآید

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

مشاهده دمو کد منو

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

با علی♥

حسین

حسین هستم مدیر و مؤسس سایت کدنویس ، دانشجوی رشته نرم افزار ، مسلط به Html،Css،Jquery،Php،Bootstrap،Wordpress و ...
امیدوارم بتونم کمکی به وبمستران بی‌شمار و عزیز ایرانی بکنم ♥

نظر بدهید

ما را دنبال کنید

لطفا کدنویس را در شبکه های اجتماعی دنبال کنید تا از مطالب ویژه برخوردار بشید!!!

لطفا ما را در گوگل محبوب کنید ♥