آموزش برنامه نویسی و مهارتهای وب
شنبه ۱۱ آذر ۱۴۰۲
Saturday, December 2, 2023 GMT +3:30
Saturday, December 2, 2023 GMT +3:30
ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
از جمله امکانات مورد نیاز هر سایت یا وبلاگی وجود مجموعه ای از لینک ها به صورت منو جهت هدایت کاربران به صفحات مختلف و بخش های اصلی آن سایت یا وبلاگ است، این سبک منوها به لحاظ ظاهری و اصول فنی معمولا می توانند طیفی از خیلی ساده تا پیشرفته و همراه با جلوه های بصری گوناگون را شامل شوند اما در حالت معمول و برای رفع نیازهای عادی استفاده از کدهای ساده HTML به همراه استایل CSS کافی خواهد بود، اگر چه برای سازگاری بیشتر در کنار کدهای CSS از JavaScript نیز استفاده می شود اما در این آموزش، شیوه ساخت منویی ساده، سبک و در عین حال زیبا و سازگار را خواهیم گفت که می تواند حداقل به عنوان سرآغازی برای طرح های بزرگتر مورد استفاده قرار گیرد، از منوهای CSS می توانید در سربرگ وبلاگ یا سایتتان با هدف زیبا سازی یا تسهیل دسترسی استفاده کنید، برای راحتی و جلوگیری از پیچیده شدن موضوع، آموزش همراه توضیح و مثال آنلاین است.
ایجاد منوهای تعاملی با تصویر گرافیکی و CSS
احتمالا منوهایی را دیده اید که با بردن ماوس روی آنها به رنگ یا حالتی متمایز تغییر می کنند، به این سبک منوها در اصطلاح تعاملی یا Interactive گفته می شود که در وب به دو روش استفاده از یک تصویر گرافیکی به همراه استایل CSS یا استفاده صرف از خاصیت های CSS ساخته می شوند، در گام اول روش استفاده از تصویر گرافیکی به همراه خاصیت های CSS توضیح داده خواهد شد و در قسمت دوم آموزش، روش استفاده صرف از استایل CSS را مرور خواهیم کرد.
ابتدا یک تصویر با ارتفاع 120 پیکسل (که از دو نیمه ی 60 پیکسلی تشکیل شده) در برنامه های گرافیکی مانند فتوشاپ ایجاد می کنیم (عرض تصویر اهمیت چندانی ندارد و می تواند دلخواه باشد، برای آموزش حاضر آن را 60 پیکسل یا کمتر در نظر بگیرید)، از آنجایی که برای ایجاد منوهای تعاملی از خاصیت background-position در CSS با مقادیر متفاوت در حالت عادی و hover استفاده خواهیم کرد، لذا تصویر ما باید در دو نیمه 60 پیکسلی خود (بالا و پائین) دارای دو ویژگی بصری متفاوت باشد تا هنگامی که در حالت فعال قرار می گیرد متمایز به نظر برسد، به عبارت ساده تر یعنی زمانی که نشانه گر ماوس را روی منو می بریم شکل آن بر اساس سلیقه و نیاز ما تغییر کند تا کاربر متوجه شود که این منو در حالت فعال قرار گرفته است، نمونه تصویر اولیه می تواند به شکل زیر باشد:
پس از آماده سازی و ذخیره تصویر با ابعاد مورد نظر کد زیر را مطابق نیازمان با تعریف لینک ها و استایل 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
قبلی »
مطالب بیشتر:ساخت منوی کشویی با تگ ul li و CSS
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
ساخت بلاک شناور عمودی با CSS
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
دیدگاه
۲۱ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.حسین
۱۷:۰۵ ۱۳۹۵/۰۱/۰۲
سلام. اگر کسی با گوشی اش وبلاگ درست کنه پدر گوشی در نمیاد. منظورم اینه بر اثر تایپ متن زیاد روی گوشی ، گوشی خراب نمیشه؟
پاسخ روشنی برای سوالتان وجود ندارد! بستگی به میزان متنی دارد که قصد تایپ آن را دارید، همچنین تاثیر این کار می تواند بین گوشی های مختلف و برندهای مختلف متفاوت باشد، در کل وبلاگ نویسی با گوشی در صورت استفاده عادی، مشکل خاصی ایجاد نمی کند!
mahdi
۱۳:۲۴ ۱۳۹۷/۰۸/۰۶
سلام من منوی کشویی رو طراحی کردم ولی وقتی یک بخش دیگه به سایت اظافه کردم منوی کشویی زیر اون بخش جدید قرار میگیره چطوری میتونم این مشکل رو برطرف کنم؟؟؟
برای اعمال تغییرات سفارشی باید با CSS آشنا باشید، در صورت تمایل آدرس صفحه را درج کنید تا بررسی گردد.
mahdi
۱۷:۲۸ ۱۴۰۰/۰۱/۳۱
سلام استاد عزیز وقتتون بخیر ، استاد عزیز یه منو درست کردم که با opacity و pointer-event کار میکنه ،خیلی خوشحال بودم از درست کردنش ولی رفتم دیدم که در ie11 به پایین pointer-event پشتیبانی نمیشه و خیلی ناراحت شدم :) شما قبلا بهم گفتین که ie9 رو هم باید درنظر بگیرم ولی خیلی سایت های خوب رو میبینم که در ie9 آشوبن و هیچی سر جاش نیست، تا الان هرچی درست کردم ie9 هم کار میکنه ولی اینو نمیدونم چکارش کنم؟ مثل شما با display none block درستش کنم بنظرتون بهتره یا برای ie ها یه استایل جداگونه بنویسم ؟ خودم دوست ندارم استایل جداگونه بنویسم خوشم میاد که همه چی یجور باشه ، بنظر شما چکار کنم ؟
راهی هست که برای ie در فایل css استایل جداگونه بنویسیم؟
راه هایی مثل این استاندارد هستن ؟ یعنی بعدا به مشکل نمیخوره ؟
خیلی ممنون استاد عزیز موفق باشی
راهی هست که برای ie در فایل css استایل جداگونه بنویسیم؟
راه هایی مثل این استاندارد هستن ؟ یعنی بعدا به مشکل نمیخوره ؟
@media screen and (min-width:0\0) {
.bar-menu .sub-menu {display:none;}
}خیلی ممنون استاد عزیز موفق باشی
در کل مرورگر 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;
}خیلی ممنون استاد عزیز
اگر امکانی در نسخه های جدید پشتیبانی می شود استفاده از هک و استایل اختصاصی برای سایر نسخه ها باشد بهتر است، البته در این روش از جاوا اسکریپت استفاده شده که سادگی روش اول را ندارد اما در کل در 99 درصد موارد کاربردی است، در حال حاضر استفاده از IE خیلی زیاد نیست و می توانید هر کدام از روش ها را با اولویت نمایش صحیح امکانات منو انتخاب کنید.
۱۳:۳۶ ۱۴۰۲/۰۶/۳۱
درود برشما
من تو گوگل که اسم سایت حراجستون را سرچ می کنم اسم دامنه نوشته شده به انگلیسی کدهای زیادی هم استفاده کردم اما درست نشد
من تو گوگل که اسم سایت حراجستون را سرچ می کنم اسم دامنه نوشته شده به انگلیسی کدهای زیادی هم استفاده کردم اما درست نشد
این حالت به الگوریتم های گوگل مربوط می شود و معمولا به این دلیل است که سایت مورد نظر هنوز سابقه و بازدید کافی در موتور جستجوی گوگل کسب نکرده است، رفع مستقیم این نحوه نمایش از دست مدیران سایت خارج بوده و باید با بهبود بازدید و رعایت دیگر اصول مروبط به SEO به مرور اصلاح شود.
فاطمه سیداحمدی
۱۸:۱۸ ۱۴۰۲/۰۷/۰۲
با سلام و خسته نباشید
من میخوام با استفاده از جاوااسکریپت یه کدی داشته باشم که وقتی کاربر چیزی رو از توی سایت من کپی می کنه موقع پست کردن نزدیک ترین متن به اون چیزی که کپی کرده رو بهش پیشنهاد بده یعنی یه آرایه داشته باشم که با استفاده از اون آرایه متن پیشنهادی رو بهش بده
با تشکر
من میخوام با استفاده از جاوااسکریپت یه کدی داشته باشم که وقتی کاربر چیزی رو از توی سایت من کپی می کنه موقع پست کردن نزدیک ترین متن به اون چیزی که کپی کرده رو بهش پیشنهاد بده یعنی یه آرایه داشته باشم که با استفاده از اون آرایه متن پیشنهادی رو بهش بده
با تشکر
اگر با مثال سوالتان را مطرح می کردید ارائه پاسخ ساده تر بود اما در کل به نظر برای کسب نتیجه ایده آل نیاز به نوشتن الگوریتم اختصاصی دارید که فرآیندی پیچیده و زمانبر است، چون متن کپی شده از سایت می تواند شامل یک یا چند کلمه باشد و پیدا کردن نزدیکترین متن (از بین متن های موجود) به کل کلمات کپی شده نیازمند ایجاد هوش منطقی و قدرت تحلیل و تصمیم گیری هر چند در مقیاس کوچک است که در مقادیر آرایه جستجو کرده، رتبه بندی را محاسبه و در نهایت نزدیکترین نتیجه را نمایش دهد.
صفحه 2 از 2آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.معراج
سلام من در قدیم سیستم مدیریت محتوا استفاده میکردن که وقتی متغیر بدون محتوا ایجاد میکردی ارور نمیداد و نیازی هم به @ قبلش...۱۴۰۲/۰۹/۰۸
ابوالفضل
سلام استاد وقتتون بخیر مثل همیشه من با یک مشکل بزرگ مواجه شدم و مجدد مزاحمتون میشم من به یک regex نیاز دارم تا...۱۴۰۲/۰۹/۰۶
بهاره هوشمندی
استاد ببخشید وقتی یه متن طولانی رو باهاش چک می کنم اگه تگ span و b داشته باشه چون تگ رو نمی بنده تا...۱۴۰۲/۰۹/۰۲
بهاره هوشمندی
با سلام استاد بزرگوار از لطف و محبت شما بسیار ممنون و سپاسگزارم خیلی عالی بود اینطوری خیلی خوب شد دستتون درد نکنه...۱۴۰۲/۰۹/۰۱
بهاره هوشمندی
با سلام و از شما من این کد رو امتحان کردم واسه متن عادی خوبه و جواب میده ولی واسه متن طولانی که رنگ...۱۴۰۲/۰۹/۰۱
بهاره هوشمندی
با سلام و خسته نباشید استاد بزرگوار آیا راهی وجود داره تفاوت دو تا متن رو با php پیدا کرد؟ مثلا با...۱۴۰۲/۰۸/۳۰
مهراد
سلام در جدول موقعی که عکس رو با php فراخوانی میکنم نمیاره تصویر عکس. لطفا راهنمایی کنید. ۱۴۰۲/۰۸/۱۷
بهاره هوشمندی
با سلام و درود استاد بزرگوار یه مشکل برام پیش اومده توی مطالب ارسالی سایت محتوایی به این صورت به متن ها اضافه شده...۱۴۰۲/۰۸/۱۷
بهاره هوشمندی
با تشکر از شما استاد گرامی پس کد رو باید اینطوری وارد کنم؟ اینطوری واسه من کار می کنه سپاسگزارم از شما...۱۴۰۲/۰۸/۰۹
بهاره هوشمندی
با سلام از لطف و محبت شما بسیار ممنون و سپاسگزارم دست شما درد نکنه لینکهای شما رو بررسی کردم یعنی باید کل کدهایی...۱۴۰۲/۰۸/۰۸
بهاره هوشمندی
با سلام و تشکر از شما من توی یه صفحه خالی هم امتحان کردم و یه amar.html هم توی پوشه root هاست ساختم بازم...۱۴۰۲/۰۸/۰۸
بهاره هوشمندی
با سلام با تشکر از شما من کاری که گفتید رو انجام دادم ولی بازم صفحه لاگین رو که میزنم باز آمارگیر اونو...۱۴۰۲/۰۸/۰۸
بهاره هوشمندی
سلام خسته نباشید من یه کد واسه آمارگیر دارم که جاو هست از سایت وبگذر بعد توی همه صفحه ها فعاله چطوری می تونم...۱۴۰۲/۰۸/۰۷
hossein
سلام وقت شما بخیر کدی هست که بشود با کمک اون، به محض حذف محصول توسط فروشندگان (افزونه دکان)، تصاویر محصول نیز حذف شوند...۱۴۰۲/۰۷/۲۵
hossein
سلام وقت شما بخیر ممنون میشم اگه راهنماییم کنید میخوام کدی در اختیارم بزارید که بتونه برام سقف درصد مدیر را تعیین کنه توی...۱۴۰۲/۰۷/۱۴
در انتظار بررسی: ۲
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.