طراحی بخش های ثابت در کنار صفحه که با اشاره موس، به داخل صفحه می آیند، در CSS

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

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

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

ابتدا بخش مربوط به لینک را به صورت وقتی که کامل درون صفحه است، طراحی می کنیم :

نتیجه :

اکنون باید کدها را به گونه ای تغییر دهیم که ابتدا تنها بخشی از دکمه، درون صفحه دیده شود و سپس زمانی که موس را بر روی آن می بریم، دکمه به صورت کامل نمایش داده شود. برای این منظور، کدها را به صورت زیر تغییر می دهیم :

نتیجه :

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

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

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

نتیجه :