ساخت منوی افقی استاندارد با استفاده از لیست

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

در پایان منویی ساخته شده با استفاده از CSS و HTML به صورت زیر خواهیم داشت:

برای ساخت منوی افقی در HTML، ابتدا آیتم های منو را توسط عنصر <ul> به صورت زیر پیاده میکنیم :

HTML


سپس توسط دستور display:inline در CSS آیتم های منوی مورد نظر را به صورت خطی در محور افقی نمایش میدهیم:

CSS

#nav li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

نظرات (12) -

  • محسن

    09/04/1390 02:17:34 ق.ظ | پاسخ به این نظر

    سلام.

    من دیدیم که بعضی از طراحان وب، به جای اینکه به liها، استایل inline قرار بدن، اونها float میکنن.

    حالا سوالم اینه که کدومیک از اینها بهتره؟ از نظر cross browser بودن و کلاً استانداردهای طراحی.

    ضمناً اگر میشه اموزش زیر منو رو هم داشته باشید.

    • Admin

      09/04/1390 02:50:24 ق.ظ | پاسخ به این نظر

      سلام

      کلا float عنصر رو از روال پیش فرض نمایش خارج میکنه و عنصر رو به سمت مورد نظر میکشه و تا زمانی که اجباری در کار نیست، نباید از float استفاده کرد. در ضمن در توضیحات نوشتم که از نظر HTML معنایی (Semantic HTML) منوی افقی و یا هر آبجکتی که به صورت چند عنصر لیست وار زیر هم یا کنار هم قرار میگیرند، یک لیست محسوب میشن و برای پیاده سازیشون باید از لیست استفاده بشه، تا برای مرورگر و یا موتور جستجو هم قابل درک باشه. این روش از طرف طراحان بزرگ (Chris Coyier) مورد استفاده قرار گرفته و یه سایت مرجع برای استفاده از لیست ها هم این روش رو برای منوی افقی معرفی کرده که در این آدرس میتونید ببینید:
      css.maxdesign.com.au/listamatic/horizontal01.htm

      • محسن

        09/04/1390 04:19:30 ق.ظ | پاسخ به این نظر

        سایت css.maxdesign فوق العاده س...

        مخصوصا که با زبان ساده توضیح داده و برای منی که انگلیسیم خیلی ضعیفه، عالیه...

        فقط یه ابهامی دارم در مورد پاسختون.

        وقتی که li ها به صورت float قرار میگرن، از نظر مرورگر و موتور جستجو، مگر لیست محسوب نمیشن؟

        • Admin

          09/04/1390 04:39:28 ق.ظ | پاسخ به این نظر

          حق باشماست، لیست محسوب میشن، من اشتباها در مورد روش های غیر استاندارد توضیح دادم که مثلا شما میتونید با چندتا لینک کنارهم که خاصیت float دارن منو بسازید که درست نیست.

  • محمد

    09/04/1390 02:38:53 ق.ظ | پاسخ به این نظر

    سپاس از این آموزش
    اگه ممکنه روش قراردادن تصویر زیر منو و حالت اکاردئونی بودن رو هم آموزش بدین
    متشکریم

    • Admin

      09/04/1390 02:58:10 ق.ظ | پاسخ به این نظر

      برای قرار دادن تصویر در لینک در حالت های مختلف (کلیک، بردن ماوس رو لینک و لینک فعال) یک آموزش جامع همراه با آموزش ساخت یک دکمه در فتوشاپ نوشتم در اینجا:
      www.websiteha.com/post.aspx

      برای لینک آکاردئونی هم این ارسال رو مطالعه کنید:
      www.websiteha.com/post.aspx

  • صیفی

    07/22/1392 03:05:57 ب.ظ | پاسخ به این نظر

    با سلام
    نکته ای که ساعتها دنبالش بودم :
    display:inline
    ممنونم واقعاً مفید و راه گشا بود.
    امیدوارم خداوند به شما خیر و دانش روزافزون عطا کند.

    یا حق

  • عباس

    05/01/1393 07:15:39 ب.ظ | پاسخ به این نظر

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

  • احسان

    05/06/1393 03:26:32 ق.ظ | پاسخ به این نظر

    بنده در فارسی سازی بسیاری از قالب ها به مورد float در طراحی اینگونه لیست ها برخورد کرده بودم که معمولا زمانی که قالب رو ترجمه و راستچین میکردم دستور float  کاملا کارایی خودشو از دست میداد و افقی بودن لیست به هم میریخت اما دستور display واقعا کمک بسیار خوبی هست ... ممنونم از شما که همیشه راهنماییهاتون استاندارد هست.
    زنده و پاینده باشید.

Loading