تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

دوشنبه 13 آبان 1392

آموزش ساخت منو اشتراک گذاری چرخان

نویسنده: امیر حسینی   

منو اشتراک گذاری چرخان

منوهای اشتراک گذاری بخشی جدا نشدنی از وبسایت ها هستند به همین خاطر طراحان وب همیشه سعی در طراحی نمونه های جدیدتر برای جذابیت بیشتر این منوها هستند.
منو اشتراک گذاری که در این مطلب بهش خواهیم پرداخت برگرفته از امکانات و خاصیت های CSS3 هست بنابراین شک نکنید که از خاصیت های transition و transform در آن استفاده شده.
ایده ی این منو را از خاصیت transform: rotate گرفتم و روش کار به این صورت هست که وقتی کاربر موس را بر روی یکی از آیکن های اشتراک گذاری ببرد آیکن از سمت چپ غلطان غلطان به سمت راست خواهد رفت، در این حین آیکن از شکل مربع به دایره تغییر شکل داده و متن مربوط به آیکن شبکه اجتماعی نمایش داده خواهد شد.


پیش نمایش این منو را در این لینک مشاهده کنید.

برای HTML ترکیب زیر را داریم:

<div id="sharingmenu">
	<a href="#" class="text">اشتراک گذاری</a>
	<a href="#" class="facebook">
		<img src="img/facebook.png" alt="faceboook">
		<span>Share this on facebook</span>
	</a>
	<a href="#" class="twitter">
		<img src="img/twitter.png" alt="twitter">
		<span>Tweet this</span>
	</a>
	<a href="#" class="google">
		<img src="img/google-plus.png" alt="google plus">
		<span>Share this on google plus</span>
	</a>
	<a href="#" class="rss">
		<img src="img/rss.png" alt="rss">
		<span>Really Simple Syndication</span>
	</a>
</div>

همانطور که مشاهده می کنید هر آیکن در یک تگ a لینک شده و برای هر لینک از یک کلاس استفاده کردم.
در قسمت CSS فقط یکی از آیکن ها را شرح خواهم داد بقیه آیکن ها شیوه نامه مشابه دارند فقط فاصله ها از هم تغییر کرده است.
در ID اصلی که شامل تمامی توابع ماست در CSS داریم:

#sharingmenu{
	width: 200px;
	height: 32px;
	margin: 10% auto;
	border: 1px solid #D9D9D9;
	background-color: #DDD;
	border-radius: 0px 32px 32px 0px; /*گرد کردن گوشه های راست منو*/
	box-shadow: 0px 0px 3px 0px #DDD; /*سایه اطراف منو*/
}

و متنی که در کنار آیکن ها نمایش داده می شود با کلاس text:

#sharingmenu .text{
	position: absolute;
	margin: 4px 12px 0 0;
	margin-top: 6px\9; /** ie hack **//*امان از دست باگ های اینترنت اکسپلورر*/
	font-family: Arial;
	font-size: 20px;
	color: #F5F5F5;
	text-shadow: 0 1px 0 #BBB;/*سایه نوشته*/
}

برای آیکن اول که آیکن فیس بوک هست:

#sharingmenu .facebook{
	position: absolute;
	display: block;
	width: 200px;
	width: 201px\9; /** ie hack **/
	height: 32px;
	margin: 0 0 0 0;
	z-index: 1; /*مشخص کردن ترتیب قرار گیری*/
}

اگر درباره خاصیت z-index اطلاعی ندارید این مطلب را مطالعه فرمایید.

وقتی کاربر موس را بر روی آیکن ببرد:

#sharingmenu .facebook:hover{
	z-index: 5; /*اولویت قرارگیری بر روی تمامی آیکن ها*/
	background-color: #4A6EA9;
	border-radius: 0px 32px 32px 0px;
	transition-duration: 2s; /*زمان تغییر*/
}

متنی که همراه آیکن نمایش داده خواهد شد:

#sharingmenu .facebook span{
	position: relative;
	text-align: left;
	display: none; /*نمایش داده نشود*/
	bottom: 23px;
	bottom: 22px\9; /** ie hack **/
	left: 5px;
	width: 200px;
	height: 32px;
	color: #FFF;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
}
#sharingmenu .facebook:hover span{
	display: block; /*وقتی موس بر روی آیکن قرار گرفت نمایش داده شود*/
}

و برای خود آیکن که در تگ img هست داریم:

#sharingmenu .facebook img{
	width: 32px;
	height: 32px;
	margin: 0 168px 0 0;
	margin-right: 169px\9; /** ie hack **/
}
#sharingmenu .facebook:hover img{
	width: 32px;
	margin: 0 0 0 0;
	border-radius: 32px;/*گرد کردن گوشه های آیکن*/
	transform: rotate(720deg); /*چرخش آیکن*/
	transition: all 2s cubic-bezier(0.680, -0.550, 0.265, 1.550);
	/*حالت خیزش به عقب و حرکت به جلو با استفاده از خاصیت بالا به دست می آید*/
}

خب طراحی یک آیکن به پایان رسید نکته هایی که باید به آن توجه کنید عبارت است از:
1. در بعضی از کلاس ها به ناچار از هک اینترنت اکسپلورر استفاده کردم تا نمایش درست را به دست بیاورم، این نوع هک را فقط مرورگر اینترنت اکسپلور نسخه ی 9 و به بالا می شناسد و طریقه استفاده از آن به این شکل است:


height:30px/9;/*فقط یک 9/ به انتهای متغیر اضافه کردیم*/


2. برای به دست آوردن خاصیت transition از این سایت مفید کمک گرفتم.

3. این منو اشتراک گذاری در تمامی مرورگرهای نسل جدید و فقط اینترنت اکسپلورر 10 درست نمایش داده می شود.



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

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com