بستن منو
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با CSS
7
نمایش متن در CSS
7
ساخت حاشیه (border) در CSS
4
عکس ها در CSS
2
ساخت انیمیشن در CSS
6
لینک ها (links) در CSS
5
رنگ ها در CSS
1
مباحث عمومی در CSS
10
×

دانلود فروشگاه اندروید کلیدستان

558

نویسنده

علیرضا گلمکانی ( admin )

شماره کلید
دسته کلید - دسته بندی

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

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

Result

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

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

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


<html>
<head>
<style type="text/css">
.button {
        height:30px;
        width:150px;
        position: fixed;
        left: 0px;
        top: 30px;
        background-color: #0F6;
        text-align: center;
        padding-top: 12px;
}
</style>
</head>

<body>

<a href="http://www.kelidestan.com/index.php"><div class="button">لینک</div></a>

</body>
</html>

نتیجه :

Result

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


<html>
<head>
<style type="text/css">
.button {
        height:30px;
        width:150px;
        position: fixed;
        left: -120px;
        top: 30px;
        background-color: #0F6;
        text-align: center;
        padding-top: 12px;
}
.button:hover {
        left: 0px;
}
</style>
</head>

<body>

<a href="http://www.kelidestan.com/index.php"><div class="button">لینک</div></a>

</body>
</html>

نتیجه :

Result

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

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


<html>
<head>
<style type="text/css">
.button {
        height:30px;
        width:150px;
        position: fixed;
        left: -120px;
        top: 30px;
        background-color: #0F6;
        text-align: center;
        padding-top: 12px;
        -moz-transition:all 0.3s ease-in;
        -webkit-transition:all 0.3s ease-in;
        -o-transition:all 0.3s ease-in;
        -ms-transition:all 0.3s ease-in;
}
.button:hover {
        left: 0px;
}
</style>
</head>

<body>

<a href="http://www.kelidestan.com/index.php"><div class="button">لینک</div></a>

</body>
</html>

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

نتیجه :

Result

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

خوانده شد
مبحث بالا، مفید بود و سایت کلیدستان را دوست داشتم :
محبوب کردن این مبحث در گوگل :
اون چیزی که میخواستم نبود :
سوال دارم :
ارسال نظر :
نظرات 0 0 0

*** نظر بدهید

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو

راهنمای مشخصه های CSS

راهنمای مشخصه های CSS بر اساس حرف اول مشخصه :

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

بستن منو
۳۵
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

CSS Tutorials
مجموعه ویدئوهای آموزشی CSS - مجموعه CSS Tutorials
35
بستن منو
۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

Sass & SCSS Tutorial for Beginners
مجموعه ویدئوهای آموزشی Sass و SCSS برای مبتدیان - مجموعه Sass & SCSS Tutorial for Beginners - از thenewboston.com
7
بستن منو
۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

Less CSS Tutorials for Beginners
مجموعه ویدئوهای آموزشی Less CSS برای مبتدیان - مجموعه Less CSS Tutorials for Beginners - از thenewboston.com
8
بستن منو
۵۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
5
نمایش عکس، در HTML
5
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
10
مباحث عمومی، در HTML
10

آخرین کلیدهای غیررایگان

شما هم می توانید کلیدهای غیررایگان منتشر کنید (بیشتر بدانید)