parsgreen.com
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
related مطالب بیشتر:
» مخفی کردن عناصر وب با CSS
» تنظیم موقعیت و حذف فاصله بلاک های div با استفاده از css
» چسبیدن فوتر قالب به پائین صفحه با CSS
» ساخت منوی کشویی با تگ ul li و css
» تنظیمات css مخصوص مرورگر اینترنت اکسپلورر
commentنظرات (۱۶ یادداشت برای این مطلب ارسال شده است)
نویسنده: elaheh
زمان: ۲۳:۵۱:۰۷ - تاریخ: ۱۳۹۲/۰۲/۲۰
سلام
ممنون از زحماتتون
من به یه مشکل برخوردم
من زیاد تو برنامه نویسی حرفه ای نیستم
شاید سوالی که میپرسم ساده به نظر برسه
ولی وقتی من قسمت float:right رو به float:center تغییر میدم منوها بهم میریزن و تو حالت فعال لینک ها علاوه بر تغییر مطلوبی که میخوایم به سمت بالا هم حرکت میکنن و این اصلا زیبا و خوشایند نیست
برای رفع این مشکل باید چیکار کنم؟
پاسخ: 
سلام
خاصیت float مقادیری به عنوان center ندارد، تنها left و right جزء مقادیر استاندارد هستند، اگر می خواهید مکان چینش منو را به فرض در وسط صفحه قرار دهید، باید کل منو را داخل یک بلاک دیگر تعریف کنید و آن بلاک را در وسط صفحه تنظیم نمائید، به فرض در حالت معمول استایل زیر، بلاک div و محتوای آن را در وسط صفحه تنظیم می کند:
<style type="text/css">
.center-block{
margin-left:auto;
margin-right:auto;
text-align:center;
}
</style>
<!-- نحوه استفاده -->
<div class="center-block">کد منو</div>
البته این به رفتار (طول، ارتفاع، چینش و...) بلاک های والد (بلاک هایی که در سطح بالا تری از آخرین بلاک هستند) نیز بستگی دارد.
در مورد تغییر حالت لینک در حالت فعال، باید ببینید چه مقادیری برای حالت a و a:hover در استایل های استفاده شده در صفحه وجود دارد (این خاصیت ها به دلیل سراسری بودن از دیگر استایل های یک صفحه تاثیر می گیرند)، به فرض اگر فونت در حالت hover چند پیکسل بزرگتر شود، نتیجه به این صورتی که گفتید خواهد بود، باید خاصیت های مربوط به طول و ارتفاع در هر دو حالت به یک نحو باشند.
نویسنده: پرویز
زمان: ۱۹:۴۹:۱۱ - تاریخ: ۱۳۹۲/۰۷/۲۳
سلام, بخشید موارد زیر را به صورت کامل توضیح دهید؟ ضمنا عید بزرگ قربان را به شما و خانواده تان محترمتان تبریک می گویم.
1-line-heigh
2-margin
3-list-style-type
4-overflow
5-display
پاسخ: 
سلام
سپاس فراوان.
لطفا از طرح سوالات کلی خودداری کنید، موارد مطرح شده هر کدام در مباحثی جداگانه و در بخش CSS (و همچنین در وب) آموزش داده شده اند.
نویسنده: مجید
زمان: ۲۱:۱۰:۵۰ - تاریخ: ۱۳۹۲/۱۲/۰۸
سلام
خیلی عالیه
خیلی سایت کاملیه
مثال های خوبی دارید
با تشکر
نویسنده: پرواز
زمان: ۰۱:۴۳:۵۰ - تاریخ: ۱۳۹۳/۰۲/۰۹
سلام
خواستم بدونم می شه مطالب موجود تو یه موضوع وبلاگ رو با کد لیست کرد بیشتر توضیح میدم فرض کنید یه موضوعی به نام سلامت داریم و تو این موضوع 5 مطلب هست حالا میشه عناوین این 5 پست را از موضوع مورد نظر گرفت و یه جایی نشون داد یعنی چیزی شبیه کلیک کردن رو موضوعات سایت ولی با این تفاوت که اول صفحه نمایش داده بشن به فرض مثال مطالب یه موضوعی تو یه قسمت از صفحه نمایش داده بشن
مثلا یه قسمتی تو سایت قرار بدیم که جدیدترین مطالب علمی رو نشون بده و ...
با سپاس
پاسخ: 
سلام
این نوع موارد بستگی به قابلیت های ارائه شده توسط سرویس وبلاگی دارد، البته اکثر سرویس ها قابلیت های زیادی در این زمینه ارائه نمی کنند، اما برای اطمینان باید به راهنمای تگ های اختصاصی (که معمولا در بخش ویرایش قالب) قرار دارد مراجعه کنید، امکانات وبلاگ ها بر اساس اصول تگ های اختصاصی هر سرویس تعریف می شود.
نویسنده: میثم
زمان: ۰۰:۳۸:۱۳ - تاریخ: ۱۳۹۳/۰۳/۲۳
سلام
خسته نباشید
عذر میخوام جای بهتری برای مطرح کردن پیدا نکردم.
با این حال چون مرتبط با css بود اینجا مطرح میکنم.
چطورمیشه با css یک callout ساخت؟
منظور از callout هم همون اشکال مستطیلی هستند که روی یکی از border هاش شکل یه مثلث داره.
و به عنوان "توصیحات بیشتر یا نوشته راهنما" کاربرد داره.
(البته این اشکال مستطیلی گاهی بیضی هستند)
مثل بخش setting شکل زیر:
http://t1.gstatic.com/images?q=tbn:ANd9GcQhFIXBuQY6lieLquBE1mermH4AMNyYcyVy85ILRhZQHKb4GjQthQ
همچنین چطور میشه با css مثلت یا لوذی ساخت.
پاسخ: 
لطفا به آدرس زیر مراجعه کنید:
http://cssdeck.com/labs/bv45bh6p
همچنین با جستجوی عبارت "CSS callout" نمونه های زیادی در وب خواهید یافت.
نویسنده: میثم
زمان: ۰۹:۵۵:۱۱ - تاریخ: ۱۳۹۳/۰۳/۲۵
سلام
بله این سایت رو قبلا دیدم
از این کدها هم قبلا استفاده کردم
منتها بخشیش رو متوجه نشدم
اون قسمتی که ::before داره رو میشه توضیح بدید؟
مرسی.
پاسخ: 
سلام
before:: یک selector در CSS3 است که محتوایی را قبل از محتوای موجود در تگ هدف قرار می دهد (قبل در اینجا الزاما به این معنی نیست که حتما باید پیش از محتوای موجود نمایش داده شود، این بستگی به استایل استفاده شده دارد)، این محتوا می تواند به صورت متنی یا به صورت استایل باشد، به طور مثال قسمت callout.top::before. در سایت مذکور برای ایجاد مثلث کوچک در زیر بلاک با کلاس callout top است.
نویسنده: ضحی
زمان: ۰۰:۲۵:۵۳ - تاریخ: ۱۳۹۳/۰۴/۱۷
سلام خسته نباشید. من بارها از مطالب سایتتون استفاده کردم. اما الان یه سوال برام پیش اومده. منویی که توی این آدرس
http://www.doctorsalamat.com/experts.aspx
استفاده شده با css طراحی شده؟
اصلا چه جوری میشه همچین منویی ایجاد کرد؟
با توجه به اینکه من نیمه مبتدی هستم...
ممنون
پاسخ: 
سلام
اینگونه منوها معمولا با استفاده از جاوا اسکریپت یا جی کئوری + CSS ساخته می شوند، نمونه های زیادی در وب به صورت آماده وجود دارد که باید (به فارسی و انگلیسی) جستجو کنید.
نویسنده: محسن
زمان: ۰۹:۲۳:۱۴ - تاریخ: ۱۳۹۳/۰۵/۱۵
سلام خسته نباشید
یه سوال علت اورن کد حذف اسکرول عمودی
overflow:hidden; 
تو کد منو چیه
من این کدا برداشتم تغییری نکرد
پاسخ: 
سلام
این خاصیت ضرری ندارد! فایده آن این است که به فرض اگر متن منو خیلی زیاد باشد، میزان اضافه مخفی می شود و موجب به هم ریخته شدن منو نمی شود.
نویسنده: فرزاد
زمان: ۱۶:۳۴:۳۶ - تاریخ: ۱۳۹۳/۱۰/۰۲
سلام ضمن تشکر از شما که این نکات آموزنده رو در سایتتون قراردادین , من برای منوها در اکسپلورر سوال داشتم چون فایل ie6 الی ie9 رو از سایت
http://www.iecss.com

دانلود و در صفحه جایگذاری کردم و مانند سورس برنامتون هم قرار دادم
همین مثال شما رو در اکسپلورر منوهاشو باز نمیکنه ولی در google chrome باز میکنه
فکر میکنم یک مشکل از کمبود کد باشه اگر ممکنه کد اکسپلورر برای همین مثال منو ها در سایت بذارین تا برای همه اکسپلوررها کامل نمایش بده
پاسخ: 
سلام
دوست گرام در این مثال منوی بازشو وجود ندارد! این آموزش صرفا یک منوی ساده و سبک با CSS را شامل می شود که در تمام مرورگرها به خوبی عمل می کند، لطفا اگر آموزش خاصی مد نظرتان است، به همان مطلب اشاره کنید.
نویسنده: داوود
زمان: ۱۱:۵۱:۲۱ - تاریخ: ۱۳۹۴/۰۷/۰۶
سلام آقای مهندس، وقتتون بخیر دوست عزیزم.
استاد من اومدم و برای اینکه خودم بدون نگاه کردن به کد شما، بتونیم یه همچین منویی رو طراحی کنم (البته بدون استفاده از عکس background ی که گذاشته بودین)؛ الان که نگاه می کنم میبینم کد من کوتاه تر هستش؛ میشه یه نگاه کوچولو بندازین و بگین آیا موارد مورد نیاز و استانداردها رو رعایت کردم یا نه؟؟
body{
direction:rtl;
font-family:tahoma;
font-size:11px;
padding:0 2px;
}
#menu{
width:400px;
min-height:100px;
}
#menu ul{
list-style:none;
float:right;
}
#menu ul li{
text-align:center;
float:right;
background-color:#333333;
margin:0px 2px;
}
#menu a{
padding:23px 30px;
text-decoration:none;
color:#fff;
display:inline-block;
}
#menu a:hover{
background-color:#999999;
}
نکته: من میتونستم از Line-height استفاده کنم و اتفاقا راحت تر هم بودم، ولی اگه یادتون باشه میگن Line-height به تگ والد وابسته ست فکر کنم و یا به اندازه فونت و اگه در طول یک پروژه یک فونت یا همون تگ والد تغییر اندازه پیدا کنه ، ممکنه تو طراحی ما هم مشکل ساز بشه. نمیدونم تا چه حد درست گفتم خدمتتون. امکانش هست بگید آیا کد من هم خوبه یا نه؟؟
ممنونم از لطفتون دوست عزیزم.
پاسخ: 
سلام
- همان طور که قبلا گفتیم برای طراحی منو و... هیچ استاندارد خاصی وجود ندارد که بخواهیم کد شما را در آن چارچوب بررسی کنیم! در واقع CSS یک سری خاصیت ها و قابلیت های استانداردی دارد که با آن می توان به عناصر وب شکل و استایل بخشید، اینکه با چه روشی به هدف نهایی (در اینجا ایجاد منویی که به درستی کار کند!) دست پیدا کنید، به خودی خود چندان از استاندارد پیروی نمی کند (روش های خاصی به دلایلی مانند رعایت SEO، منعطف بودن، ساده بودن و... به مرور مورد اقبال بیشتر طراحان قرار گرفته اند که طراحی منو با استفاده از ul li یکی از این روش ها است، اما این موضوع با استاندارد بودن متفاوت است).
- در مورد استفاده از line-height هم قبلا توضیح داده شد، دو انتخاب در این مورد وجود دارد:
1- اینکه line-height را به صورت کلی در تگ body یا یک تگ سطح بالا تعریف کنید تا سایر عناصر از آن پیروی کنند (به تجربه این روش معمولا کافی و کاربردی نیست!).
2- اینکه برای هر قسمت، متناسب با نیاز همان قسمت line-height تعریف کنید، البته با رعایت محدود بودن تعداد متفاوت خاصیت های line-height (جهت حفظ یکپارچگی و در عین حال منعطف بودن کار)، در این حالت با هر تغییر کلی اگر هم نیاز به ایجاد تغییراتی در line-height ها باشد، به راحتی قابل اعمال است و در عمل هیچ مشکلی از این بابت معمولا پیش نمی آید!
نویسنده: داوود
زمان: ۰۷:۵۸:۴۵ - تاریخ: ۱۳۹۴/۰۷/۰۹
سلام و صبح زیباتون بخیر باشه؛
آقای مهندس یه سوالی داشتم ازتون عزیز؛ ببینید من سوال آقا میثم رو تو چند تا پست بالاتر دیدم و رفتم به صفحه ای که شما مرقوم کرده و گذاشته بودین. منظورم آدرس:
http://cssdeck.com/labs/bv45bh6p
حالا اگه دعوام نمیکنید بدون اینکه به سورس نگاه کنم رفتم و خودم کدش رو نوشتم؛ اینهم لینک کد:
http://jsfiddle.net/0k96m7uk/
راستش رو بخواین فقط کد مثلث رو تقلب کردم و سایر قسمتهاش رو خودم نوشتم. حالا بعدش که اومدم و سوالای بعدی رو خوندم دیدم انگاری طراح اون کدی که شما فرستاده بودین اومده از after هم استفاده کرده. به احتمال زیاد کسی که اون رو طراحی کرده از من واردتر و با تجربه تر بوده. الان فلسفه وجودی before چیه وقتی که میشه بدون این خاصیت، به شکل مورد نظر دست پیدا کرد؟؟ کلا میشه یه کوچولو راجع به این خاصیت توضیحی بدین.
پاورقی: البته علت اینکه من سعی کردم بدون این خاصیت به شکل مورد نظر دست پیدا کنم، بلد نبودن کامل نحوه استفاده از این خاصیت بود، چون طرز کارش رو فراموش کرده بودم یه خورده ای. :)
پاسخ: 
سلام
در قسمت پاسخ یادداشت های این مطلب در مورد before صحبت شده، اما اینکه چرا از این خاصیت استفاده کنیم بستگی به نیاز طراحی دارد، در عمل فرق خاصی بین روش کار شما و مثال وجود ندارد (نتیجه مهم است، البته با رعایت مختصر نویسی!)، اما دقت کنید که با before می توان عبارت متنی نیز قبل از بلاک ها درج و تکرار کرد که این با استایل نویسی ساده ممکن نیست.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore
نویسنده: داوود
زمان: ۰۸:۴۰:۴۳ - تاریخ: ۱۳۹۴/۰۷/۰۹
سلام مجدد آقای مهندس،
آقای مهندس در خصوص سوال قبلیم که یه مثلث کوچیک ایجاد کردم برای اینکه در زیر کادر اصلی قرار بگیره، طبق کدی که در زیر براتون میذارم اگه ما بخوایم در هر حالتی که اندازه مستطیل یا box اصلیمون بزرگ یا کوچیک میشه، اون مثلث دقیقا تو وسط بیفته از چه ترفندی باید استفاده کنیم؟؟ علیرغم اینکه این مثلث رو والد box کردم، فکر کردم با margin:0 auto شاید بشه به خواسته م برسم ولی انگاری نمیشه. البته در حالتی عرض box افزایش پیدا میکنه، راستش رو بخواین خیلی محسوس نیست که در وسط قرار نگرفته، ولی برای اینکه کارم تمیز باشه سوال کردم. ممنونم ازتون.
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:50px;
background-color:#dddfd7;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bolder;
font-size:12px;
}
#box{
position:relative;
width:auto;
height:15px;
background-color:#4d6476;
text-align:center;
padding:15px;
border-radius:5px;
display:inline;
}
#box span{
color:#ffffff;
}
#triangle-down{
position:absolute;
width:0;
height:0;
border-left:6px solid transparent;
border-right: 6px solid transparent;
border-top: 12px solid #4d6476;
top:100%;
left:40%;
}
</style>
</head>
<body>
<div id="box"><span>DemoDemoDemoDemoDemoDemoDemoDemo</span>
<div id="triangle-down"></div>
</div>
</body>
پاسخ: 
سلام
در قسمت triangle-down مقدار left را %50 قرار دهید! :-)
نویسنده: داوود
زمان: ۱۲:۳۸:۲۴ - تاریخ: ۱۳۹۴/۰۷/۱۹
سلام و وقتتون بخیر استاد گرامی؛
استاد اگه دعوام نمیکنید و نمیگید چرا بقول این بازیگرها فلاش بک میزنم به گذشته، در خصوص نمونه کدی که برای آقا میثم مرقوم فرموده بودین، میخواستم ببینم چرا طراح اون کد نیومده و این دو تا سلکتورها رو یکی بکنه دیگه!! آیا بدلیل اینکه میخواسته حرفه ای کار کنه اینجوری کرده؟ ببینید اینجا رو منظورم هستش.
div.callout {
height: 60px;
width: 200px;
float: left;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 50px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
در صورتی که اگه الان این دو تا رو تبدیل به یکی بکنیم، دقیقا خروجی یکی هست که خوب منطقی هم هستش. ببخشید.
پاسخ: 
سلام
ظاهرا دلیل خاصی برای این حالت وجود ندارد! شاید سهوا یا طی ویرایش های صورت گرفته در نهایت به این شکل تبدیل شده! بعضا در نوشتن اینگونه کدها که صرفا جنبه نمونه و آموزشی دارند دقت لازم در جزئیات صورت نمی گیرد و بیشتر نتیجه نهایی مد نظر است!
نویسنده: محسن
زمان: ۲۲:۳۷:۵۳ - تاریخ: ۱۳۹۴/۱۲/۱۷
سلام استاد
من تو این قالب چطور می تونم تمامی گزینه های منو رو به صورت یک سطر در داخل بلاک عنوان (header.) قرار بدم؟
حذف شد
پاسخ: 
با توجه به بررسی اجمالی، کافی است مقادیر width را برای بلاک با آی دی menu افزایش دهید!
نویسنده: محسن
زمان: ۲۰:۵۳:۴۱ - تاریخ: ۱۳۹۴/۱۲/۲۳
سلام استاد
مقادیر خاصیت background-position رو میشه نام ببرید
پاسخ: 
لطفا به آدرس زیر مراجعه کنید:
https://developer.mozilla.org/samples/cssref/background-position/
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

8 × 4
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...