ساخت منو سه بعدی

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

برای اینکه کارمون ساده تر باشه از Bootstrap هم استفاده کردیم ولی فقط برای کلاس های Container, Col و Row.

ساختار HTML

اول از همه نیاز به ساختار HTML داریم:

 
    <div class="container">

      <div class="row justify-content-center align-items-center vh-100">
        <div class="col-auto">
          

          <ul id="menu">
            <li style="--i:6">
              <a href="https://ReturnTrue.ir">ReturnTrue.ir</a> 
            </li>
            <li style="--i:5">
              <a href="#">Link 2</a> 
            </li>
            <li style="--i:4">
              <a href="#">Link 3</a> 
            </li>
            <li style="--i:3">
              <a href="#">Link 4</a> 
            </li>
            <li style="--i:2">
              <a href="#">Link 5</a> 
            </li>
            <li style="--i:1">
              <a href="#">Link 6</a> 
            </li> 
          </ul>


        </div>
      </div>
    </div>

یک Id به نام menu تعریف کردیم که لیست منوهای مارو داشته باشه. توش چنتا li و توی هر کدوم یک لینک گذاشتیم. همچنین برای هر li توی استایل inline یک متغییر تعریف کردیم به اسم i که بعدا توی CSS ازش استفاده کنیم.

ساختار HTML همینقدر سادست ، فقط از کلاس های Bootstrap استفاده کردیم تا بهتر نمایشش بدیم.

CSS

قسمت اصلی پروژه CSS هستش پس بریم ببینیم چیکار باید کرد.

#menu

پرنت اصلیمون، آی دی menu داره که استایل زیر رو میگیره:

#menu{
  transform: skewY(-15deg);
  list-style: none;
}

تنها کاری که باهاش کردم، اینه که یکم چرخوندمش تا بتونم قسمت سمت چپ منو رو نشون بدم و حالت 3D رو ایجاد کنم. توی خط بعدی بالت های کنار li هارو حذف کردم ( چون بهشون نیاز ندارم )

#menu li

تمامی li های توی منو با استایل زیر هستن:

#menu li{
  position: relative;
  width: 300px;
  background-color: #051c34;
  z-index: var(--i);
  transition: 0.5s; 
}

مرحله اول، relative کردیمشون تا فرزندان با پوزیشن absoloute نسبت به این پرنت، موقعیت بگیرن. عرضشون رو به اندازه ای که دوس داشتم گذاشتم و بهش رنگ بک دادم. در ادامه برای z-index از متغیری که توی کد HTML زده بودم استفاده کردم. اگه قسمت HTML رو نگاه کنین، میبینین پایین ترین li کمترین z-index رو داره. دلیلش اینه که میخوام آیتم هایی که توش تعریف میکنم، بره زیر بالادستیش. و در آخر بهش transition میدم تا در ادامه برای رویداد hover رنگش رو تغییر بدم و این تغییر رو به شکل یک بازه ببینیم.

#menu li a

بریم سروقت لینک های توی منو:

#menu li a {
  text-decoration: none;
  color: #F8B425;
  display: block;
  padding: 15px; 
  letter-spacing: 0.05px;
  transition: 0.5s;
}

اول از همه، زیر خطشون رو حذف میکنیم، بعد رنگ فونت رو تغییر میدیم به اونی که میخوایم. در ادامه display رو بلاک کردم چون میخوام تمام عرض پرنتش ( منظور li هست ) رو بگیره. یکم padding میدم بهش تا Text ها به بدنش نچسبن. letter-spacing در واقع فاصله بین حروف هست که یکم زیادترش کردم. transition هم که معرف حضور هست و ... .

#menu li:before

قسمت بغل هر کدوم از منوها، در واقع همین before هست. بریم استایلشو ببینیم:

#menu li:before{
  content: "";
  position: absolute;
  top: 0;
  left: -40px;
  width: 40px;
  height: 100%;
  background-color:#03264a;
  transform-origin: right;
  transform: skewY(45deg);
  transition: 0.5s;
}

همون اول content رو براش معرفی کردم تا المان ایجاد بشه. پوزیشنش رو absolute میکنم تا بتونم حرکتش بدم و همچنین فضایی که اشغال میکنه، مکان سایر المان هارو تغییر نده. به بالای پرنتش ( li ) میچسبونمش و به اندازه عرضش که توی خط بعدی 40px معرفی شده، میارمش سمت چپ. ارتفاش رو 100% پرنتش در نظر میگیرم تا هرچقدر هم پرنت بزرگ بشه، این آیتم همونقدر باشه و نیاز به دستکاریش نداشته باشیم. با یک رنگ پس زمینه متفاوت این قسمت رو مجزا میکنم ( یه جورایی انگار بهش نور متفاوتی میرسه ) . حالا میخوام بچرخونمش ولی باید حواسم باشه که مقدار transform-origin رو right بذارم تا قسمت راستش ثابت بمونه. حالا با transform: skewY(45deg); به اندازه 45 درجه میچرخونمش. اگه میخواین بهتر متوجه بشین، دست راستتون رو بیارین بالا، مچ دستتون رو ثابت نگه دارین و کف دست رو ببرین رو به جلو. transform-origin: right; درواقع مچ دستتون رو ثابت نگه داشته و حرکت به وسیله transform: skewY(45deg); روی کف دستتون انجام شده. در آخر هم transition ...

#menu li:after

قسمت بالای هر کدوم از li ها، همین after هست که استایل زیر رو داره:

#menu li:after{
  padding: 15px;
  content: 'ReturnTrue.ir';
  display: flex;
  align-items: center;
  position:absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 40px;
  background-color:#074789;
  transform-origin: bottom;
  transform: skewX(45deg);
  transition: 0.5s;
  color: #fff;
}

یکم padding داره تا نوشته توش به بدنه نچسبه، content رو اینبار اسم سایت گذاشتم. display رو flex کردم تا بتونم با align-items: center متن رو وسط توی محور Y قرار بدم. پوزیشنش رو absolute میکنم تا بتونم حرکتش بدم و همچنین فضایی که اشغال میکنه، مکان سایر المان هارو تغییر نده. از بالا 40px به اندازه ارتفاعش که پایینتر بهش دادم، میبرمش بالا. به چپ پرنت ( li ) میچسبونمش و عرضش رو 100% میدم. background-color رو جوری میذارم که تفاوت رنگش باعث بشه فک کنیم نور متفاوتی بهش تابیده شده. مقدار transform-origin رو bottom میذارم تا پایینش ثابت باشه و با چرخش توسط transform به مقدار skewX(45deg)، جوری میچرخونمش که ظاهری شبیه وجه بالای li رو داشته باشه. رنگ فونت رو سفید میذارم و transition ... .

تا اینجای کار، قسمت ظاهری تموم شد ولی ما براش کمی حالت hover هم گذاشتیم تا جذابتر بشه. همچنین به آخرین li، یکم سایه دادیم تا بنظر بیاد کلش روی هواست

 شما میتونین کل این کد و نتیجرو از لینک زیر ببینین:

مشاهده دمو