همیشه کاربرا سایت های زیبا رو میپسندند. برای زیباسازی باید نهایت استعدادتون رو به خرج بدین!! امروز (در اصل امشب!) میخوام یه منوی قـــــشـــــــنگ! که فقط با سی اس اس درست شده بهنون آموزش بدم.
اول از همه عکس رو ببینید. تا متوجه بشین در نهایت میخواهیم به چی برسیم. یه منوی عمودی که با رفتن موس روی هر آیتم یه افکت نشون میده.
خوب. یه صفحه html بسازید و یه فایل css هم کنارش بذارید. با هربرنامه ای که راحتیت این فایل ها رو میتونید ادیت کنید. یا Visual Studio یا Dreamweaver یا هرچی...
معمولا برای ساخت منو از ul li استفاده میشه. چون کار کردن باهاش آسونه. پس اول کد html منو رو با ul مینویسیم:
کد:
<ul>
<li><h3>پنل کاربری></li>
<li><a href="#">مشاهده لیست مقالات>li>
<li><a href="#">مشخصات>li>
<li><a href="#">تنظیمات></li>
<li><a href="#">تماس با ما>li>
<li><a href="#">راهنما></li>
< /ul>
li اول که داخلش یه تگ h3 برای عنوان منو هست و اختیاریه! حالا. اگه فایل رو با مرورگر باز کنید یه همچین شکلی داره:
منو_با_سی_اس_اس
خوب حالا باید پروسه سی اس اس نویسی رو شروع کنیم. اول به تگ های ul و liمون، آیدی یا کلاس میدیم:
کد:
<ul id="menu-content">
<li class="sliding-element"><h3>پنل کاربری>li>
<li class="sliding-element"><a href="#">مشاهده لیست مقالات>li>
<li class="sliding-element"><a href="#">مشخصات>>
<li class="sliding-element"><a href="#">تنظیمات>li>
<li class="sliding-element"><a href="#">تماس با ما>li>
<li class="sliding-element"><a href="#">راهنما></li>
</ul>
حالا توی فایل css کدهای زیر رو بنویسین:
کد:
ul#menu-content
{
list-style: none;
font-size: 12px;
margin: 30px 0;
padding: 0;
}
ul#menu-content li.sliding-element h3,
ul#menu-content li.sliding-element a
{
display: block;
width: 150px;
padding: 5px 18px;
margin: 0;
color: #fff;
margin-bottom: 3px;
}
ul#menu-content li.sliding-element h3
{
background-color: #1a75f4;
font-weight: bold;
text-align:center;
margin-bottom:6px;
}
ul#menu-content li.sliding-element a
{
color: #fff;
background:#035bd6;
text-decoration: none;
}
list-style: none اون دایره های کنار آیتم ها رو برمیداره.
display: block برای اینه که هر آیتم رو توی یه خط نشون بده.
اندازه آیتم های منو رو هم که با width: 150px ثابت کردیم! عه آبی شد!!!! :-دی
خوب. تا اینجای کار این رو داریم:
![[تصویر: img2.png]](http://blog.autobacklink.ir/articleapps/4/img2.png)
حالا یه مقدار قشنگش میکنیم! lکد html این میشه:
کد:
<html>
<head>
<title>ساخت منوی افقی با CSStitle>
<link rel="stylesheet" type="text/css" href="styles.css" />
>
<body>
<div class="content">
<h2 class="logo"><span>ساخت منوی افقی با CSS>h2>
<div id="navigation-menu">
<ul id="menu-content">
<li class="sliding-element"><h3>پنل کاربری>>
<li class="sliding-element"><a href="#">مشاهده لیست مقالات>li>
<li class="sliding-element"><a href="#">مشخصات>>
<li class="sliding-element"><a href="#">تنظیمات>li>
<li class="sliding-element"><a href="#">تماس با ما>li>
<li class="sliding-element"><a href="#">راهنما>li>
ul>
>
>
>
>
و کد سی اس اس با یه سری تغییرات میشه:
کد:
body
{
margin: 0;
padding: 0;
background: #a7a7a7;
font-family: Tahoma, Arial, Verdana, sans-serif;
font-size: 12px;
direction:rtl;
}
.content
{
padding:15px;
}
h2.logo
{
margin-bottom: 0;
background:url('images/head_logo.png') no-repeat right;
height:32px;
}
h2.logo span
{
display: none;
}
a.refrence
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding:4px;
background:#2981fb;
color: #fff;
font-size: 12px;
text-decoration:none;
}
a.refrence:hover{background:#fff; color:#3d3d3d}
#navigation-menu {
margin:5px 20px 10px 0;
}
ul#menu-content
{
list-style: none;
font-size: 12px;
margin: 30px 0;
padding: 0;
}
ul#menu-content li.sliding-element h3,
ul#menu-content li.sliding-element a
{
text-shadow:1px 1px 0px #383838;
display: block;
width: 150px;
padding: 5px 18px;
margin: 0;
color: #fff;
margin-bottom: 3px;
}
ul#menu-content li.sliding-element h3
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background-color: #1a75f4;
font-weight: bold;
border:1px solid #0052c6;
text-align:center;
margin-bottom:6px;
}
ul#menu-content li.sliding-element a
{
color: #fff;
background:#035bd6;
border: 1px solid #003e95;
text-decoration: none;
}
ul#menu-content li.sliding-element a:hover
{
background:#1772f2;
padding-right:30px;
}
عنوان منو رو با سی اس اس دور گرد کردم. یکم قابل تحمل تر شد.
بذارین یه کار دیگه هم با عنوان بکنیم. پسزمینه gradiant چظوره؟؟ پس قسمت عنوان سی اس اس رو اصلاح کنید:
ul#menu-content li.sliding-element h3
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background-color: #1a75f4;
/*-----------این کدها رو اضاف کنید--------*/
background-image: -moz-linear-gradient(#0358ce, #2981fb);
background-image: -webkit-gradient(linear, left top, left bottom, from(#0358ce), to(#2981fb));
background-image: -webkit-linear-gradient(#0358ce, #2981fb);
background-image: -o-linear-gradient(#0358ce, #2981fb);
background-image: -ms-linear-gradient(#0358ce, #2981fb);
background-image: linear-gradient(#0358ce, #2981fb);
/*------------------------------------*/
font-weight: bold;
border:1px solid #0052c6;
text-align:center;
margin-bottom:6px;
}
خوب. حالا یه منو داریم که رفتن موس روش رنگش عوض میشه ویه مقدار میاد جلو!
![[تصویر: img3.png]](http://blog.autobacklink.ir/articleapps/4/img3.png)
اما این کافی نیست. ما میخوایم منومون یه افکت قشنگتر داشته باشه. پس از delay توی سی اس اس استفاده میکنیم.
برای استفاده از delay بایدد کدهای زیر رو اضافه کنید:
کد:
ul#menu-content li.sliding-element a
{
color: #fff;
background:#035bd6;
border: 1px solid #003e95;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
هر کدون برای یه مرورگر استفاده میشه. بجز IE محترم! که اصلا باید بیخیالش شد!!! :-(
خوب دیگه تموم شد. حالا با رفتن موس روی آیتم ها، با یه افکت قــــشـــــنگ تکون میخورن! میتونید زمانش رو با تغییر 0.2s عوض کنید.
(اگه میخواین در مورد این پروپرتی چیزای بیشتر بفهمین: CSS3 transition-delay Property و Keyframe Animation Syntax)
میتونید فایل ضمیمه رو دانلود کنید.
توی قسمت بعدی احتمالا منوی افقی یا عمودی با زیر منو رو بگم.[/php]
