روز سوم فرانت اند:ساخت منوی کشویی همراه با انیمیشن Css3

با یکی دیگر از آموزش های سری (روز فرانت اند) در خدمت شما هستیم.امروز می خواهیم با نحوه ساخت یک منوی کشویی multi-level یا چند سطحی به همراه انیمیشن CSS3 transitions آشنا شویم.از منوی کشویی برای نمایش ساب منو ها به صورت کشویی و از قابلیت multi-level برای ایجاد منوی آتیم های تو در تو برای منو استفاده می شود.(دموی این منو را میتوانید در صفحه کدپن سایت مشاهده کنید).

ساخت منوی کشویی(HTML)

برای ساخت منوی کشویی ابتدا باید لایه اولیه منو را در سند html ایجاد کنیم،برای اینکار از <nav> برای ایجاد یک لایه نگهدارنده و از تگ <ul>برای ساخت منو و از تگ<li>برای ایجاد آیتم های مربوط به هر بخش از منو استفاده می کنیم.برای درک بهتر توضیحات می توانید از دوره آموزش ویدئویی و انلاین HTML5 استفاده کنید.

<!doctype html>
<html>
<head>
/* Codefriend.ir */
<meta charset="utf-8">
<title>Animated Dropdown Navigation with CSS3 Transitions Demo(Codefriend)</title>
</head>

<body>
<h1>Animated Dropdown Navigation with CSS3 Transitions Demo(Codefriend.ir)</h1>
<div class="css-script-ads" align="center"></div>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tutorials</a><span class="dropBottom"></span>
      <ul>
        <li><a href="#">Design</a><span class="dropRight"></span>
          <ul>
            <li><a href="#">Photoshop</a></li>
            <li><a href="#">Illustrator</a></li>
            <li><a href="#">Web Design</a><span class="dropRight"></span>
              <ul>
                <li><a href="#">XTHML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">Interviews</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
</body>
</html>

<!doctype html>

<html>

<head>

/* Codefriend.ir */

<title>Animated Dropdown Navigation with CSS3 Transitions Demo(Codefriend)</title>

</head>

<body>

<h1>Animated Dropdown Navigation with CSS3 Transitions Demo(Codefriend.ir)</h1>

<nav>

<ul>

<li><a href="#">Tutorials</a><span class="dropBottom"></span>

<ul>

<li><a href="#">Design</a><span class="dropRight"></span>

<ul>

<li><a href="#">Photoshop</a></li>

<li><a href="#">Illustrator</a></li>

<li><a href="#">Web Design</a><span class="dropRight"></span>

<ul>

<li><a href="#">XTHML</a></li>

<li><a href="#">JavaScript</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">Articles</a></li>

<li><a href="#">Interviews</a></li>

</ul>

</li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</body>

</html>

افزودن استایل Css به لایه HTML:

برای اینکه منوی کشویی را که ساختیم زیباتر کنیم و یک رابط کاربری مناسبی بسازیم باید از کدهای css کمک بگیرم.تمامی کدهای سی اس اسی که در زیر استفاده شده است در دوره آموزشی مقدماتی و پیشرفته Css و Css3 به صورت کامل و قدم به قدم توضیح داده شده است.پس اگر مشکلی با هر کدام از قسمت های فایل سی اس اس داشتید میتوانید به این دوره ها مراجعه کرده و به راحتی موضوع مدنظر رو درک کنید.

body { background: url("https://s9.picofile.com/file/8296629492/backgrounds.jpg"); }

span.dropBottom,
span.dropRight {
  display: block;
  box-shadow: inset 2px 0px 0px #FF9;
  position: absolute;
  left: 0px;
  width: 100%;
  height: 100%;
  top: 0px;
}

span.dropBottom {
  box-shadow: inset 0px 2px 0px #FF9;
  position: absolute;
  width: 100%;
  bottom: 0px;
}

h1 {
  color: #EDEDED;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

nav {
  display: table;
  margin: 50px auto;
  box-shadow: 0px 2px 0px #023333;
}

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

ul ul {
  opacity: 0;
  position: absolute;
  top: 160%;
  visibility: hidden;
  transition: all .4s ease;
  -webkit-transition: all .4s ease;
}

ul ul ul {
  top: 0%;
  left: 160%;
}

ul ul li:hover > ul {
  top: 0%;
  left: 100%;
  opacity: 1;
  visibility: visible;
}

ul li:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

ul li {
  float: left;
  position: relative;
}

ul ul li { float: none; }

ul li {
  background-color: #03A9F4;
  cursor: pointer;
}

ul a {
  text-decoration: none;
  display: block;
  color: #FF9;
  padding: 10px 15px;
  width: 6em;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  text-shadow: 0px -1px 0px rgba(0,0,0,.2);
}

ul li:hover { background-color: #007373; }

ul li a:hover { background-color: #007373; }

body { background: url("http://s9.picofile.com/file/8296629492/backgrounds.jpg"); }

span.dropBottom,

span.dropRight {

display: block;

box-shadow: inset 2px 0px 0px #FF9;

position: absolute;

left: 0px;

width: 100%;

height: 100%;

top: 0px;

}

span.dropBottom {

box-shadow: inset 0px 2px 0px #FF9;

position: absolute;

width: 100%;

bottom: 0px;

}

h1 {

color: #EDEDED;

text-align: center;

font-family: 'Open Sans', sans-serif;

}

nav {

display: table;

margin: 50px auto;

box-shadow: 0px 2px 0px #023333;

}

ul {

margin: 0;

padding: 0;

list-style: none;

}

ul ul {

opacity: 0;

position: absolute;

top: 160%;

visibility: hidden;

transition: all .4s ease;

-webkit-transition: all .4s ease;

}

ul ul ul {

top: 0%;

left: 160%;

}

ul ul li:hover > ul {

top: 0%;

left: 100%;

opacity: 1;

visibility: visible;

}

ul li:hover > ul {

opacity: 1;

top: 100%;

visibility: visible;

}

ul li {

float: left;

position: relative;

}

ul ul li { float: none; }

ul li {

background-color: #03A9F4;

cursor: pointer;

}

ul a {

text-decoration: none;

display: block;

color: #FF9;

padding: 10px 15px;

width: 6em;

text-align: center;

font-family: 'Open Sans', sans-serif;

text-shadow: 0px -1px 0px rgba(0,0,0,.2);

}

ul li:hover { background-color: #007373; }

ul li a:hover { background-color: #007373; }

به همین سادگی توانستیم یک منوی کشویی چند سطحی همراه با انیمیشن با استفاده از قدرت سی اس اس ایجاد کنیم(موفق باشید).

تجربه کاربری

روز سوم فرانت اند:ساخت منوی کشویی همراه با انیمیشن Css3

ساخت منوی کشویی(HTML)

افزودن استایل Css به لایه HTML:

ساده ترین روش طراحی صفحه ریسپانسیو

استفاده از فایل های Css و JavaScript در قالب وردپرس

1 نظر

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

تجربه کاربری

ساخت منوی کشویی(HTML)

افزودن استایل Css به لایه HTML:

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

1 نظر

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

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

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