بستن منو
۵۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با CSS
7
نمایش متن، در CSS
13
ساخت حاشیه (border)، در CSS
4
عکس ها، در CSS
5
تعیین اندازه و موقعیت عنصرها، در CSS
4
تغییر شکل عنصرها، در CSS
3
ساخت انیمیشن، در CSS
6
لینک ها (links)، در CSS
5
رنگ ها، در CSS
1
دکمه ها (Button)، در CSS
2
مباحث عمومی، در CSS
8
×

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

548

نویسنده

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

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

ساخت منوی شناور (Floating Menu)، با کدهای CSS

منوی شناور (Floating Menu)، به منویی گفته می شود که اگر کاربر، به بالا یا پایین صفحه برود (با اسکرول بار)، محل آن منو در صفحه، ثابت باشد.

برای آشنایی با نحوه کدنویسی برای ساخت یک منوی شناور (Floating Menu)، به مثال زیر توجه کنید :

مثال

<html>
 
<head>
<style type="text/css">
div.floating-menu {
        position:fixed;
        right:10px;
        top:10px;
        background:#FF6;
        border:1px solid #000;
        width:150px;
        z-index:100;
        }
div.floating-menu a, div.floating-menu h3 {
        display:block;
        margin:0 0.5em;
        }                                        
</style>
</head>
 
<body>

<div class="floating-menu">
<h3>منوی شناور (Floating Menu)</h3>
<a href="#">لینک اول</a>
<a href="#">لینک دوم</a>
<a href="#">لینک سوم</a>
</div>

<p>text 1.</p>
<p>text 2.</p>
<p>text 3.</p>
<p>text 4.</p>
<p>text 5.</p>
<p>text 6.</p>
<p>text 7.</p>

</body>
</html>

مهمترین بخش کدها، مشخصه CSS زیر می باشد که باعث می شود محل منو، ثابت باقی بماند :


position:fixed

همچنین، کدهای زیر، موقعیت نسبی منو، نسبت به کناره های پنجره نمایش دهنده صفحه، را تعیین کرده است :


right:10px;
top:10px;

نتیجه :

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
4
بستن منو
۷۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
5
نمایش عکس، در HTML
6
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
17
تعیین مشخصات کلی صفحه، در HTML
5
عناصر گرافیکی، در HTML
1
دکمه ها (Button)، در HTML
2
پخش صدا (Audio)، در HTML
1
کار با کیبورد (Keyboard)، در HTML
2
مباحث عمومی، در HTML
10
بستن منو
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با W3.CSS
11
متن ها (Text)، در W3.CSS
1
رنگ ها (Color)، در W3.CSS
6
عکس ها (Image)، در W3.CSS
9
خطوط حاشیه (border)، در W3.CSS
3
حاشیه (Padding و Margin)، در W3.CSS
1
کارت ها (Card)، در W3.CSS
1
فونت ها (Font)، در W3.CSS
1
فهرست ها (لیست - List)، در W3.CSS
4
راهنماها (Tooltip)، در W3.CSS
0
انیمیشن ها (Animation)، در W3.CSS
5