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

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

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

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


منو اشتراک گذاری متحرک


طراحی این منو تقریباً 1 روز وقت منو گرفت، مخصوصاً که با فوتوشاپ آشنا نیستم و واسه طراحی سایه آیکن ها به مشکل برخوردم.
البته بلاخره تونستم اون سایه ایی که مد نظرم بود را طراحی کنم!
منو اشتراک گذاری طراحی شده به صورت نیمه مخفی هست که وقتی موس بر روی یکی از آیکن ها قرار بگیره آروم بالا میاد و خودش رو نشون میده.
منوهای اشتراک گذاری همسان این منو در سطح وب موجود هست ولی این منو تفاوت هایی داره نسبت به بقیه که یه جورایی خاصش کرده… ;)

برای CSS یک CSS-reset ساده نوشتم:

/** css-reset **/
*{
	margin: 0px;
	padding: 0px;
	outline: 0px;
}
body{
	direction: rtl;
	background: #F2F2F2;
	font-family: Arial, Helvetica, sans-serif;
}
a{
	text-decoration: none;
}
ul{
	list-style: none;
}
li{
	display: inline-block;
}

برای HTML هم از Unordered list استفاده کردم:

<ul id="share">
	   <li></li><!--
	--><li></li><!--
	--><li></li><!--
	--><li></li>
</ul>


به لیست یک ID اضافه کردم تا خاصیت های مورد نظرم رو بهش اضافه کنم.


اگر نمیدونید علت استفاده از کامنت HTML در ابتدا و انتهای لیست چیه این مطلب رو بخونید.


اکنون در CSS داریم:


/** sharing menu **/
#share{
	display: block;
	margin: 15% auto;
	padding: 10px;
	width: 240px;
	height: 20px;
}
#share li{
	height: 40px;
	width: 60px;
}


و برای اضافه کردن سایه زیر آیکن ها:


#share .shadow{
	background: url(img/shadow.png) no-repeat 0 0;
	display: block;
	position: absolute; /*برای اینکه سایه با آیکن ها تداخل نکنه*/
	margin: 25px 0 0 0;
	width: 60px;
	height: 3px;
}


نوبت فراخوانی سایه توسط HTML است که باید در هر لیست تکرار بشه:


<ul id="share">
	<li>
		<div class="shadow"></div>
	</li><!--
	--><li>
		<div class="shadow"></div>
	</li><!--
	--><li>
		<div class="shadow"></div>
	</li><!--
	--><li>
		<div class="shadow"></div>
	</li>
</ul>


اکنون هر لیست به صورت یک بلوک تبدیل شده که دارای یک سایه هست، راجب اندازه ها و موقعیت قرارگیری توضیح نمیدم چون کاری تجربی هست و باید خودتون به موقعیت قرارگیری مورد نظر برسید.
برای اضافه کردن آیکن ها از تکنیک CSS sprites استفاده کردم، در این تکنیک تمام عکس ها رو به یک عکس تبدیل میکنیم و با استفاده از background position قسمت مورد نظر عکسمون رو نمایش میدیم.
توضیحات تکمیلی نیاز هست برای این تکنیک که به امید خدا در ارسال های بعدی کاملاً براتون توضیح میدم.
به CSS قسمت آیکن ها توجه کنید:


/** buttons **/
#share .googleplus{
	background: url(img/share.gif) no-repeat right 0; /*css sprites*/
	display: block;
	margin: 10px 14px 0 10px;
	width: 32px;
	height: 16px;
}
#share .facebook{
	background: url(img/share.gif) no-repeat right -34px; /*css sprites*/
	display: block;
	margin: 10px 14px 0 10px;
	width: 32px;
	height: 16px;
}
#share .twitter{
	background: url(img/share.gif) no-repeat right -68px; /*css sprites*/
	display: block;
	margin: 10px 14px 0 10px;
	width: 32px;
	height: 16px;
}
#share .rss{
	background: url(img/share.gif) no-repeat right -102px; /*css sprites*/
	display: block;
	margin: 10px 14px 0 10px;
	width: 32px;
	height: 16px;
}

برای فراخوانی در HTML داریم:

<ul id="share">
	<li>
		<div class="shadow"></div>
		<a class="googleplus" href="#" title="Share this on google plus"></a>
	</li><!--
	--><li>
		<div class="shadow"></div>
		<a class="facebook" href="#" title="Share this on facebook"></a>
	</li><!--
	--><li>
		<div class="shadow"></div>
		<a class="twitter" href="#" title="Tweet this"></a>
	</li><!--
	--><li>
		<div class="shadow"></div>
		<a class="rss" href="#" title="Really Simple Syndication"></a>
	</li>
</ul>


نکته مهمی که باید بهش توجه کنین اینه که حتما تگ سایه باید بالای لینک آیکن قرار بگیره در غیر اینصورت درست نمایش داده نمیشه:


<li>
	<div class="shadow"></div>
	<a class="googleplus" href="#" title="Share this on google plus"></a>
</li>


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


/** links effect **/
#share a{
	transition-duration: 300ms;
	-webkit-transition-duration: 300ms;
}
#share a:hover{
	margin-top: -3px; /*به سمت بالا*/
	height: 30px; /*اندازه کامل آیکن نمایش داده بشود*/
	transition-duration: 400ms;
	-webkit-transition-duration: 400ms;
}

از خاصیت transition-duration تمامی مرورگرهای نسل جدید و تنها اینترنت اکسپلورر 9 به بالا پشتیبانی میکنند.


لینک هایی هم که باید قرار بدین برای هر شبکه اجتماعی به این شکل هست:


Google Plus: https://plus.google.com/share?url=آدرس
Facebook: https://www.facebook.com/sharer/sharer.php?u=آدرس
Twitter: https://twitter.com/home?status=آدرس


به جای “آدرس” لینک مطلب یا سایت یا وبلاگتون رو قرار بدین.


طراحی منو به پایان رسید ولی اگر تا حالا متوجه تفاوت این منو اشتراک گذاری با دیگر منوها نشده اید باید نظر شما را به این نکته جلب کنم که در این منو سایه از آیکن ها جداست و شما میتونید آیکن مورد نظر خودتون رو بهش اضافه کنید کافیه لیست دیگری ایجاد و CLASS های مربوطه را تعریف کنید و در ضمن این منو بسیار بسیار سبک طراحی شده، در کل شاید 6 کیلوبایت!

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

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت 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