چطوری با html و css منو بسازیم؟

اگر به تازگی مسیر وبمستری رو شروع کردید و تصمیم دارید که یک طراح سایت حرفه ایی (fullstack و wordpress expert) بشوید پس ترجیحا باید با دو زبان شیرین و دلنشین html و css آشنایی کامل داشته باشین. این دو زبان ، زبان های برنامه نویسی نیستند ! خیلی از تازه وارد ها فکر میکنند که این دو زبان جزو زبان های برنامه نویسی هستند که یادگیری آنها هم کار سختیه . ولی برعکس چیزی که تصور میکنند html و css زبان های نشانه گذاری هستند که از اچ تی ام ال برای چهارچوب و اسکلت صفحات وب و از css برای طراحی و زیباسازی صفحات وب  استفاده میکنند.

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

تعریف کامل تر HTML

در سال ۱۹۸۹ میلادی ، تیم برنرز لی که یک فیزیک‌دان افسانه ایی بود ، یک زبان جدید برای علامت‌گذاری در هایپرتکست‌ها طراحی کرد. زبانی که او طراحی کرده بود می‌توانست در اینترنت مورد استفاده قرار گیرد . برنرز لی، نام زبانی که خودش طراحی کرده بود را HTML نامید: HyperText Markup Language (زبان علامت‌گذاری ابرمتن‌ ها ).

این زبان هم مانند دیگر تکنولوژی اوایل با باگ ها و مشکلات زیادی دست و پنجه نرم میکرد ، اما به تدریج توسعه پیدا کرد و توانمندی‌های زیادی در آن گنجانده شد.برنامه های مرورگر‌ وب مانند گوگل کروم و فایرفاکس در میان قابلیت‌های متعددی که دارند ، از این قابلیت مهم هم برخوردار هستند که می‌توانند زبان HTML را بفهمند.

تعریف کامل تر CSS

زبان CSS که زبانی بسیار کاربردی در دنیای طراحی وب می باشد، مخفف Cascading Style Sheets ( به معنای برگه های سبک آبشار ) رو به خودش گرفت. این نام رو بخاطر کاربرد آن در طراحی صفحات وب بهش نسبت دادند . در یک جمله تعریف css میشه یک زبان فوق العاده ساده برای زیبا ساختن اشیایی که ما در صفحه مرورگر سیستم خودمون میبینیم .

حالا چطوری باید یک منو با این دو زبان بسازیم ؟

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

ناهار   ( 10 تا زیرمنو از انواع ناهار )

شام   ( 10 تا زیرمنو از انواع شام )

صبحانه   ( 10 تا زیرمنو از انواع صبحانه )

نوشیدنی گرم   ( 10 تا زیرمنو از انواع نوشیدنی گرم )

حال شما باید با استفاده از تگ های ul ابتدا منو های اصلی مانند صبحانه و شام و ناهار و .. رو درست کنین ، سپس با استفاده از تگ li در html زیر منو های مربوط به هر کدام رو درست کنید . مانند کد های زیر میتوانید یک منو کامل به همراه طراحی های css درست کنید. فقط برای استایل دهی با css از رابط مهمی بین html و css به نام class استفاده میکنیم.

کد های HTML :

<div class="dropdown">

  <button class="dropbtn">صبحانه </button>

    <div class="dropdown-content">

      <a href="#">صبحانه عامیانه</a>
      <a href="#"> صبحانه انگلیسی</a>
      <a href="#">صبحانه سنتی</a>

     </div>

</div>

 کد های css

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}

کلام آخر : 

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