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

توضیحات مقاله:

1. "نوار کناری / نوار کناری" - نوار ناوبری سایت.
2. "Position" یک ویژگی در CSS است.
3. "بالا"، "چپ"، "راست"، "پایین" ویژگی های حرکت CSS هستند.
4. وردپرس یک سیستم مدیریت محتوای وب سایت/CMS است.
5. Webix - کتابخانه UI. به شما امکان می دهد عناصر جدول ایجاد کنید.
6. View یک تابع جاوا اسکریپت است.

این مقاله نشان خواهد داد راه های مختلفایجاد پانل های ناوبری، هم به صورت دستی و هم با کمک سازنده های خاص سایت. مثال ما از وردپرس استفاده می کند.

چگونه به صورت دستی یک نوار کناری بسازیم؟ CSS و HTML

اکنون روش سنتی توسعه یعنی نوشتن کد را نشان خواهیم داد ویرایشگر متن. برای انجام این کار، باید اسناد HTML و CSS را در یک ویرایشگر کد باز کنید.

ایجاد یک نوار کناری در سمت راست. HTML و CSS

اغلب، نوار ناوبری یا در سربرگ سایت یا در سمت راست آن قرار دارد. در حالت دوم معمولا از طرح 2 ستونی استفاده می شود.

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

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

نوار ناوبری را می توان با استفاده از لیست ها و بلوک های معمولی ایجاد کرد. اگر از لیست ها استفاده می کنید، ویژگی "تکست-تزیین" را برای آنها غیرفعال کنید.

در مثال ما، از ساخت بلوک div استفاده شده است.

برای شروع، ما یک بلوک div مشترک ایجاد می کنیم که در آن ستون ها قرار می گیرند. بیایید یک کلاس برای آن ایجاد کنیم، در مثال ما از کلاس layout استفاده شده است، اما این به ویژه بر روند توسعه تأثیر نمی گذارد.

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

بیایید با موقعیت یابی شروع کنیم. برای کانتینر کلی، موقعیت نسبی - خاصیت (موقعیت: نسبی) را تنظیم می کنیم. برای ستون ها، ویژگی (موقعیت: مطلق) تنظیم شده است.

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

در مثال ما، کد به صورت زیر است:

HTML

کپی 🀄

css

چیدمان (

موقعیت: نسبی;

پس زمینه: rgba(119, 115, 115, 0.58);

}

نوار کناری , .content ( موقعیت: مطلق ; )

نوار کناری(

پس زمینه: #C6DD7D;

محتوا(

پس زمینه: #F4ECCE;

کپی 🀄

توجه! حتماً برای هر آیتم ناوبری جداگانه یک عرض مشخص کنید. نکته این است که دارند موقعیت یابی مطلق، یعنی عرض آنها برابر با عرض محتوای داخلی خواهد بود.

همچنین می خواهیم توجه داشته باشیم که در ابتدا ستون دوم و سپس ستون اول قرار می گیرد. استفاده كردن این روشمهم نیست، زیرا ستون ها را می توان به راحتی تعویض کرد.

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

ایجاد یک نوار ناوبری در سمت راست. HTML و CSS

برای ایجاد چنین پنلی می توانید از همان نشانه گذاری مثال اول استفاده کنید. کد CSS نیز نیازی به تغییر زیاد ندارد.

باید تنظیمات کوچکی در کد CSS خود انجام دهید. این لازم است تا منو در سمت راست قرار گیرد. ما خصوصیات عرض و موقعیت را تغییر نمی دهیم!

چگونه یک نوار کناری در وردپرس ایجاد کنیم؟

حال بیایید روشی را بررسی کنیم که بسیار متفاوت از روش قبلی است. تفاوت این است که شما می توانید ناوبری بهتری را بدون کد CSS یا HTML ایجاد کنید.

نیازی نیست همه کدها را به صورت دستی بنویسید، همه کارها در خود سازنده انجام می شود.

در با استفاده از وردپرسباید نوار ناوبری را ثبت کنید و چند ابزارک به آن اضافه کنید.

برای ثبت یک نوار کناری در وردپرس، باید چند تابع را در آن بنویسید فایل های PHP. اساساً به آرایه‌هایی از داده‌ها نیاز دارید که به ویجت‌ها و تگ‌های div آنها اشاره می‌کنند.

در مثال ما، نوار کناری سمت راست و همچنین نوار کناری فوتر در نظر گرفته شده است.

چند کلمه در مورد webix

چارچوب ویژه دیگری وجود دارد که به شما امکان می دهد این نوار کناری را ایجاد کنید. مزیت اصلی آن این است که به شما امکان می دهد فقط با چند خط کد یک داشبورد خوب بسازید.

ابتدا باید این فریمورک را دانلود کنید. پس از آن، پیوندهایی به سبک ها و اسکریپت های آن در سند HTML خود ارائه دهید.

پس از آن، می توانید شروع به ایجاد نوار کناری کنید. برای قرار دادن آن در چارچوب، یک عملکرد ویژه وجود دارد - view. که برای قرار دادن عناصر قرار خواهد گرفت.

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

نتیجه

در این مقاله، ما چند روش اساسی برای ایجاد یک نوار ناوبری را توضیح داده ایم، اما روش های بسیار دیگری نیز وجود دارد. شما حتی می توانید راه خود را بر اساس تجربه ما ارائه دهید.

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

برچسب ها:

الزامات چیدمان چیست؟

• طرح دو ستون لاستیکی
• نوار کناری ثابت عرض 300 پیکسل
• محتوا به بقیه عرض کشیده می شود.
• فوتر به پایین فشار داده شده است (در این آموزش من نحوه انجام این کار را نشان نمی دهم).

چه مشکلاتی در Css هنگام چیدمان چنین طرح‌بندی ایجاد می‌شود:

1 راه.

اگر بلوک ها را شناور کنید، شما باید به آنها یک عرض ثابت بدهد(شما نمی توانید 1 نوار کناری را روی 300 پیکسل و محتوا را روی 100٪ تنظیم کنید). خوب، نکته اصلی برای درک این است که این روش برای ما مناسب نیست.

2 راه.

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

3 راه.

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

اما در مورد من، این نیز راه خوبی نیست!

4 راه.

"راه عالی، اگر نقصی دارد لطفا نظر دهید. اما من فکر می کنم این بهترین راه است."

• مزایای این روش: اولاً محتوای DOM قبل از نوار کناری می رود که برای موتورهای جستجو خوب است.
• هیچ چیز در پاورقی جا نمی شود
• هر بلوکی را می توان پاک کرد و هیچ چیز به مرز پایین نمی لغزد (بنابراین ما بر مشکلات روش دوم غلبه کردیم).

به طور کلی نحوه کار:به کد نگاه کنید ابتدا محتوا و سپس نوار کناری قرار می گیرد. شناور را روی این دو بلوک قرار می دهیم (البته نوار کناری به پایین می لغزد). پس از آن، ویژگی نوار کناری حاشیه سمت چپ:-100٪ را تنظیم می کنیم. عالی است، به جای خود برگشته است و محتوا را با margin-lerft:300px تورفتگی کنید.

html

css

نوار کناری (
عرض: 300 پیکسل
display:block;
شناور به سمت چپ؛
حاشیه: 0 0 0 -100%؛
}
.محتوا(
حداقل عرض: 723 پیکسل;
display:block;
شناور به سمت چپ؛
حاشیه: 0 0 0 220 پیکسل؛
}

ساده ترین مثال از نوار کناری شناور ثابت در HTML+CSS+JS.

ویژگی آن چیست - هنگام پیمایش، نوار کناری به بالای پنجره می‌چسبد، اما در عین حال، وقتی نوار کناری به پاورقی پیمایش می‌کند، از بالای صفحه جدا می‌شود و به خود می‌چسبد. پایینبه پاورقی، در نتیجه روی پاورقی همپوشانی ندارد (پانویس باید بالا باشد). اگر می دانید منظورم چیست.

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

نشانه گذاری HTML برای یک صفحه ساده

سبک های CSS برای بلوک های محتوا

.هدر (عرض: 100%؛ پس‌زمینه: بنفش؛ ارتفاع: 80 پیکسل؛ ) .محتوا (عرض: 80%؛ پس‌زمینه: آبی؛ ارتفاع: 800 پیکسل؛ شناور: سمت چپ؛ ) .نوار کناری (عرض: 20%؛ پس‌زمینه: سبز. ارتفاع: 100 پیکسل؛ شناور: سمت راست؛ ) نوار کناری ثابت (موقعیت: ثابت؛ سمت راست: 50٪؛ حاشیه-راست: -50٪؛ ) .پانویس (عرض: 100٪؛ پس زمینه: خاکستری؛ ارتفاع: 500 پیکسل؛ واضح: هر دو؛ )

اسکریپت JS برای نوار کناری ثابت در اسکرول صفحه

فراموش نکنید که jQuery را نیز اضافه کنید

$(function( ( var $window = $(window); var $sidebar = $(".sidebar"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height() var $footer = $(".footer")؛ var $footerTop = $footer.position().top؛ $window.scroll(function(رویداد) ($sidebar.addClass("ثابت")؛ var $scrollTop = $window.scrollTop(); var $topPosition = Math.max(0، $sidebarTop - $scrollTop)؛ if ($scrollTop + $sidebarHeight > $footerTop) ( var $topPosition = Math.min($topPosition، $footerTop - $scrollTop - $sidebarHeight)؛ ) $sidebar.css("top"، $topPosition)؛ ));

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

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

من YAN، تیزرها / بنرهای خود را در چنین بلوک هایی قرار می دهم و گاهی اوقات به جای تبلیغات، پست های مشابه یا اطلاعات مفیدی را برای بازدید کننده به نمایش می گذارم.

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

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

کارآمدترین راه

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

در زیر نمونه ای از یک بلوک شناور است که تقریباً در هر سایتی که من آن را نصب کرده ام، کار کرده است. هیچ بزی وجود نداشت. موتور نیز مهم نیست (DLE، WordPress، LiveStreet، و غیره).

کد HTML زیر را در محل دلخواه نوار کناری قرار دهید:

$(window).scroll(function() (
var sb_m = 20 ; /* بالشتک بالا و پایین */
var mb = 300 ; /* ارتفاع زیرزمین با حاشیه */
varst = $(window).scrollTop() ;
var sb = $(".sticky-block" ) ;
var sbi = $(".sticky-block .inner" );
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height () ;

If(sb_h + $(document).scrollTop() + sb_m + mb< $(document) .height () ) {
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop" : h) );
}
دیگر(
sb.css(( "paddingTop" : 0 ) );
}
}
} ) ;

در این کد می توانید بالا، پایین و ارتفاع فوتر خود را تنظیم کنید. ارتفاعی که بلوک باید در آن متوقف شود.

اکنون ما JS را اضافه می کنیم. برای این کار در قسمت HEAD بنویسید:

می توانید با قرار دادن این کد بین تگ های سر باز و بسته و قرار دادن آن در تگ های اسکریپت از خود فایل header.php استفاده کنید، مانند:

همچنین می توانید این کد را در تگ های اسکریپت در هر جای دیگری بنویسید. نکته اصلی این است که در صفحات سمت راست وبلاگ بارگذاری می شود. به عنوان مثال، شما می توانید در footer.php قبل از بسته شدن تگ بدن.

حالا بیایید مستقیم به این کد برویم. به نظر می رسد که پس از 10 پیکسل از بالا، موقعیت نسبی با یک ثابت جایگزین می شود (مقاله را در لینک بالا ببینید). در صورت لزوم، در خط با else، می توانید مقداری غیر از صفر را برای top انتخاب کنید، و سپس منوی ثابت در بالا از لبه بالایی درگاه نمای با این مقدار پیکسل فرورفته می شود (به نظر من این اضافی است) .

برخلاف کد اصلی، من باید عرض را نیز اضافه کنم: "100٪"، زیرا در غیر این صورت اندازه منو در عرض کاهش می یابد که کل تصویر را خراب می کند.

نگاه کنید، برای وضوح، کد Html را که منوی بالایی را در قالب وبلاگ وردپرس من تشکیل می دهد (در فایل header.php من از ) ارائه می کنم:

در قالب شما، به احتمال زیاد، خروجی آیتم های منو با استفاده از چنین ساختاری (عملکردی) تنظیم می شود، اما این موضوع نیست.

تابع wp_list_pages البته خوب است (به شما امکان می‌دهد مرتب‌سازی را پیکربندی کنید، استثناها را تنظیم کنید، و غیره)، اما بهتر است همانطور که در بالا نشان داده شده است همه چیز را به صورت دستی از طریق Html ساده انجام دهید. IMHO.

در اینجا مهم است که درک کنیم که کل موضوع به نتیجه رسیده است به کانتینر div و بالاتریندارای ویژگی id="navi" است. در اینجا ما به آن می چسبیم. در کد JS بالا می بینید که دو بار اتفاق می افتد #ناوی? شما باید ID خود را به جای #navi (یا یک کلاس، که همانطور که به یاد دارید، نه از طریق هش، بلکه از طریق یک نقطه، به عنوان مثال، مانند این: .menu) در آنجا قرار دهید.

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

می بینید که این خوب نیست. بنابراین، مجبور شدم کمی وارد کد CSS شده و با مقدار 1000 برای شناسه انتخابگر #navi اضافه کنم:

#navi(background:#03658e url(https://website/wp-content/themes/Organic/images/spriteme2.png) repeat-x;background-position:0px -10px;height:31px;z-index:1000 )

واقعیت این است که وقتی یکی از سه نوع موقعیت یابی را با استفاده از Position تنظیم می کنید، این عنصر با عناصر معمول کد Html ارتباط برقرار نمی کند. اما با سایر موقعیت های مشابه، برای موقعیت "بالا یا پایین" رقابت خواهد کرد. z-index:1000 به ما امکان می دهد منوی خود را به وضوح بالاتر از سایر بلوک ها قرار دهیم. برای جزئیات بیشتر مقاله بالا را بخوانید.

چگونه یک نوار کناری شناور در وردپرس بدون افزونه بسازیم

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

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

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

پس من فقط گرفتم برای ایجاد بلوک پایینمن قسمت بالای سایدبار اصلی خود را (در قالب sidebar.php) جابجا کردم، سپس آن را از بالا به بلوک پایین انتقال دادم «برای پول درآوردن از آن استفاده می‌کنم» و در انتها انتهای آن را در قسمت اصلی چسباندم. مسدود کردن. چیزی شبیه این معلوم شد:

خوب، اکنون بلوک «من برای درآمد استفاده می‌کنم» از بلوک بالای نوار کناری به قسمت پایین منتقل شده است. معلوم شد که یک چشمه نیست، اما برای یک "موقت" انجام خواهد شد. فقط باید همه اینها را در یک فایل JS با کد مرتب کنیم و بلوک پایین شروع به شناور شدن می کند. کد JS به شکل زیر است:

$(document).ready(function()( var br = $.browser; $(window).scroll(function() ( var top = $(document).scrollTop(); if (بالا< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version >7))) ($(".sidebar123").css((بالا: "52px"، موقعیت: "تثبیت"، حاشیه چپ: "760px")؛ ) در غیر این صورت اگر ((br.msie) && (br.version<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

توجه داشته باشید که به جای .sidebar123، باید کلاس خود یا شناسه کانتینر بیرونی را که بلوک پایین نوار کناری شما در آن زندگی می کند، جایگزین کنید.

من این کد را به خوبی درک نمی کنم (JS را نمی دانم)، اما همه چیز کار می کند. حداقل تا حدی. وقتی موقعیت‌یابی ثابت را تنظیم می‌کنید، گزارش از نقطه بالا سمت چپ است. بنابراین، با marginLeft: "760px" من این بلوک را دقیقاً در سطح نوار کناری قرار می دهم (عدد از طریق "آزمایش و خطا" به دست آمد).

مقدار top: "52px" بالشتک بلوک نوار کناری از قبل شناور را از حاشیه بالایی تنظیم می کند. ارزش بالا با این حال، من دارم مشکلی بوددر صورتی که ارتفاع کل نوار کناری اصلی کمتر از ارتفاع ناحیه محتوا باشد. چنین چیزی برای مثال هنگام مشاهده آرشیو عناوین آشکار شد:

از نقطه نظر CSS، من می‌دانم که چرا این اتفاق می‌افتد، اما من خیلی تنبل بودم که به یک راه حل فکر کنم. من فقط مجبور شدم از نشان دادن این بلوک نوار کناری شناور در چنین صفحاتی خودداری کنم (در آنجا نیازی به آن نیست).