سبد خرید (0)

تبلیغات

ساخت یک نوار هدایتی در CSS

نسخه نمایشی  Navigation Bar (نوار هدایتی)


Navigation Bar

Wiki

برای استفاده آسان، وجود Navigation Bar یک بخش بسیار مهم برای وب سایت ها محسوب می شود.

با CSS می توان، منوهای خسته کننده HTML را به Navigation Barهای زیبا تبدیل کرد.


Navigation Bar = لیستی از لینک ها

Wiki

navigation bar یا نوار هدایتی، اساساً لیستی از لینک هاست که با استفاده از عناصر <ul> و <li> ساخته می شوند: 

مثال (ساخت یک نوار هدایتی در CSS)

<ul>
<li><a href="/default.asp">Home</a></li>
<li><a href="/news.asp">News</a></li>
<li><a href="/contact.asp">Contact</a></li>
<li><a href="/about.asp">About</a></li>
</ul>
خودتان امتحان کنید »

حالا اجازه دهید تا bulletها ، margin و padding را از لیستمان حذف کنیم:

مثال (ساخت یک نوار هدایتی در CSS)

ul
{
list-style-type:none;
margin:0;
padding:0;
}
خودتان امتحان کنید »

توضیح مثال بالا:

  • list-style-type:none - علامت ها یا bulletها را حذف می کند، یک navigation bar احتیاجی به علامتگذاری لیست ها ندارد.
  • خصوصیت margin و padding را با مقدار 0 تنظیم می کنیم، تا تنظیمات پیشفرض مرورگر را حذف کنیم.

کد مثال بالا یک کد استاندارد است که هم در لینک های افقی و هم در لینک های عمودی استفاده می شود.


Navigation Bar عمودی

Wiki

برای ساخت یک Navigation Bar عمودی با توجه به کد بالا، فقط کافی است که برای گزینشگر a ، خصوصیت display را با مقدار "block" تنظیم کنیم:

مثال (ساخت یک نوار هدایتی در CSS)

a
{
display:block;
width:60px;
background-color:#dddddd;
}
خودتان امتحان کنید »

توضیح مثال بالا:

  • با تنظیم خصوصیت display با مقدار "block" تمام تگ های <a> در یک خط جداگانه قرار می گیرند و تمام فضای لینک قابل کلیک کردن است (نه فقط متن لینک)، و این به ما اجازه می دهد تا عرض لینک را مشخص کنیم.
  • عناصر Block به صورت پیشفرض تمام عرض قابل دسترس را اشغال می کنند. ما می توانیم مشخص کنیم که 60 پیکسل از یک خط را اشغال کند.

برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar عمودی

توجه: همیشه عرض تگ <a> استفاده شده در navigation bar را مشخص کنید. اگر انجام این کار را فراموش کنید، IE6 یک نتیجه غیرمنتظره تولید خواهد کرد.


Navigation Bar افقی

Wiki

دو راه برای ساخت Navigation Bar افقی وجود دارد. استفاده از لیست های inline یا floating

هر دو روش بخوبی کار خواهد کرد، اما اگر می خواهید لینک ها، اندازه یکسان داشته باشند باید از روش floating استفاده کنید.

لیست های inline

یک راه برای ساخت navigation bar افقی این است که عناصر <li> را به صورت inline مشخص کنیم:

مثال (ساخت یک نوار هدایتی در CSS)

li
{
display:inline;
}
خودتان امتحان کنید »

توضیح مثال بالا:

  • به صورت پیشفرض یک عنصر <li> تمام فضای یک خط را اشغال می کند، با تنظیم خصوصیت display با مقدار "inline" شکستگی خط قبل و بعد هر لیست حذف خواهد شد، بنابراین تمام عناصر <li> در یک خط نمایش داده می شوند.

برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar افقی

Floating

در مثال بالا، لینک ها عرض های متفاوتی دارند.

برای اینکه تمام لینک ها عرض یکسان داشته باشند، عناصر <li> را float می کنیم و عرض عناصر <a> را تنظیم می کنیم:

مثال (ساخت یک نوار هدایتی در CSS)

li
{
float:left;
}
a
{
display:block;
width:60px;
}
خودتان امتحان کنید »

توضیح مثال بالا:

  • در گزینشگر li با تنظیم خصوصیت float با مقدار "left" تمام عناصر <li> در کنار یکدیگر (در یک خط) قرار می گیرند.
  • در گزینشگر a با تنظیم خصوصیت display با مقدار "block" تمام عناصر <a> در یک خط جداگانه قرار می گیرند و تمام فضای لینک قابل کلیک کردن است (نه فقط متن لینک)، و این به ما اجازه می دهد تا عرض لینک را مشخص کنیم.
  • عناصر Block به صورت پیشفرض تمام عرض قابل دسترس را اشغال می کنند. ما می توانیم مشخص کنیم که 60 پیکسل از یک خط را اشغال کند.

برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar افقی


مثال

مثال - خودتان امتحان کنید

نحوه ساخت یک منوی دو سطحی

در این مثال نحوه ساخت یک منوی دو سطی یا کشویی نشان داده شده است.

دیدگاه‌ها  

+2 # Guest 1395-09-21 18:25
سلام.
من در آخرین مثال : نحوه ساخت منوی دوسطحی در نحوه کار display با مقدار inline-block یه مقدار گیج شدم. میشه یه بار دیگه کاربرد این مقدار inline-block رو توضیح بدین یعنی چی؟
ممنون میشم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1395-09-22 16:19
سلام . برای اینکه بتونیم چند تا جعبه را گروه بندی کنیم( یا به عبارت دیگر شبکه بندی کنیم) از دستور inline-block استفاده می کنیم. به مثال های درون این لینک زیر دقت کنید تا کاربرد اون رو به خوبی متوجه شوید:
learnlayout.com/inline-block.html
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهدی دلاور 1395-09-25 00:55
سلام. با تشکر از جوابتون و لینک خوبی که ارائه کردین:
از لینکی که داده بودین من این نتیجه رو گرفتم که عناصری با خاصیت inline-block علاوه بر اینکه میتوانند به مانند عناصر inline رفتار نموده و در یک خط و پشت سر هم قرار گیرند ، میتوانند به مانند عناصر block از خصوصیت padding استفاده نموده و حاشیه قابل کلیک کردن اطراف متن رو هم افزایش دهند و یا به آنها عرضی دلخواه داد. امیدوارم درست متوجه شده باشم.
راستش من تا موضعی رو به طور کامل هضم نکنم نمیتونم بیخیالش بشم. حالا دستور overflow:hidden رو نمیفهمم. یعنی اینطور یادمه که این دستور مقادیر سر ریز شده از ظرفش رو باید مخفی میکرد. اما اینجا وقتی همه خطوط استایل دهی رو به غیر از 6 خط اول ( Ul و li ) ، رو غیر فعال میکنم میبینم که این دستور محتویات رو از جلوی منو را برداشته و به خط پایین منتقل میکنه. خوب منوی ما که سر ریز نداشت. و تازه متون بعد از که جزئی از ظرف منو محسوب نمیشدند که این دستور اونها رو سر ریز عنصر ul به حساب بیاره. این دقیقا چه جوری عمل کرده؟
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-09-28 08:57
سلام
تا اینجا درست فرمودید اما بقیه رو متوجه نشدم:
عناصری با خاصیت inline-block علاوه بر اینکه میتوانند به مانند عناصر inline رفتار نموده و در یک خط و پشت سر هم قرار گیرند ، میتوانند به مانند عناصر block رفتار کنند.

در مورد دستور overflow:hidden خیلی واضح هست. فرض کنید یک متن با طول بسیار زیاد رو می خواهیم در یک جعبه ی بسیار کوچک نمایش دهیم. اگر بنویسیم overflow:scroll این جعبه اسکرول پیدا می کند و کل متن رو نمایش می دهد. اما اگر بنویسیم overflow:hidden متن اضافه در جعبه نمایش داده نخواهد شد. به مثال زیر توجه کنید:
www.w3schools.com/cssref/playit.asp?filename=playcss_overflow&preval=hidden
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # hhjkhk 1395-07-21 14:44
داداش با اینا چطوری میخوایم پول دربیاریم اخه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-07-21 16:31
با سلام.
شما یاد بگیری، راه پول در‌آوردنش هم پیدا میکنی.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # hhjkhk 1395-07-24 21:35
دقیقا مشکلم پیدا کردن راهشه دیگه داداش.........
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهرداد صلاحی 1395-07-24 22:41
خب ببین دوست عزیز.
اگه شما html و css‌ و ... رو بلد باشی، میتونی بری جایی شاغل بشی و یا اینکه خودت یه سایت بزنی و یه ایده توش پیاده کنی و کسب درآمد کنی.
البته مسلما اولش کمی سخته و شاید نتونی اونطور که میخوای بهره ببری.

اگر این دانش‌ها رو بلدی که بهتره یه جا مشغول به کاری بشی تا تجربه کسب کنی. اگر هم بلد نیستی، ابتدا باید دانش لازم رو کسب کنی.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+10 # saeed khan 1394-05-17 22:54
اقای پهلوان حرف نداری دمت گرم خیلی عالی بود این همه سایت برای آموزش هست ولی سایت شما تکه تک
خیر ببینی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # amirkain 1394-04-15 22:36
یک راه دیگر هم وجود دارد برای منوی افقی
به عناصر li درون ul ؛display:inline -bloke قرار دهید؛خیلی راحت تره
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # raghb 1393-12-16 13:43
در مثال آخر، چرا خصوصیت overflow را برای ul نوشتید
اگر مخفی نشود سر ریز آن چه مشکلی پیش میاد؟
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-12-16 14:25
خصوصیت overflow به ما این اطمینان را می دهد که طول تمام لینک ها یکسان خواهد بود. بعنوان مثال اگر بجای کلمه ی "Home" از "My WebSite Home Page" استفاده کنید، به قول شما با توجه به طول هر منو یعنی 120 پیکسل، سرریز مخفی خواهد شد و به این ترتیب طول تمام لینک ها یکسان خواهد بود.
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
white -space: nowrap;
}
خصوصیت متمایز شده در بالا را اضافه و کم کرده و نتیجه را مشاهده فرمایید.
برای کسب اطلاعات بیشتر در مورد خصوصیت white-space به لینک زیر مراجعه فرمایید:
www.beyamooz.com/cssref/227-css-properties/881-white-space
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیرکیان 1393-11-05 16:02
کدام روش برای نوشتن لیست های افقی بهتر است
1-floating
2-displsy inline
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-11-06 07:35
هر دو روش، نتیجه یکسانی را در بر خواهد داشت، اما توجه فرمایید که اگر از خصوصیت display استفاده نمودید، طبق استانداردها نمی توانید، داخل یک عنصر inline، عناصر از نوع block مانند div قرار دهید.
همچنین عناصر inline به اندازه ی محتوایی که دارند طول یک سطر را اشغال می کنند و تنظیم width برای آنها مفهومی ندارد.
بنابراین اگر از روش float استفاده کنید، علاوه بر اینکه می توانید روی عرض liها کنترل داشته باشید، می توانید داخل liها از عناصر block نیز استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیرکیان 1393-11-06 09:54
خداخیرت بده
کارمو راه انداختی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # nasrin 1392-12-02 18:38
سلام ساخت منو به صورت آبشاری رو آموزش بدید لطفا
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!