رفتن به مطلب

آموزش طراحی منو روبانی توسط CSS3


پست های پیشنهاد شده

با پیشرفت کد نویسی CSS و انتشار CSS3 تحولی بزرگ رخ داد. همانطور که در آموزش های قبلی CSS3 در مورد مزیت های آن صحبت کردیم، امروز که پس از مدت های قراره بروز بشیم به یک مزیت مهم پی می بریم.

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

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

خب امروز به راحتی به کمک CSS3 این منو را طراحی می کنیم.

در مورد سازگاری در مرورگر های مختلف، همونطور که می دونید CSS3 که اینترنت اکسپلورر (IE) از نسخه ۶ به بعد میتواند این کد ها را بارگزاری کند. و بقیه مرورگر های پیشرفته نظیر فایرفاکس و گوگل کروم تنها نسخه های ابتدایی آن که به راحتی نیز بروز می شوند این قابلیت را ندارند.

ribon-menu-css3.png

آموزش طراحی منو روبانی توسط CSS3

خب به سراغ طراحی می رویم.

اولین مرحله طرح بندی HTML می باشد کد های زیر را بر اساس تعداد گزینه در منوی خودتون بنویسید و در قسمت Body (تگ Body) بنویسید.


<div class='ribbon'>
<a href='#'><span>گراوب</span></a>
<a href='#'><span>درباره</span></a>
<a href='#'><span>خدمات</span></a>
<a href='#'><span>ارتباط</span></a>
</div>

حالا شروع میکنیم قسمت اصلی طراحی رو، یعنی طرح بندی منویی که در HTML اون رو نوشتیم توسط CSS3 ، این قسمت مهم ترین بخش طراحی این منو می باشد.

یک نکته مهم که باید به اون توجه کنید این است که ما این منو رو سفید طراحی کردیم، پس باید تصویر زمینه که بصورت پیشفرض سفید است رو به یک رنگ تیره تغییر بدیم، من از آبی تیره استفاده کردم که در زیر کد اون مشخص است.


body {
background-color: #006;
}
.ribbon:after, .ribbon:before {
margin-top: 0.5em;
content: "";
float: right;
border: 1.5em solid #fff;
}
.ribbon:after {
border-left-color: transparent;
}
.ribbon:before {
border-right-color: transparent;
}

در این تکه کد از دو شبه عنصر :after و :before استفاده کردیم. این دو فضای خالی و خط دور منو (Border) را بوجود می آورند.

خب از اونجایی که گزینه های منو را ما توسط تگ لینک (a) معرفی کردیم باید ویژگی های های ساختاری رو برای همین تگ بنویسیم.


.ribbon a:link, .ribbon a:visited {
color: #000;
text-decoration: none;
float: right;
height: 3.5em;
overflow: hidden;
}

کاربرد :visited هم جهت این می باشد که لینک هایی که روی آن کلیک شده چگونه مشخص باشند.

برای حالات و جلوه های نمایش مثل موقعی که موس روی گزینه مورد نظر میره (Hover) باید کد های زیر رو بنوسیم.


.ribbon span {
background: #fff;
display: inline-block;
line-height: 3em;
padding: 0 1em;
margin-top: 0.5em;
position: relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background: #FFD204;
margin-top: 0;
}
.ribbon span:before {
content: "";
position: absolute;
top: 3em;
right: 0;
border-left: 0.5em solid #9B8651;
border-bottom: 0.5em solid #fff;
}
.ribbon span:after {
content: "";
position: absolute;
top: 3em;
left: 0;
border-right: 0.5em solid #9B8651;
border-bottom: 0.5em solid #fff;
}

باز هم میبینید که چون عناوین گزینه لینک درون تگ Span هستند ما این تگ رو نیز دارای خصوصیات خاصی کردیم.

خب همونطور که میبینید و اگر تست کرده بشید، منوی شما به زیبایی ایجاد شده است.

توجه کنید که در توصیفات تگ Span ما از -webkit ، -moz- و چند شبه صفت دیگر استفاده کردیم برای همگام سازی با مرورگر های IE و نسخه های مختلف دیگر مرورگر ها تا کد به خوبی نمایش داده شود.

امیدوارم از این آموزش استفاده لازم رو برده باشید.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...