ساخت یک نوار هدایتی در CSS
Navigation Bar
برای استفاده آسان، وجود Navigation Bar یک بخش بسیار مهم برای وب سایت ها محسوب می شود.
با CSS می توان، منوهای خسته کننده HTML را به Navigation Barهای زیبا تبدیل کرد.
Navigation Bar = لیستی از لینک ها
navigation bar یا نوار هدایتی، اساساً لیستی از لینک هاست که با استفاده از عناصر <ul> و <li> ساخته می شوند:
مثال (ساخت یک نوار هدایتی در CSS)
<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 را از لیستمان حذف کنیم:
توضیح مثال بالا:
- list-style-type:none - علامت ها یا bulletها را حذف می کند، یک navigation bar احتیاجی به علامتگذاری لیست ها ندارد.
- خصوصیت margin و padding را با مقدار 0 تنظیم می کنیم، تا تنظیمات پیشفرض مرورگر را حذف کنیم.
کد مثال بالا یک کد استاندارد است که هم در لینک های افقی و هم در لینک های عمودی استفاده می شود.
Navigation Bar عمودی
برای ساخت یک Navigation Bar عمودی با توجه به کد بالا، فقط کافی است که برای گزینشگر a ، خصوصیت display را با مقدار "block" تنظیم کنیم:
مثال (ساخت یک نوار هدایتی در CSS)
{
display:block;
width:60px;
background-color:#dddddd;
}
توضیح مثال بالا:
- با تنظیم خصوصیت display با مقدار "block" تمام تگ های <a> در یک خط جداگانه قرار می گیرند و تمام فضای لینک قابل کلیک کردن است (نه فقط متن لینک)، و این به ما اجازه می دهد تا عرض لینک را مشخص کنیم.
- عناصر Block به صورت پیشفرض تمام عرض قابل دسترس را اشغال می کنند. ما می توانیم مشخص کنیم که 60 پیکسل از یک خط را اشغال کند.
برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar عمودی
توجه: همیشه عرض تگ <a> استفاده شده در navigation bar را مشخص کنید. اگر انجام این کار را فراموش کنید، IE6 یک نتیجه غیرمنتظره تولید خواهد کرد.
Navigation Bar افقی
دو راه برای ساخت Navigation Bar افقی وجود دارد. استفاده از لیست های inline یا floating
هر دو روش بخوبی کار خواهد کرد، اما اگر می خواهید لینک ها، اندازه یکسان داشته باشند باید از روش floating استفاده کنید.
لیست های inline
یک راه برای ساخت navigation bar افقی این است که عناصر <li> را به صورت inline مشخص کنیم:
توضیح مثال بالا:
- به صورت پیشفرض یک عنصر <li> تمام فضای یک خط را اشغال می کند، با تنظیم خصوصیت display با مقدار "inline" شکستگی خط قبل و بعد هر لیست حذف خواهد شد، بنابراین تمام عناصر <li> در یک خط نمایش داده می شوند.
برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar افقی
Floating
در مثال بالا، لینک ها عرض های متفاوتی دارند.
برای اینکه تمام لینک ها عرض یکسان داشته باشند، عناصر <li> را float می کنیم و عرض عناصر <a> را تنظیم می کنیم:
توضیح مثال بالا:
- در گزینشگر li با تنظیم خصوصیت float با مقدار "left" تمام عناصر <li> در کنار یکدیگر (در یک خط) قرار می گیرند.
- در گزینشگر a با تنظیم خصوصیت display با مقدار "block" تمام عناصر <a> در یک خط جداگانه قرار می گیرند و تمام فضای لینک قابل کلیک کردن است (نه فقط متن لینک)، و این به ما اجازه می دهد تا عرض لینک را مشخص کنیم.
- عناصر Block به صورت پیشفرض تمام عرض قابل دسترس را اشغال می کنند. ما می توانیم مشخص کنیم که 60 پیکسل از یک خط را اشغال کند.
برای یادگیری بیشتر، یک نگاهی به لینک روبرو بیندازید: style دهی کامل یک navigation bar افقی
مثال - خودتان امتحان کنید
در این مثال نحوه ساخت یک منوی دو سطی یا کشویی نشان داده شده است.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 32092
دیدگاه‌ها
سلام.
من در آخرین مثال : نحوه ساخت منوی دوسطحی در نحوه کار display با مقدار inline-block یه مقدار گیج شدم. میشه یه بار دیگه کاربرد این مقدار inline-block رو توضیح بدین یعنی چی؟
ممنون میشم.
سلام . برای اینکه بتونیم چند تا جعبه را گروه بندی کنیم( یا به عبارت دیگر شبکه بندی کنیم) از دستور inline-block استفاده می کنیم. به مثال های درون این لینک زیر دقت کنید تا کاربرد اون رو به خوبی متوجه شوید:
learnlayout.com/inline-block.html
سلام. با تشکر از جوابتون و لینک خوبی که ارائه کردین:
از لینکی که داده بودین من این نتیجه رو گرفتم که عناصری با خاصیت inline-block علاوه بر اینکه میتوانند به مانند عناصر inline رفتار نموده و در یک خط و پشت سر هم قرار گیرند ، میتوانند به مانند عناصر block از خصوصیت padding استفاده نموده و حاشیه قابل کلیک کردن اطراف متن رو هم افزایش دهند و یا به آنها عرضی دلخواه داد. امیدوارم درست متوجه شده باشم.
راستش من تا موضعی رو به طور کامل هضم نکنم نمیتونم بیخیالش بشم. حالا دستور overflow:hidden رو نمیفهمم. یعنی اینطور یادمه که این دستور مقادیر سر ریز شده از ظرفش رو باید مخفی میکرد. اما اینجا وقتی همه خطوط استایل دهی رو به غیر از 6 خط اول ( Ul و li ) ، رو غیر فعال میکنم میبینم که این دستور محتویات رو از جلوی منو را برداشته و به خط پایین منتقل میکنه. خوب منوی ما که سر ریز نداشت. و تازه متون بعد از که جزئی از ظرف منو محسوب نمیشدند که این دستور اونها رو سر ریز عنصر ul به حساب بیاره. این دقیقا چه جوری عمل کرده؟
ممنون
سلام
تا اینجا درست فرمودید اما بقیه رو متوجه نشدم:
عناصری با خاصیت inline-block علاوه بر اینکه میتوانند به مانند عناصر inline رفتار نموده و در یک خط و پشت سر هم قرار گیرند ، میتوانند به مانند عناصر block رفتار کنند.
در مورد دستور overflow:hidden خیلی واضح هست. فرض کنید یک متن با طول بسیار زیاد رو می خواهیم در یک جعبه ی بسیار کوچک نمایش دهیم. اگر بنویسیم overflow:scroll این جعبه اسکرول پیدا می کند و کل متن رو نمایش می دهد. اما اگر بنویسیم overflow:hidden متن اضافه در جعبه نمایش داده نخواهد شد. به مثال زیر توجه کنید:
www.w3schools.com/cssref/playit.asp?filename=playcss_overflow&preval=hidden
داداش با اینا چطوری میخوایم پول دربیاریم اخه؟
با سلام.
شما یاد بگیری، راه پول در‌آوردنش هم پیدا میکنی.
دقیقا مشکلم پیدا کردن راهشه دیگه داداش.........
خب ببین دوست عزیز.
اگه شما html و css و ... رو بلد باشی، میتونی بری جایی شاغل بشی و یا اینکه خودت یه سایت بزنی و یه ایده توش پیاده کنی و کسب درآمد کنی.
البته مسلما اولش کمی سخته و شاید نتونی اونطور که میخوای بهره ببری.
اگر این دانش‌ها رو بلدی که بهتره یه جا مشغول به کاری بشی تا تجربه کسب کنی. اگر هم بلد نیستی، ابتدا باید دانش لازم رو کسب کنی.
اقای پهلوان حرف نداری دمت گرم خیلی عالی بود این همه سایت برای آموزش هست ولی سایت شما تکه تک
خیر ببینی
یک راه دیگر هم وجود دارد برای منوی افقی
به عناصر li درون ul ؛display:inline -bloke قرار دهید؛خیلی راحت تره
در مثال آخر، چرا خصوصیت overflow را برای ul نوشتید
اگر مخفی نشود سر ریز آن چه مشکلی پیش میاد؟
ممنون
خصوصیت 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
کدام روش برای نوشتن لیست های افقی بهتر است
1-floating
2-displsy inline
هر دو روش، نتیجه یکسانی را در بر خواهد داشت، اما توجه فرمایید که اگر از خصوصیت display استفاده نمودید، طبق استانداردها نمی توانید، داخل یک عنصر inline، عناصر از نوع block مانند div قرار دهید.
همچنین عناصر inline به اندازه ی محتوایی که دارند طول یک سطر را اشغال می کنند و تنظیم width برای آنها مفهومی ندارد.
بنابراین اگر از روش float استفاده کنید، علاوه بر اینکه می توانید روی عرض liها کنترل داشته باشید، می توانید داخل liها از عناصر block نیز استفاده کنید.
خداخیرت بده
کارمو راه انداختی
سلام ساخت منو به صورت آبشاری رو آموزش بدید لطفا