بستن دسته بندی
۸۰
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
نمایش دسته بندی ها (۸۰ آموزش)
مباحث اولیه برای آشنایی با CSS
مباحث اولیه برای آشنایی با CSS
7
نمایش متن، در CSS
نمایش متن، در CSS
16
ساخت حاشیه (border)، در CSS
ساخت حاشیه (border)، در CSS
4
عکس ها، در CSS
عکس ها، در CSS
7
انتخابگرها (Selector) (انتخاب عنصرهای صفحه)، در CSS
انتخابگرها (Selector) (انتخاب عنصرهای صفحه)، در CSS
9
بچه های (Child) عنصرها، در CSS
بچه های (Child) عنصرها، در CSS
0
اندازه عنصرها، در CSS
اندازه عنصرها، در CSS
1
موقعیت عنصرها، در CSS
موقعیت عنصرها، در CSS
3
تغییر شکل عنصرها، در CSS
تغییر شکل عنصرها، در CSS
4
عدم نمایش عنصرها، در CSS
عدم نمایش عنصرها، در CSS
2
ساخت انیمیشن، در CSS
ساخت انیمیشن، در CSS
6
لینک ها (Link)، در CSS
لینک ها (Link)، در CSS
6
رنگ ها (Color) و تعیین رنگ، در CSS
رنگ ها (Color) و تعیین رنگ، در CSS
2
فهرست ها (لیست ها - List)، در CSS
فهرست ها (لیست ها - List)، در CSS
2
جدول ها (Table)، در CSS
جدول ها (Table)، در CSS
2
فرم ها (Form)، در CSS
فرم ها (Form)، در CSS
2
دکمه ها (Button)، در CSS
دکمه ها (Button)، در CSS
2
صفحه نمایش (Screen)، در CSS
صفحه نمایش (Screen)، در CSS
0
مباحث عمومی، در CSS
مباحث عمومی، در CSS
5

نویسنده علیرضا گلمکانی
شماره کلید 548
گزینه ها

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

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

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

مثال
طرح رنگ

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

طرح رنگ

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

طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

در کادر بالا، چنانچه اسکرول بار را به بالا یا پایین ببرید، محل منو تغییری نمی کند و ثابت خواهد بود.

کپی برداری توسط سایر وب سایت ها، ممنوع بوده و پیگرد قانونی دارد. (بیشتر بدانید)

گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 2 2 0
سینا الف
۱۴۰۰/۰۴/۱۸
۱۳:۰۷

باسلام!
من از این آموزش‌ سایت‌تون هم خیلی استفاده کردم. ضمن تشکر صمیمانه از مدیریت کلیدستان بابت مطالب مفید و کاربری اش، سوالی درباره ساخت بلاک شناور عمودی داشتم که امیدوارم پاسخ بفرمائید:
1. چرا با وجود اینکه کدها رو به درستی تنظیم و به ویرایش قالبم انتقال دادم، اما منوی شناور نشان داده نمیشه بلکه هرجایی میذارم همانجا با اسکرول صفحه جابجا میشه و ثابت نمی‌مونه؟ خیلی گشتم که با کدام کد یا اسکریپت قبلی تداخل داره اما چیزی خاصی نتونستم پیداکنم. هرچی هم شک داشتم از قالب حذف کردم و توفیقی نداشتم با مرورگرها و سیستم‌های مختلف هم چک می‌کردم تا مطمئن شدم کد سالمه و مشکلی نداره و فقط در این صفحه نمی تونم استفاده کنم. لطفا در این زمینه راهنمایی ام بفرمائید. خیلی ممنون میشم!

آدرس صفحه ای که از کد بلاک شناور در آن استفاده کردم: http://taleshblog.ir/xp/categories

admin
۱۴۰۰/۰۴/۱۸
۱۴:۰۱

سلام.

بنده نیز یک بار با این مشکل مواجه شدم.

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

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

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

طرح رنگ

یا اینکه می توانید آن را دقیقا در قبل از تگ body پایان صفحه قرار دهید :

طرح رنگ

در کل مهم این است که دیگر زیرمجموعه بخش مشکل زا قرار نگیرد.

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

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

جستجو در کلیدستان، توسط گوگل

جستجو در عنوان کلیدها

دسترسی سریع

×

شماره کلید


کلید
×

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


دسته کلید
×

جستجو


جستجو

راهنمای مشخصه های 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

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

مباحث اولیه
مباحث اولیه برای آشنایی با LESS
مباحث اولیه برای آشنایی با LESS
4
بستن دسته بندی
۱۰۴
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
مباحث اولیه برای آشنایی با HTML
24
نمایش متن (Text)، در HTML
نمایش متن (Text)، در HTML
16
نمایش عکس (Image)، در HTML
نمایش عکس (Image)، در HTML
6
لینک ها (Link)، در HTML
لینک ها (Link)، در HTML
2
فهرست ها (لیست ها - List)، در HTML
فهرست ها (لیست ها - List)، در HTML
1
جدول ها (Table)، در HTML
جدول ها (Table)، در HTML
7
فرم ها (Form)، در HTML
فرم ها (Form)، در HTML
21
کلاس های (Class) عنصرها، در HTML
کلاس های (Class) عنصرها، در HTML
1
id عنصرها، در HTML
id عنصرها، در HTML
0
چیدمان عنصرها (Element) در کنار هم، در HTML
چیدمان عنصرها (Element) در کنار هم، در HTML
2
تعیین مشخصات کلی صفحه (Page)، در HTML
تعیین مشخصات کلی صفحه (Page)، در HTML
7
ساختار کلی و بخش بندی صفحه (Page)، در HTML
ساختار کلی و بخش بندی صفحه (Page)، در HTML
2
نمایش یا عدم نمایش عنصرها (Element)، در HTML
نمایش یا عدم نمایش عنصرها (Element)، در HTML
1
عناصر گرافیکی، در HTML
عناصر گرافیکی، در HTML
1
رنگ ها (Color) و تعیین رنگ، در HTML
رنگ ها (Color) و تعیین رنگ، در HTML
1
دکمه ها (Button)، در HTML
دکمه ها (Button)، در HTML
2
پخش صدا (Audio)، در HTML
پخش صدا (Audio)، در HTML
1
کار با کیبورد (Keyboard)، در HTML
کار با کیبورد (Keyboard)، در HTML
2
اطلاعات و پردازش اطلاعات، در HTML
اطلاعات و پردازش اطلاعات، در HTML
1
مباحث عمومی، در HTML
مباحث عمومی، در HTML
6
بستن دسته بندی
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با W3.CSS
مباحث اولیه برای آشنایی با W3.CSS
11
متن ها (Text)، در W3.CSS
متن ها (Text)، در W3.CSS
1
رنگ ها (Color)، در W3.CSS
رنگ ها (Color)، در W3.CSS
6
عکس ها (Image)، در W3.CSS
عکس ها (Image)، در W3.CSS
9
خطوط حاشیه (border)، در W3.CSS
خطوط حاشیه (border)، در W3.CSS
3
حاشیه (Padding و Margin)، در W3.CSS
حاشیه (Padding و Margin)، در W3.CSS
1
کارت ها (Card)، در W3.CSS
کارت ها (Card)، در W3.CSS
1
فونت ها (Font)، در W3.CSS
فونت ها (Font)، در W3.CSS
1
فهرست ها (لیست - List)، در W3.CSS
فهرست ها (لیست - List)، در W3.CSS
4
راهنماها (Tooltip)، در W3.CSS
راهنماها (Tooltip)، در W3.CSS
0
انیمیشن ها (Animation)، در W3.CSS
انیمیشن ها (Animation)، در W3.CSS
5
بستن دسته بندی
۳۵
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

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

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