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

پنجشنبه ۰۴ اردیبهشت ۱۴۰۴

Thursday, April 24, 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
چسبیدن فوتر قالب به پائین صفحه با CSS
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
مخفی کردن عناصر وب با CSS
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS

دیدگاه

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

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

فاطمه سیداحمدی

۱۸:۱۸ ۱۴۰۲/۰۷/۰۲

با سلام و خسته نباشید
من میخوام با استفاده از جاوااسکریپت یه کدی داشته باشم که وقتی کاربر چیزی رو از توی سایت من کپی می کنه موقع پست کردن نزدیک ترین متن به اون چیزی که کپی کرده رو بهش پیشنهاد بده یعنی یه آرایه داشته باشم که با استفاده از اون آرایه متن پیشنهادی رو بهش بده
با تشکر

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

رضا جهانیان

۱۳:۳۶ ۱۴۰۲/۰۶/۳۱

درود برشما
من تو گوگل که اسم سایت حراجستون را سرچ می کنم اسم دامنه نوشته شده به انگلیسی کدهای زیادی هم استفاده کردم اما درست نشد

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

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 خیلی زیاد نیست و می توانید هر کدام از روش ها را با اولویت نمایش صحیح امکانات منو انتخاب کنید.

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

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

سلام من منوی کشویی رو طراحی کردم ولی وقتی یک بخش دیگه به سایت اظافه کردم منوی کشویی زیر اون بخش جدید قرار میگیره چطوری میتونم این مشکل رو برطرف کنم؟؟؟

برای اعمال تغییرات سفارشی باید با CSS آشنا باشید، در صورت تمایل آدرس صفحه را درج کنید تا بررسی گردد.

حسین

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

سلام. اگر کسی با گوشی اش وبلاگ درست کنه پدر گوشی در نمیاد. منظورم اینه بر اثر تایپ متن زیاد روی گوشی ، گوشی خراب نمیشه؟

پاسخ روشنی برای سوالتان وجود ندارد! بستگی به میزان متنی دارد که قصد تایپ آن را دارید، همچنین تاثیر این کار می تواند بین گوشی های مختلف و برندهای مختلف متفاوت باشد، در کل وبلاگ نویسی با گوشی در صورت استفاده عادی، مشکل خاصی ایجاد نمی کند!

محسن

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

سلام استاد
مقادیر خاصیت background-position رو میشه نام ببرید

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

https://developer.mozilla.org/samples/cssref/background-position/

محسن

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

سلام استاد
من تو این قالب چطور می تونم تمامی گزینه های منو رو به صورت یک سطر در داخل بلاک عنوان (header.) قرار بدم؟

حذف شد

با توجه به بررسی اجمالی، کافی است مقادیر width را برای بلاک با آی دی menu افزایش دهید!

داوود

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

سلام و وقتتون بخیر استاد گرامی؛
استاد اگه دعوام نمیکنید و نمیگید چرا بقول این بازیگرها فلاش بک میزنم به گذشته، در خصوص نمونه کدی که برای آقا میثم مرقوم فرموده بودین، میخواستم ببینم چرا طراح اون کد نیومده و این دو تا سلکتورها رو یکی بکنه دیگه!! آیا بدلیل اینکه میخواسته حرفه ای کار کنه اینجوری کرده؟ ببینید اینجا رو منظورم هستش.

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;*/
}

در صورتی که اگه الان این دو تا رو تبدیل به یکی بکنیم، دقیقا خروجی یکی هست که خوب منطقی هم هستش. ببخشید.

ظاهرا دلیل خاصی برای این حالت وجود ندارد! شاید سهوا یا طی ویرایش های صورت گرفته در نهایت به این شکل تبدیل شده! بعضا در نوشتن اینگونه کدها که صرفا جنبه نمونه و آموزشی دارند دقت لازم در جزئیات صورت نمی گیرد و بیشتر نتیجه نهایی مد نظر است!

داوود

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

سلام مجدد آقای مهندس،
آقای مهندس در خصوص سوال قبلیم که یه مثلث کوچیک ایجاد کردم برای اینکه در زیر کادر اصلی قرار بگیره، طبق کدی که در زیر براتون میذارم اگه ما بخوایم در هر حالتی که اندازه مستطیل یا 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 قرار دهید! :-)

داوود

۰۷:۵۸ ۱۳۹۴/۰۷/۰۹

سلام و صبح زیباتون بخیر باشه؛
آقای مهندس یه سوالی داشتم ازتون عزیز؛ ببینید من سوال آقا میثم رو تو چند تا پست بالاتر دیدم و رفتم به صفحه ای که شما مرقوم کرده و گذاشته بودین. منظورم آدرس:

http://cssdeck.com/labs/bv45bh6p

حالا اگه دعوام نمیکنید بدون اینکه به سورس نگاه کنم رفتم و خودم کدش رو نوشتم؛ اینهم لینک کد:

http://jsfiddle.net/0k96m7uk/

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

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

https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore

داوود

۱۱:۵۱ ۱۳۹۴/۰۷/۰۶

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

فرزاد

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

سلام ضمن تشکر از شما که این نکات آموزنده رو در سایتتون قراردادین , من برای منوها در اکسپلورر سوال داشتم چون فایل ie6 الی ie9 رو از سایت

http://www.iecss.com

دانلود و در صفحه جایگذاری کردم و مانند سورس برنامتون هم قرار دادم
همین مثال شما رو در اکسپلورر منوهاشو باز نمیکنه ولی در google chrome باز میکنه
فکر میکنم یک مشکل از کمبود کد باشه اگر ممکنه کد اکسپلورر برای همین مثال منو ها در سایت بذارین تا برای همه اکسپلوررها کامل نمایش بده

دوست گرامی در این مثال منوی بازشو وجود ندارد! این آموزش صرفا یک منوی ساده و سبک با CSS را شامل می شود که در تمام مرورگرها به خوبی عمل می کند، لطفا اگر آموزش خاصی مد نظرتان است، به همان مطلب اشاره کنید.

محسن

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

سلام خسته نباشید
یه سوال علت اورن کد حذف اسکرول عمودی

overflow:hidden;

تو کد منو چیه
من این کدا برداشتم تغییری نکرد

این خاصیت ضرری ندارد! فایده آن این است که به فرض اگر متن منو خیلی زیاد باشد، میزان اضافه مخفی می شود و موجب به هم ریخته شدن منو نمی شود.

ضحی

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

سلام خسته نباشید. من بارها از مطالب سایتتون استفاده کردم. اما الان یه سوال برام پیش اومده. منویی که توی این آدرس

http://www.doctorsalamat.com/experts.aspx

استفاده شده با css طراحی شده؟
اصلا چه جوری میشه همچین منویی ایجاد کرد؟
با توجه به اینکه من نیمه مبتدی هستم...
ممنون

اینگونه منوها معمولا با استفاده از جاوا اسکریپت یا جی کئوری + CSS ساخته می شوند، نمونه های زیادی در وب به صورت آماده وجود دارد که باید (به فارسی و انگلیسی) جستجو کنید.

نخست

قبلی

بعدی

آخر

صفحه 1 از 2

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