ایجاد منوهای اینتراکتیو با فتوشاپ و css
ابتدا یک تصویر با اندازه ارتفاع 120 پیکسل (که از دو نیمه ی 60 پیکسلی تشکیل شده)، در برنامه های گرافیکی مانند فتوشاپ ایجاد می کنیم، از آنجایی که برای ایجاد منوهای اینتراکتیو، از عنصر کلیدی background-position با مقادیر متفاوت در حالت عادی و hover استفاده خواهیم کرد، لذا تصویر ما باید در دو قسمت خود، دارای دو ویژگی متفاوت باشد، تا هنگامی که در حالت فعال قرار می گیرد، متمایز به نظر برسد.
سپس کد زیر را مطابق نیازمان با تعریف لینک ها و استایل 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 و مقادیر آن صورت می گیرد.