یکشنبه ۲۷ خرداد ۱۴۰۳

Sunday, June 16, 2024 GMT +3:30

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

css-menu

از جمله امکانات مورد نیاز هر سایت یا وبلاگی وجود مجموعه ای از لینک ها به صورت منو جهت هدایت کاربران به صفحات مختلف و بخش های اصلی آن سایت یا وبلاگ است، این سبک منوها به لحاظ ظاهری و اصول فنی معمولا می توانند طیفی از خیلی ساده تا پیشرفته و همراه با جلوه های بصری گوناگون را شامل شوند اما در حالت معمول و برای رفع نیازهای عادی استفاده از کدهای ساده 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
related مطالب بیشتر:
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
چسبیدن فوتر قالب به پائین صفحه با CSS
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
آموزش استفاده از فونت فارسی در وب با CSS
مخفی کردن عناصر وب با CSS
دیدگاه
more ۲۱ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
حسین
۱۷:۰۵ ۱۳۹۵/۰۱/۰۲
سلام. اگر کسی با گوشی اش وبلاگ درست کنه پدر گوشی در نمیاد. منظورم اینه بر اثر تایپ متن زیاد روی گوشی ، گوشی خراب نمیشه؟
پاسخ روشنی برای سوالتان وجود ندارد! بستگی به میزان متنی دارد که قصد تایپ آن را دارید، همچنین تاثیر این کار می تواند بین گوشی های مختلف و برندهای مختلف متفاوت باشد، در کل وبلاگ نویسی با گوشی در صورت استفاده عادی، مشکل خاصی ایجاد نمی کند!
mahdi
۱۳:۲۴ ۱۳۹۷/۰۸/۰۶
سلام من منوی کشویی رو طراحی کردم ولی وقتی یک بخش دیگه به سایت اظافه کردم منوی کشویی زیر اون بخش جدید قرار میگیره چطوری میتونم این مشکل رو برطرف کنم؟؟؟
برای اعمال تغییرات سفارشی باید با CSS آشنا باشید، در صورت تمایل آدرس صفحه را درج کنید تا بررسی گردد.
mahdi
۱۷:۲۸ ۱۴۰۰/۰۱/۳۱
سلام استاد عزیز وقتتون بخیر ، استاد عزیز یه منو درست کردم که با opacity و pointer-event کار میکنه ،خیلی خوشحال بودم از درست کردنش ولی رفتم دیدم که در ie11 به پایین pointer-event پشتیبانی نمیشه و خیلی ناراحت شدم :) شما قبلا بهم گفتین که ie9 رو هم باید درنظر بگیرم ولی خیلی سایت های خوب رو میبینم که در ie9 آشوبن و هیچی سر جاش نیست، تا الان هرچی درست کردم ie9 هم کار میکنه ولی اینو نمیدونم چکارش کنم؟ مثل شما با display none block درستش کنم بنظرتون بهتره یا برای ie ها یه استایل جداگونه بنویسم ؟ خودم دوست ندارم استایل جداگونه بنویسم خوشم میاد که همه چی یجور باشه ، بنظر شما چکار کنم ؟
راهی هست که برای ie در فایل css استایل جداگونه بنویسیم؟
راه هایی مثل این استاندارد هستن ؟ یعنی بعدا به مشکل نمیخوره ؟
@media screen and (min-width:0\0) {
.bar-menu .sub-menu {display:none;}
}
با این کد توی ie مشکل حل میشه ، بنظرتون استفاده کنم ازش ؟
خیلی ممنون استاد عزیز موفق باشی
در کل مرورگر IE به خصوص در نسخه های قدیمی مشکلات زیادی دارد و استاندارد نیست، هک هایی هم که در دسترس هستند عموما توسط توسعه دهنده های خود مایکروسافت معرفی شده اند لذا برای استفاده از این تکنیک ها اگر در نسخه های مختلف درست عمل کنند هیچ مشکلی نیست و به اصطلاح کار راه انداز هستند، بد یا خوب کلا از تکنیک های قدیمی دیر دل می کنیم :)
mahdi
۲۰:۰۵ ۱۴۰۰/۰۱/۳۱
سلام استاد عزیز ، شرمنده یه سوال میپرسم هی تند تند پیام میزارم ، این راهو پیدا کردم بنظرم بهتره و همه جا میشه ازش استفاده کنم ، نظر شما چیه ؟
برای ie9
<!--[if IE 9]> <html class="lt-ie10"> <![endif]-->
برای ie10
document.documentElement.setAttribute('data-useragent', navigator.userAgent);
و به شکل پایین ازشون استفاده میکنم
.lt-ie10 .bar-menu .sub-menu {
display:none;
}
html[data-useragent*='MSIE 10.0'] .bar-menu .sub-menu {
display:none;
}
اینطوری در ie11 به بعد کد مثل بقیه مرورگرها نمایش داده میشه ، در حالت قبلی که گفتم در همه مرورگرهای ie کد فرق میکرد نظر شما چیه ، راه بهتری هست؟
خیلی ممنون استاد عزیز
اگر امکانی در نسخه های جدید پشتیبانی می شود استفاده از هک و استایل اختصاصی برای سایر نسخه ها باشد بهتر است، البته در این روش از جاوا اسکریپت استفاده شده که سادگی روش اول را ندارد اما در کل در 99 درصد موارد کاربردی است، در حال حاضر استفاده از IE خیلی زیاد نیست و می توانید هر کدام از روش ها را با اولویت نمایش صحیح امکانات منو انتخاب کنید.
۱۳:۳۶ ۱۴۰۲/۰۶/۳۱
درود برشما
من تو گوگل که اسم سایت حراجستون را سرچ می کنم اسم دامنه نوشته شده به انگلیسی کدهای زیادی هم استفاده کردم اما درست نشد
این حالت به الگوریتم های گوگل مربوط می شود و معمولا به این دلیل است که سایت مورد نظر هنوز سابقه و بازدید کافی در موتور جستجوی گوگل کسب نکرده است، رفع مستقیم این نحوه نمایش از دست مدیران سایت خارج بوده و باید با بهبود بازدید و رعایت دیگر اصول مروبط به SEO به مرور اصلاح شود.
فاطمه سیداحمدی
۱۸:۱۸ ۱۴۰۲/۰۷/۰۲
با سلام و خسته نباشید
من میخوام با استفاده از جاوااسکریپت یه کدی داشته باشم که وقتی کاربر چیزی رو از توی سایت من کپی می کنه موقع پست کردن نزدیک ترین متن به اون چیزی که کپی کرده رو بهش پیشنهاد بده یعنی یه آرایه داشته باشم که با استفاده از اون آرایه متن پیشنهادی رو بهش بده
با تشکر
اگر با مثال سوالتان را مطرح می کردید ارائه پاسخ ساده تر بود اما در کل به نظر برای کسب نتیجه ایده آل نیاز به نوشتن الگوریتم اختصاصی دارید که فرآیندی پیچیده و زمانبر است، چون متن کپی شده از سایت می تواند شامل یک یا چند کلمه باشد و پیدا کردن نزدیکترین متن (از بین متن های موجود) به کل کلمات کپی شده نیازمند ایجاد هوش منطقی و قدرت تحلیل و تصمیم گیری هر چند در مقیاس کوچک است که در مقادیر آرایه جستجو کرده، رتبه بندی را محاسبه و در نهایت نزدیکترین نتیجه را نمایش دهد.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
4 × 2
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
پرتو
سلام خوبید؟ خسته نباشید ببخشید مزاحم میشم ممنون از جوابتون راستش بعضی وقتا از بس سوالاتم زیاده روم نمیشه ازتون بپرسم مثل امشب که چیکار...
۱۴۰۳/۰۳/۱۳

پرتو
سلام خوبین؟ خسته نباشید یه سوال من منوی سمت راست قالبم نوشته هاش چسبیده به بردر باید چیکار کنم که درست شه؟ یعنی منظورم اینکه...
۱۴۰۳/۰۳/۰۹

پرتو
سلام خوبید؟ بلاکفا باز دچار مشکل شده یا فقط برای من دچار مشکل شده؟ منظورم اینکه خیلی دیر باز میشه و فقط برای فایرفاکس هم...
۱۴۰۳/۰۳/۰۱

سعیدی
سلام می تونید اینو اصلاح کنید؟ چون من با توضیحات شما یاد نگرفتم خیلی ممنون اگه یکبار اصلاح کنید واسه بعد یاد...
۱۴۰۳/۰۲/۲۲

سعیدی
دست شما درد نکنه وقتی اینطوری تغییر میدم و به class می نویسم کار نمی کنه و ارور میده
۱۴۰۳/۰۲/۲۱

سعیدی
دست شما درد نکنه خیلی خوب بود این یکی رو چطوری فراخوانی کنم؟ این واسه مناسبت هاست خیلی ممنون
۱۴۰۳/۰۲/۱۹

سعیدی
با سلام آیا می شه این تابع رو بصورت class نوشت؟ میخوام وقتی کد ملی میدم با این تابع فراخوانی بشه و شهر...
۱۴۰۳/۰۲/۱۹

پرتو
مگه شما دارین اموزشش رو؟ آدرسش رو میزارید؟ یا اگر سایتی رو میشناسید که آموزش داده باشه معرفی کنید ممنون میشم من خیلی گشتم توی...
۱۴۰۳/۰۲/۱۸

پــرتو
سلام خوبید ؟ خسته نباشید گوشی پدرم شیاومی هست ایمیلمو ثبت کردم داخلش بعد می خواستم حذفش کنم نمیشد می گفت همه داده های توی...
۱۴۰۳/۰۲/۱۶

vip
خیلی ممنونم از شما خیلی عالی شد میشه مثل تبلیغ بلاگفا باشه یعنی زیر صفحه نمایش داده بشه و صفحه رو سیاه نکنه که تا...
۱۴۰۳/۰۲/۰۵

vip
با سلام و خسته نباشید استاد چند وقت پیش این کد رو از شما گرفتم این کد خیلی خوبه و کاربر رو هم...
۱۴۰۳/۰۲/۰۴

پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم یه سوال داشتم می خواستم بپرسم که چرا بلاگفا باز نمیشه برام؟ کلا هر وبلاگی که مربوط به بلاگفا...
۱۴۰۳/۰۲/۰۲
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.