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

جمعه ۰۵ اردیبهشت ۱۴۰۴

Friday, April 25, 2025 GMT +3:30

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

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

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

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

پس از آماده سازی و ذخیره تصویر با ابعاد مورد نظر کد زیر را مطابق نیازمان با تعریف لینک ها و استایل CSS سفارشی، در هر قسمت از سایت یا وبلاگ که مناسب بود استفاده می نمائیم:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد منو با استفاده از تصویر گرافیکی و CSS</title>
<!-- 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;
}
.clear {
    clear:both;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#">لینک اول</a>
</li>
<li>
<a href="#">لینک دوم</a>
</li>
<li>
<a href="#">لینک سوم</a>
</li>
</ul>
</div>
<div class="clear"></div>
<hr>
برای ایجاد منوهای تعاملی گرافیکی، از خاصیت background-position با مقادیر متفاوت در حالت عادی و hover استفاده کرده ایم.
</body>
</html>

پیش نمایش
توضیح:
- خاصیت display با مقادیر inline-block و همچنین float:right لینک های ما را در یک ردیف کنار هم قرار می دهند که برای ایجاد منوی افقی ضروری است.
- قسمت مربوط به menu a دربرگیرنده استایل CSS موقعیتی است که لینک منو در حالت عادی قرار دارد.
- قسمت مربوط به menu a:hover دربرگیرنده استایل CSS موقعیتی است که لینک منو در حالت فعال قرار می گیرد، یعنی زمانی که کاربر ماوس را روی لینک منو می برد استایل این قسمت استفاده خواهد شد.
- تگ های ul و li عناصر ایجاد کننده لیست در صفحات وب هستند و به لحاظ ساختاربندی و بهینه سازی برای موتورهای جستجو (SEO) شیوه ای مناسب و توصیه شده جهت ساخت منو محسوب می شوند.
- تغییر تصاویر پس زمینه منو در حالت عادی و فعال با خاصیت background-position و مقادیر آن در CSS صورت می گیرد، به این صورت که در حالت عادی موقعیت تصویر پس زمینه ای که قبلا ساخته ایم در قسمت بالا یا همان top است و در حالت فعال موقعیت تصویر پس زمینه در حالت پائین یا bottom قرار می گیرد.
نکته: برای استفاده از این کد در سایت یا وبلاگ باید دقت کنید که ابتدا تصویر گرافیکی را در سرور سایت یا در یک سرویس میزبان فایل آپلود کرده باشید، سپس باید آدرس URL فایل آپلود شده را در قسمت background:url درج کنید.

ایجاد منوهای تعاملی با خاصیت های CSS

علاوه بر استفاده از تصویر گرافیکی و ترکیب آن با CSS برای ساخت منوهای تعاملی، می توانیم با خاصیت های خود CSS نیز به تنهایی چنین منوهایی را ایجاد کنیم، با به روز شدن امکانات مرورگرهای وب و پشتیبانی از خواص جدید و پیشرفته تر CSS این شیوه به مرور جایگزین استفاده از عناصر گرافیکی در صفحات وب شده و طراحان وب سعی می کنند تا حد امکان کمتر از عناصر گرافیکی نظیر تصاویر در طراحی قالب های خود استفاده کنند، به هر صورت خاصیتی که از آن در ایجاد منوهای ساده مبتنی بر CSS استفاده خواهیم کرد linear-gradient است که در 3 CSS معرفی شده، کاربرد این خاصیت را در ایجاد منو در نمونه کد زیر ملاحظه می کنید:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد منو با استفاده از خاصیت های CSS</title>
<!-- 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-color:#CCC;
    background-image:linear-gradient(#CCC, #000);
    text-align:center;
    color:#FFF;
    line-height:60px;
    text-decoration:none;
    margin-top:4px;
}
#menu a:hover {
    background-color:#000;
    background-image:linear-gradient(#000, #CCC);    
    line-height:60px;
    overflow:hidden;
}
.clear {
    clear:both;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#">لینک اول</a>
</li>
<li>
<a href="#">لینک دوم</a>
</li>
<li>
<a href="#">لینک سوم</a>
</li>
</ul>
</div>
<div class="clear"></div>
<hr>
برای ایجاد منوهای تعاملی مبتنی بر CSS، از خاصیت linear-gradient با مقادیر متفاوت در حالت عادی و hover استفاده کرده ایم.
</body>
</html>

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

دسته بندی: آموزش کاربردی » CSS

برچسب ها: HTML - CSS

قبلی »

« بعدی

مطالب بیشتر:
ساخت بلاک شناور عمودی با CSS
حذف اسکرول افقی (Horizontal Scroll) با CSS
چسبیدن فوتر قالب به پائین صفحه با CSS
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
آموزش استفاده از فونت فارسی در وب با CSS

دیدگاه

۲۱ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

میثم

۰۹:۵۵ ۱۳۹۳/۰۳/۲۵

سلام
بله این سایت رو قبلا دیدم
از این کدها هم قبلا استفاده کردم
منتها بخشیش رو متوجه نشدم
اون قسمتی که ::before داره رو میشه توضیح بدید؟
مرسی.

before:: یک selector در CSS3 است که محتوایی را قبل از محتوای موجود در تگ هدف قرار می دهد (قبل در اینجا الزاما به این معنی نیست که حتما باید پیش از محتوای موجود نمایش داده شود، این بستگی به استایل استفاده شده دارد)، این محتوا می تواند به صورت متنی یا به صورت استایل باشد، به طور مثال قسمت callout.top::before در سایت مذکور برای ایجاد مثلث کوچک در زیر بلاک با کلاس callout top است.

میثم

۰۰:۳۸ ۱۳۹۳/۰۳/۲۳

سلام
خسته نباشید
عذر میخوام جای بهتری برای مطرح کردن پیدا نکردم.
با این حال چون مرتبط با css بود اینجا مطرح میکنم.
چطورمیشه با css یک callout ساخت؟
منظور از callout هم همون اشکال مستطیلی هستند که روی یکی از border هاش شکل یه مثلث داره.
و به عنوان "توصیحات بیشتر یا نوشته راهنما" کاربرد داره.
(البته این اشکال مستطیلی گاهی بیضی هستند)
مثل بخش setting شکل زیر:

http://t1.gstatic.com/images?q=tbn:ANd9GcQhFIXBuQY6lieLquBE1mermH4AMNyYcyVy85ILRhZQHKb4GjQthQ

همچنین چطور میشه با css مثلت یا لوذی ساخت.

لطفا به آدرس زیر مراجعه کنید:

http://cssdeck.com/labs/bv45bh6p

همچنین با جستجوی عبارت "CSS callout" نمونه های زیادی در وب خواهید یافت.

پرواز

۰۱:۴۳ ۱۳۹۳/۰۲/۰۹

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

این نوع موارد بستگی به قابلیت های ارائه شده توسط سرویس وبلاگی دارد، البته اکثر سرویس ها قابلیت های زیادی در این زمینه ارائه نمی کنند، اما برای اطمینان باید به راهنمای تگ های اختصاصی (که معمولا در بخش ویرایش قالب) قرار دارد مراجعه کنید، امکانات وبلاگ ها بر اساس اصول تگ های اختصاصی هر سرویس تعریف می شود.

مجید

۲۱:۱۰ ۱۳۹۲/۱۲/۰۸

سلام
خیلی عالیه
خیلی سایت کاملیه
مثال های خوبی دارید
با تشکر

پرویز

۱۹:۴۹ ۱۳۹۲/۰۷/۲۳

سلام, بخشید موارد زیر را به صورت کامل توضیح دهید؟ ضمنا عید بزرگ قربان را به شما و خانواده تان محترمتان تبریک می گویم.

1-line-heigh
2-margin
3-list-style-type
4-overflow
5-display

سپاس فراوان.
لطفا از طرح سوالات کلی خودداری کنید، موارد مطرح شده هر کدام در مباحثی جداگانه و در بخش CSS (و همچنین در وب) آموزش داده شده اند.

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 چند پیکسل بزرگتر شود، نتیجه به این صورتی که گفتید خواهد بود، باید خاصیت های مربوط به طول و ارتفاع در هر دو حالت به یک نحو باشند.

نخست

قبلی

بعدی

آخر

صفحه 2 از 2

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.