روز ششم فرانت اند:نویگیشن منو کشویی ریسپانسیو

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

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

در این آموزش سعی میکنم به ساده ترین شکل ممکن با نحوه ساخت نویگیشن منو ریسپانسیو در Css برای ایجاد یک رابط کاربری ساده و تعاملی آشنا می شویم.پیش نیاز های این آموزش آشنایی با HTML5 و Css می باشد که میتوانید از دوره های ویدئویی آنلاین و رایگان کدفرند استفاده کنید.

ساخت لایه اولیه نویگیشن منو در HTML

برای ساخت نویگیشن نیاز داریم تا یک لایه ساده و ابتدایی با html داشته باشیم.این لایه در حقیقت دربرگیرنده تمامی بخش های مختلف منو و همچنین بدنه سایت می باشد.در سند اچ تی ام ال ما با استفاده از checkbox اقدام به ایجاد یک دکمه برای تغییر وضعیت منو و همچنین از تگ های ul,li برای ایجاد منو و آیتم های منو استفاده کرده ایم.

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sliding Push Navigation Menu Demo(Codefriend.ir)</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
</head>

<body>
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="menu-icon"><i class="fa fa-bars"></i></label>
<div class="content-container">
  <div class="site-title">
    <h1>Push Navigation</h1>
  </div>
  <div class="content">
    <img src="https://placeimg.com/720/250/people" alt="" class="" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget nulla mollis, efficitur urna nec, viverra dolor. Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent efficitur finibus eros sit amet sagittis. Ut sollicitudin sodales neque et volutpat. Curabitur dictum ante vel fermentum volutpat. Curabitur ac neque et erat viverra egestas.</p>
  </div>
</div>
<div class="slideout-sidebar">
  <ul>
    <li><i class="fa fa-home"></i> Home</li>
    <li><i class="fa fa-user"></i> About Us</li>
    <li><i class="fa fa-book"></i> Blog</li>
    <li><i class="fa fa-envelope"></i> Contact</li>
  </ul>
</div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Sliding Push Navigation Menu Demo(Codefriend.ir)</title>

</head>

<body>

<h1>Push Navigation</h1>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget nulla mollis, efficitur urna nec, viverra dolor. Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent efficitur finibus eros sit amet sagittis. Ut sollicitudin sodales neque et volutpat. Curabitur dictum ante vel fermentum volutpat. Curabitur ac neque et erat viverra egestas.</p>

</div>

<ul>

<li><i class="fa fa-user"></i> About Us</li>

<li><i class="fa fa-envelope"></i> Contact</li>

</ul>

</div>

</body>

</html>

مورد اصلی که اینجا باید به آن اشاره کنیم،استفاده از Font-awesome برای افزودن فونت ایکون ها به دکمه منو (Checkbox) و هم چنین آیتم های منو است.در دوره آنلاین html5 با نحوه کارکرد فونت آیکون (Font-awesome) آشنا شده ایم.

استایل دهی منو و بنده اصلی نویگیشن منو

در فایل style.css برای بخش های مختلف نویگیشن منو و بنده اصلی منو و همچنین سایت ویژگی های خاصی رو تعریف می کنیم.این ویژگی در واقع تشکیل دهنده رابط کاربری منو است پس باید در ساخت آن بسیار دقت کنیم.ویژگی های اصلی که در این بخش از آن استفاده کرده ایم position,z-index است.هر کدام از این ویژگی ها را در دوره ویدئویی رایگان و آنلاین Css3 پیشرفته یادگرفتیم.

body {
  font-family: 'Roboto Condensed', arial, sans-serif;
  margin: 0;
  background-color:#fafafa;
}

/* -- main content -- */
.content-container {
  position: relative;
  z-index: 0;
  padding: 20px;
  max-width: 728px;
  margin: 0 auto;
  overflow: hidden;
  transition: all 300ms ease-in-out;
}

.site-title {
  text-align: center;
  border-bottom: 1px solid #111111;
  margin-bottom: 24px;
}

.site-title h1 {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 10px;
}

img {
  width: 100%;
}

.content p {
  line-height: 1.6em;
  margin-bottom: 24px;
}

/* -- Slideout Sidebar -- */

.slideout-sidebar {
  position: fixed;
  top: 0;
  left: -190px;
  z-index: 0;
  width: 150px;
  height: 100%;
  padding: 20px;
  background-color: #212121;
  transition: all 300ms ease-in-out;
}

.slideout-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.slideout-sidebar ul li {
  cursor: pointer;
  padding: 18px 0;
  border-bottom: 1px solid rgba(244,244,244,0.4);
  color: rgba(244,244,244,0.7);
}

.slideout-sidebar ul li:last-child {
  border-bottom: 0;
}

.slideout-sidebar ul li:hover {
  color: rgba(244,244,244,1);
}

body {

font-family: 'Roboto Condensed', arial, sans-serif;

margin: 0;

background-color:#fafafa;

}

/* -- main content -- */

.content-container {

position: relative;

z-index: 0;

padding: 20px;

max-width: 728px;

margin: 0 auto;

overflow: hidden;

transition: all 300ms ease-in-out;

}

.site-title {

text-align: center;

border-bottom: 1px solid #111111;

margin-bottom: 24px;

}

.site-title h1 {

font-weight: 300;

text-transform: uppercase;

letter-spacing: 10px;

}

img {

width: 100%;

}

.content p {

line-height: 1.6em;

margin-bottom: 24px;

}

/* -- Slideout Sidebar -- */

.slideout-sidebar {

position: fixed;

top: 0;

left: -190px;

z-index: 0;

width: 150px;

height: 100%;

padding: 20px;

background-color: #212121;

transition: all 300ms ease-in-out;

}

.slideout-sidebar ul {

list-style: none;

margin: 0;

padding: 0;

}

.slideout-sidebar ul li {

cursor: pointer;

padding: 18px 0;

border-bottom: 1px solid rgba(244,244,244,0.4);

color: rgba(244,244,244,0.7);

}

.slideout-sidebar ul li:last-child {

border-bottom: 0;

}

.slideout-sidebar ul li:hover {

color: rgba(244,244,244,1);

}

در ادامه کار میریم سراغ استایل دهی به دکمه منو که با checkbox ساختیم.دقت داشته باشید در این بخش حتما باید باید به دکمه ویژگی position را برابر با مقدار absolute یا مطلق قرار دهید وگرنه دکمه در جای مناسب خود قرار نخواهد گرفت.

/* -- Menu Icon -- */

#menu-toggle {
  display: none;
}

.menu-icon {
  position: absolute;
  top: 18px;
  left: 30px;
  font-size: 24px;
  z-index: 1;
  transition: all 300ms ease-in-out;
}



/*-- The Magic --*/
#menu-toggle:checked ~ .slideout-sidebar {
  left: 0px;
}

#menu-toggle:checked + .menu-icon {
  left: 210px;
}

#menu-toggle:checked ~ .content-container {
  padding-left: 190px;
}

/* -- Menu Icon -- */

#menu-toggle {

display: none;

}

.menu-icon {

position: absolute;

top: 18px;

left: 30px;

font-size: 24px;

z-index: 1;

transition: all 300ms ease-in-out;

}

/*-- The Magic --*/

#menu-toggle:checked ~ .slideout-sidebar {

left: 0px;

}

#menu-toggle:checked + .menu-icon {

left: 210px;

}

#menu-toggle:checked ~ .content-container {

padding-left: 190px;

}

و در نهایت نوبت میرسه به ساخت مدیا کوئری ها جهت واکنشگرا کردن نویگیشن منو.media query به طراحان وب این امکان را می دهد که قالب را بر اساس مشخصات دستگاه نمایش دهنده وب سایت تغییر دهند (مشخصاتی مانند: عرض، ارتفاع، رنگ و…).

/* -- Media Queries -- */

@media (max-width: 991px) {
  
  .content-container {
    max-width: 480px;
  }
  
}

@media (max-width: 767px) {
  
  .content-container {
    max-width: 100%;
    margin: 30px auto 0;
  }
  
  #menu-toggle:checked ~ .content-container {
    padding-left: 0;
  }
  
  .slideout-sidebar ul {
    text-align: center;
    max-width: 200px;
    margin: 30px auto 0;
  }
  
  .menu-icon {
    left: 20px
  }
  
  #menu-toggle:checked ~ .slideout-sidebar {
    width: 100%;
  }
  
  #menu-toggle:checked + .menu-icon {
    left: 87%;
    color: #fafafa;
  }
  
  @media screen  
    and (max-width: 736px) 
    and (orientation: landscape) {
      
      .slideout-sidebar {
        padding: 0;
      }
      
      .slideout-sidebar ul {
        max-width: 100%;
        margin: 60px auto 0;
      }
      
      .slideout-sidebar ul li {
        display: inline-block;
        border-bottom: 0;
        width: 72px;
        padding: 18px 24px;
        margin: 0 6px 12px;
        color: #ffffff;
        background-color: #777;
      }

  }
  
}

/* -- Media Queries -- */

@media (max-width: 991px) {

.content-container {

max-width: 480px;

}

@media (max-width: 767px) {

.content-container {

max-width: 100%;

margin: 30px auto 0;

}

#menu-toggle:checked ~ .content-container {

padding-left: 0;

}

.slideout-sidebar ul {

text-align: center;

max-width: 200px;

margin: 30px auto 0;

}

.menu-icon {

left: 20px

}

#menu-toggle:checked ~ .slideout-sidebar {

width: 100%;

}

#menu-toggle:checked + .menu-icon {

left: 87%;

color: #fafafa;

}

@media screen

and (max-width: 736px)

and (orientation: landscape) {

.slideout-sidebar {

padding: 0;

}

.slideout-sidebar ul {

max-width: 100%;

margin: 60px auto 0;

}

.slideout-sidebar ul li {

display: inline-block;

border-bottom: 0;

width: 72px;

padding: 18px 24px;

margin: 0 6px 12px;

color: #ffffff;

background-color: #777;

}

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

تجربه کاربری

روز ششم فرانت اند:نویگیشن منو کشویی ریسپانسیو

ساخت لایه اولیه نویگیشن منو در HTML

استایل دهی منو و بنده اصلی نویگیشن منو

با این چند روش قدرت یادگیری را افزایش دهید

روز هفتم فرانت اند:قرار دادن متن بر روی تصویر با Css

نظر بدهید لغو پاسخ

تجربه کاربری

ساخت لایه اولیه نویگیشن منو در HTML

استایل دهی منو و بنده اصلی نویگیشن منو

ممکن است همچنین دوست داشته باشید

نظر بدهید لغو پاسخ

ورود به حساب کاربری

ایجاد حساب کاربری