تبلیغات
Fact World - ایجاد منوهای زیبا برای سایت یا وبلاگ با استفاده از تکنیک CSS

آموزش برنامه نویسی و مهارتهای وب

article 

ایجاد منوهای زیبا برای سایت یا وبلاگ با استفاده از تکنیک CSS

css-menu

یکی از قابلیت های کاربردی و زیبای css امکان ایجاد جلوه های ویژه بصری ساده تا پیشرفته است که معمولا در اکثر مرورگرهای استاندارد نیز پشتیبانی می شوند، اگر چه برای سازگاری بیشتر در کنار کدهای css از javascript نیز استفاده می شود اما در این آموزش، شیوه ساخت منویی ساده، سبک و در عین حال زیبا و سازگار را خواهیم گفت که می تواند حداقل به عنوان سرآغازی برای طرح های بزرگتر مورد استفاده قرار گیرد، از منوهای css می توانید در سربرگ وبلاگ یا سایتتان با هدف زیبا سازی یا تسهیل دسترسی استفاده کنید؛ برای راحتی شما و جلوگیری از پیچیده شدن موضوع، آموزش همراه توضیح و مثال آنلاین است.


ایجاد منوهای اینتراکتیو با فتوشاپ و css


ابتدا یک تصویر با اندازه ارتفاع 120 پیکسل (که از دو نیمه ی 60 پیکسلی تشکیل شده)، در برنامه های گرافیکی مانند فتوشاپ ایجاد می کنیم، از آنجایی که برای ایجاد منوهای اینتراکتیو، از عنصر کلیدی background-position با مقادیر متفاوت در حالت عادی و hover استفاده خواهیم کرد، لذا تصویر ما باید در دو قسمت خود، دارای دو ویژگی متفاوت باشد، تا هنگامی که در حالت فعال قرار می گیرد، متمایز به نظر برسد.
navbg
سپس کد زیر را مطابق نیازمان با تعریف لینک ها و استایل css سفارشی، تنظیم می نمائیم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ایجاد منوی زیبا با استفاده از css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
#menu {
    display:block;
    width:400px;
}
#menu ul {
    list-style-type:none;
}
#menu ul li {
    display:inline-block;
    float:right;
    width:100px;
    height:60px;
    margin:2px;
}
#menu a{
    display:inline-block;
    width:100px;
    height:60px;
    background:url(navbg.jpg);
    background-position:top;
    background-color:#666;
    text-align:center;
    color:#FFF;
    line-height:60px;
    text-decoration:none;
    margin-top:4px;
}
#menu a:hover {
    background-position:bottom;
    line-height:60px;
    overflow:hidden;
    background-color:#333;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#">لینک اول</a>
</li>
<li>
<a href="#">لینک دوم</a>
</li>
<li>
<a href="#">لینک سوم</a>
</li>
</ul>
</div>
<hr />
برای ایجاد منوهای اینتراکتیو، از عنصر کلیدی background-position با مقادیر متفاوت در حالت عادی و hover استفاده کرده ایم.
</body>
</html>
پیش نمایش
توضیح:
- خاصیت display با مقادیر inline-block و همچنین float:right کمک می کنند تا لینک های ما در یک ردیف قرار گیرند.
- حالت menu a یعنی موقعیتی که آی دی menu در حالت لینک قرار دارد.
- حالت menu a:hover به معنی حالتی است که لینک آی دی menu در حالت فعال قرار می گیرد.
- ul و li عناصر ایجاد لیست در صفحات وب هستند و از لحاظ موتورهای جستجو و علم سئو، شیوه ای مناسب برای ساخت منوها محسوب می شوند.
- تغییر تصاویر در حالت عادی و فعال با قابلیت background-position و مقادیر آن صورت می گیرد.
section دسته بندی: آموزش کاربردی - آموزش کاربردی CSS -


یکشنبه 13 مهر 1393

نظرات ()


دوشنبه 27 شهریور 1396 01:16 ق.ظ
Hello, I want to subscribe for this weblog to obtain latest updates,
so where can i do it please help.
دوشنبه 16 مرداد 1396 07:11 ب.ظ
An intriguing discussion is worth comment. I believe that you
need to write more on this issue, it may not be a taboo matter but usually folks don't talk about such topics.

To the next! Many thanks!!
شنبه 17 تیر 1396 06:05 ق.ظ
I've been exploring for a bit for any high quality articles
or weblog posts in this kind of space . Exploring in Yahoo I
ultimately stumbled upon this site. Studying
this information So i'm happy to exhibit that I've a very excellent uncanny feeling I found out just what I needed.
I such a lot for sure will make sure to don?t
omit this site and provides it a glance on a relentless basis.
پنجشنبه 21 اردیبهشت 1396 06:32 ق.ظ
Someone necessarily assist to make significantly posts I might state.
This is the first time I frequented your web page and so far?
I amazed with the analysis you made to create this actual publish
amazing. Wonderful activity!

نظر خود را ثبت کنید:

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



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )