تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


یکی از قابلیت های کاربردی و زیبای css امکان ایجاد جلوه های ویژه بصری ساده تا پیشرفته است که معمولا در اکثر مرورگرهای استاندارد نیز پشتیبانی می شوند، اگر چه برای سازگاری بیشتر در کنار کدهای css از javascript نیز استفاده می شود اما در این آموزش، شیوه ساخت منویی ساده، سبک و در عین حال زیبا و سازگار را خواهیم گفت که می تواند حداقل به عنوان سرآغازی برای طرح های بزرگتر مورد استفاده قرار گیرد، از منوهای css می توانید در سربرگ وبلاگ یا سایتتان با هدف زیبا سازی یا تسهیل دسترسی استفاده کنید.
ایجاد منوهای اینتراکتیو با فتوشاپ و css
ابتدا یک تصویر با اندازه ارتفاع 120 پیکسل (که از دو نیمه ی 60 پیکسلی تشکیل شده)، در برنامه های گرافیکی مانند فتوشاپ ایجاد می کنیم، از آنجایی که برای ایجاد منوهای اینتراکتیو، از عنصر کلیدی background-position با مقادیر متفاوت در حالت عادی و hover استفاده خواهیم کرد، لذا تصویر ما باید در دو قسمت خود، دارای دو ویژگی متفاوت باشد، تا هنگامی که در حالت فعال قرار می گیرد، متمایز به نظر برسد.

 

 

<!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://sefaresh.net -->
<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 و مقادیر آن صورت می گیرد.


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین