ساخت Navbar 3D با HTML و CSS

  1. Home
  2. برنامه نویسی
  3. جزئیات نویسنده
ساخت Navbar 3D با HTML و CSS

ساخت Navbar 3D با HTML و CSS

در این آموزش ما سعی داریم تا یک منو سه بعدی را با نام Rotate Navbar 3D به کمک کد های HTML و CSS بازنویسی نماییم.
مراحل کار به صورت زیر می باشد:

  1. ابتدا یک صفحه HTML می سازیم.
  2. یک صفحه CSS ساخته و سپس به HTML لینک می دهیم.
  3. مطابق کد های نوشته شده DIV های تو در تو را می نویسیم.
  4. سپس کد های CSS مربوط به قسمت رو به رویی کار را می سازیم.
  5. کد های CSS بخش پشت کار و پس از چرخش را می نویسیم.
  6. دو خط کد زیر را در Head صفحه HTML قرار می دهیم تا آیکون ها توسط مرورگر شناسایی شوند.

<meta name=’viewport’ content=’width=device-width, initial-scale=1′>
<script src=’https://kit.fontawesome.com/a076d05399.js’></script>

 

 

ویژگی های این نوع منو

از ویژگی های rotate Navbar 3D می توان به کاربر پسند بودن آن اشاره نمود.
برخی بر این باورند که برای ساخت منو هایی با این طرح و کاربری حتما باید جاوا اسکریپت بلد باشیم و یا از کتابخانه های jquery استفاده نماییم درصورتیکه ساخت همچین منو های سه بعدی و کاربر پسندی تنها نیاز به تمرین و افزایش مهارت در زمینه HTML و CSS می باشد، این آموزش همچنین برای آن دسته از افرادی می باشد که ادعا می کنند HTML و CSS کاربرد خاصی نداشته و هر برنامه نویسی به طور کامل آنها را بلد می باشد.

شما دوستان می توانید با تغییر در اندازه و نوع چیدمان و حتی تغییر آیکون های موجود در این rotate Navbar 3D آن را با کاربری مخصوص به خودتان بازسازی کرده و در بخش های مختلف استفاده نمایید.

در ادامه ما به ساخت انواع منو و دیگر طرح های جالب و کاربردی با HTML و CSS خواهیم پرداخت و همچنین گاهی از Java script استفاده خواهیم کرد تا طرح های جالب تری را برای شما بازنویسی نماییم.

لینک های دانلود:

لینک دانلود کد های مربوط به آموزش ساخت Navbar 3D با HTML و CSS

لینک دانلود این ویدئو در آپلود بوی

alireza pargol

نویسنده از: 

توسعه دهنده php

دیدگاه خود را بنویسید