ساخت منو با HTML و CSS

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم

در این مطلب از آموزش html و css می خواهیم درباره آموزش ساخت منو با HTML و CSS صحبت کنیم. منوی ناوبری در طراحی سایت تعیین می‌ کند که کاربران به کجا هدایت شوند و چگونه با سایت تعامل داشته باشند. بنابراین لازم است که با ویژگی های یک منوی استاندارد و نحوه کدنویسی انواع ساخت منو با HTML و CSS آشنا شوید. بنابراین تا انتهای مطلب با ما همراه باشید تا تسلط کافی نسبت به این مبحث پیدا کنید.

منوی ناوبری در طراحی سایت چیست؟

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

ویژگی‌ های یک منوی استاندارد و کاربردی

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

از آنجا که هر سایتی می‌ تواند پیمایش‌ های مختلفی را برای کاربران خود طراحی کند، لذا هیچ دستورالعمل مشخص و یکسانی برای سازماندهی ناوبری وجود ندارد. طراحی ناوبری به خودی خود یک هنر است و طراحان سایت به مرور زمان، کسب تجربه‌ بیشتری در این زمینه پیدا می‌ کنند.  طراحی یک منوی ناوبری کاربرپسند و استاندارد چندان دشوار نیست، اما باید پیش از این کار، نکات زیر را به خوبی درک کرده باشید:

پیدا کردن آسان

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

استفاده‌ آسان

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

قابلیت کلیک

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

ثبات

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

وضوح

در ساخت منو با HTML و CSS متن منوی شما باید روشن، کوتاه، توصیفی و متمرکز باشد.

سادگی

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

آموزش ساخت منو با HTML و CSS

گام اول ساخت منو با HTML و CSS : قرار دادن عناصر در صفحه به کمک html

برای شروع طراحی همیشه باید ابتدا به کمک HTML عناصر را در صفحه قرار دهید تا در گام بعدی بتوانید به کمک CSS به آن استایل دهی کنید. برای ساخت منو با HTML و CSS می توان از لیست کمک گرفت. به همین جهت یک UL نوشته و درون آن هر تعداد گزینه که نیاز دارید را با li ایجاد کنید. چون هر گزینه در منو باید به صفحه‌ ای لینک شود درون li تگ a استفاده می‌ شود.

<div class="navbar">
  <ul class="menu">
    <li>
      <a href="#link1">لینک اول</a>
    </li>
    <li>
      <a href="#link2">لینک دوم</a>
    </li>
    <li>
      <a href="#link3">لینک سوم</a>
      <ul class="submenu">
        <li>
          <a href="link3-1"> عنوان فرعی اول </a>
        </li>
        <li>
          <a href="link3-2"> عنوان فرعی دوم </a>
        </li>
    </li>
    <li>
      <a href="#link4">لینک چهارم</a>
    </li>
</div>

گام دوم ساخت منو با HTML و CSS : استایل دهی به منو با css

حالا وقت آن است که به کمک دانش CSS خود این لیست را به یک منوی زیبا تبدیل کنید. برای این کار کافی است از CSSهای زیر استفاده کنید. همانطور که در دروس ابتدایی آموزش html5 و css3 گفته شد، باید کدهای CSS را درون تگ style قرار دهید یا به صورت یک فایل مجزا با کمک link به پروژه اضافه کنید.

 .navbar {background: #797979;direction: rtl;text-align: right;padding-right: 30px;}
ul.menu li { display: inline-block;list-style: none; }
ul.menu li a { display:inline-block;padding: 12px;color: #fff;text-decoration: none; }

به کمک کد بالا برای نوار منو یک پس زمنیه قرار دهید. همچنین با direction و text-align صفحه را برای نوشتن مطالب فارسی آماده کنید. علامت لیست را از li حذف و آنها را به صورت Inline-block کنار هم قرار دهید. برای از بین بردن خط زیر تگ a از text-decoration استفاده شده است. همچنین برای اینکه لینک ها به خوبی کنار هم قرار گیرند و فاصله داشته باشند روی display و padding تگ a کار کنید.

آموزش ساخت منو با HTML و CSS : منوی افقی

گام اول: کدهای html

<ul>
<li><a class="active" href="https://belearn.ir/">belearn</a></li>
<li><a href="https://belearn.ir/">News</a></li>
<li><a href="https://belearn.ir/">Contact</a></li>
<li><a href="https://belearn.ir/">About</a></li>
</ul>

گام دوم: کدهای css

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #690EE6;
}

li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #444;
}
</style>

کد کامل منوی افقی

کد کامل منوی افقی در زیر آورده شده است. می توانید در یک فایل html ذخیره کرده و اجرا کنید.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #690EE6;
}

li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #444;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="https://belearn.ir/">belearn</a></li>
<li><a href="https://belearn.ir/">News</a></li>
<li><a href="https://belearn.ir/">Contact</a></li>
<li><a href="https://belearn.ir/">About</a></li>
</ul>

</body>
</html>

آموزش ساخت منو با HTML و CSS : منوی کشویی (dropdown menu)

گام اول: کدهای html

.container
    .tutorial
      ul
        li Home
        li Blog
        li Services 
          i.fa.fa-angle-down
          ul
            li Graphic Design
            li Website Design 
            li Python Programming
            li PHP Programming
        li Tutorials 
          i.fa.fa-angle-down
          ul
            li CSS 
              span 12 Available
            li HTML 
              span 9 Available
            li Jade
              span 3 Available
            li Javascript
              span 21 Available
            li Design
              span 37 Available
        li Contact
      .slider
      .information
        p A simple, clean looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

گام دوم: کدهای css

//variables
$background-purple: #EEEEEE;
$subtle-white: #f9f9f9;
$subtle-grey: #f2f2f2;
$masked-grey: #333;
$blue: #F03861;
$open-sans: 'Open Sans', sans-serif;
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
  height: 100%;
  background-color: $background-purple;
}
// page container
.container {
  width: 100%;
  height: 100%;
}
// tutorial start
.tutorial {
  width: 80%;
  margin: 5% auto 0 auto;
  box-shadow: 0 4px 12px rgba(black, 0.1);
  background-color: $subtle-white;
  max-width: 800px;
.slider {
  width: 100%;
  height: 300px;
  background-color: $blue;
}
.information {
  width: 100%;
  padding: 20px 50px;
  margin-bottom: 30px;
  font-family: $open-sans;
  h1 {
    color: $masked-grey;
    font-size: 1.5rem;
    padding: 0px 10px;
    border-left: 3px solid $blue;
  }
  h3 {
    color: darken($subtle-grey, 7%);
    font-size: 1rem;
    font-weight: 300;
    padding: 0px 10px;
    border-left: 3px solid $blue;
  }
  p {
    padding: 10px 0px;
  }
}
  ul {
    font-size: 0;
    list-style-type: none;
    // initial li
    li {
      font-family: $open-sans;
      font-size: 1rem;
      font-weight: 400;
      color: $masked-grey;
      display: inline-block;
      padding: 15px;
      position: relative;
       // secondary ul
        ul {
          display: none;
        }
      // initial li:hover
      &:hover {
        cursor: pointer;
        background-color: $subtle-grey;
        // secondary ul visibility change
        ul {
          display: block;
          margin-top: 15px;
          width: 200px;
          left: 0;
          position: absolute;
          // secondary li
          li {
            display: block;
            background-color: darken($subtle-white, 7%);
            span {
              float: right;
              color: $subtle-white;
              background-color: $blue;
              padding: 2px 5px;
              text-align: center;
              font-size: .8rem;
              border-radius: 3px;
            }
            &:hover {
              background-color: darken($subtle-white, 10%);
              span {
                background-color: darken($blue, 5%);
              }
            }
          }
        }
      } 
    }
  }
}

سخن پایانی

در این مقاله به طور کامل آموزش ساخت منو با HTML و CSS، آموزش ساخت انواع منوهایی که شما در طراحی سایت نیاز دارید به همراه کدهای آن ها بیان شد. با مطالعه این مطلب تسلط کافی به مبحث ساخت منو خواهید داشت.

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

اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم