ვებსაიტის შექმნისას ხშირად ჩნდება აუცილებლობა ჰორიზონტალური მენიუს ყურებაში, რომელიც შეიცავს საიტის მთავარ ნავიგაციას. ჰორიზონტალური მენიუს „დაფიქსირების“ მეთოდი მოსახერხებელია ვიზიტორის თვალსაზრისით, რომელსაც „ნავიგაცია ყოველთვის ხელთ აქვს“, რაც არ უნდა ახვიოთ საჭე ქვემოთ ან ზევით.
ჰორიზონტალური მენიუს დაფიქსირება CSS-ით: position:fixedერთის მხრივ, ყველაფერი მარტივი და ადვილად მოსაგვარებელია CSS-ის გამოყენებით უმოკლეს დროში. ფიქსირებული ჰორიზონტალური მენიუს HTML განლაგების მაგალითი:
- მთავარი
- სიახლეები
- კონტაქტები
- ძიება
ფიქსირებული ჰორიზონტალური მენიუს CSS განლაგება:
# მენიუ-ზედა-თითქმის-ფიქსირდა (პოზიცია: ფიქსირებული; ზედა: 10 პიქსელი; მარცხნივ: 0; სიმაღლე: 30 პიქსელი; სიგანე: 100%; ზღვარი: 0; )
ახლა მოდით დავაყენოთ გვერდის შინაარსის შეწევა მენიუს სიმაღლის ტოლი:
#კონტენტი (ზღვარი ზედა: 30 პიქსელი; )
ახლა ჩვენ "თითქმის" მივაღწიეთ წარმატებას. მენიუ "ყოველთვის თვალსაჩინოა" ვიზიტორებისთვის. მაგრამ რა უნდა გავაკეთოთ, თუ ჩვენს დიზაინში გვაქვს საიტის სათაური, რასაც მოჰყვება თავად მენიუ, ხოლო სათაურში გვაქვს ლოგო, საიტის დევიზი და ბანერები.
კარგად, ჩვენ შეგვიძლია დავაფიქსიროთ საიტის სათაური იმით, რომ შიგთავსის ჩაღრმავება ტოლი იქნება სათაურის და მენიუს სიმაღლეში, მათ შორის ჩაღრმავებასთან ერთად. მაგრამ პრობლემა ჩნდება. ჩვენ მნიშვნელოვნად ვზღუდავთ ნახვის ადგილს ჩვენი ვიზიტორებისთვის გვერდის შინაარსის სანახავად. ქუდის მიტოვების ვარიანტი საერთოდ არ გვიწყობს.
ჰორიზონტალური მენიუს დაფიქსირება Javascript-ის გამოყენებითმაშ ასე, განვიხილოთ ვარიანტი, როდესაც მენიუ „მიდის“ საიტის სათაურის უკან, მაგრამ თუ ვიზიტორი აქტიურად გადადის ქვემოთ, მენიუ „ფიქსირდება“ ზევით და რჩება ადგილზე. საიტის სათაური არ ჩანს. თუ სტუმარი უბრუნდება გვერდის სათაურს, მენიუ „იქცევა“ მის ადგილზე „საიტის სათაურის უკან“. დასაწყისისთვის, აქ არის გვერდის განლაგების მაგალითის სრული HTML განლაგება:
საიტის ლოგო საიტის სლოგანი ბანერი
- მთავარი
- სიახლეები
- კონტაქტები
- ძიება
ჩვენი ვებსაიტის შაბლონი შედგება რამდენიმე ტიპიური სფეროსგან:
- საიტის სათაურები - #სათაურისიმაღლე 150 პიქსელი
- ჰორიზონტალური მენიუ - #მენიუ-ზედა-თითქმის-ფიქსირდა- სიმაღლე 30 პიქსელი,
- გვერდის ძირითადი ინფორმაციის არე – #შინაარსი,
- საიტის ქვედა კოლონტიტული - #ფუტერი.
აქ არის CSS განლაგება:
#მენიუ-ზედა-თითქმის-ფიქსირდა (პოზიცია: დაფიქსირებული; ზღვარი: 0; მარცხნივ: 0; ზედა: 150 პიქსელი; სიმაღლე: 30 პიქსელი; ) #header( ჩვენება: ბლოკი; სიმაღლე: 150 პიქსელი; გადინება: დამალული; პოზიცია: შედარებითი; ზღვარი -ქვემოთ: 55 პიქსელი; ( დისპლეი: ბლოკი; ტექსტის გასწორება: ცენტრში; სიგანე: 100%; float: მარცხნივ; ) #menu-top-almost-fixed ul li( ჩვენება: inline; ხაზის სიმაღლე: 30px; სიგანე: 120px; padding: 0 5px ტექსტის გასწორება: ცენტრში ;
პირველ რიგში, მოდით დავაყენოთ შეწევა სათაურიდან შინაარსამდე, რომელიც ტოლია ჩვენი მენიუს სიმაღლეზე + პატარა შეწევა ესთეტიკური სილამაზისთვის. #header (ზღვარი-ქვედა: 55 პიქსელი;) . მოდით დავაფიქსიროთ ჩვენი მენიუ სათაურის უკან: #menu-top-almost-fixed(პოზიცია: დაფიქსირდა; ზღვარი: 0; მარცხნივ: 0; ზედა: 150 პიქსელი; სიმაღლე: 30 პიქსელი; ) .
ახლა დავრწმუნდეთ, რომ გადახვევისას მენიუ „ასწორებს“ ზუსტად გვერდის ზედა ნაწილში. მოდით ჩავდოთ შემდეგი ჯავასკრიპტი და შორის:
Javascript:
var m1 = 150; /* სათაურის სიმაღლე პიქსელებში */ var m2 = 2; /* ჩაღრმავება, როდესაც სათაური აღარ ჩანს გადახვევის დროს */ var menuID = "menu-top-atly-fixed"; /* ჰორიზონტალური მენიუს id დასამაგრებლად */ var menuOpacityOnChange = "0.7"; /* მენიუს გამჭვირვალობა გადახვევისას: 1 - გაუმჭვირვალე, 0.5 - გამჭვირვალე 0.0 - სრულიად გამჭვირვალე */ var menuOpacityOnChangeIE = menuOpacityOnChange * 100; /* ფუნქცია ჯვარედინი ბრაუზერით განსაზღვრავს შეწევას დოკუმენტის ზემოდან გადახვევის გადახვევის ამჟამინდელ პოზიციამდე */ ფუნქცია getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "რიცხვი" სხვა if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) (//IE6 Strict scrOfY = document.documentElement.scrollTop; ) დააბრუნებს scrOfY ) /* ფუნქცია, რომელიც ადგენს ზედა floating padding-ს " " ფიქსირებული ჰორიზონტალური მენიუ გადახვევის პოზიციისა და ხილვადობის სათაურების მიხედვით */ ფუნქციის marginMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "გაუზუსტებელი" && s)( თუ (ზედა+მ2< m1) { s.style.top = (m1-top) + "px"; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.opacity = "1"; } else { s.style.top = m2 + "px"; s.style.opacity = menuOpacityOnChange; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } marginMenuTop(); } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }
განხორციელების მაგალითი შეგიძლიათ იხილოთ ამ ბმულის შემდეგ და გადახვევის ბორბლის გამოყენებით. ასე რომ, აქ ყველაფერი მარტივია. პარამეტრებში ჩვენ გადავცემთ შემდეგ პარამეტრებს სკრიპტს:
- var m1 = 150;
- var m2 = 2;
- - ჩაღრმავება, როდესაც სათაური აღარ ჩანს გადახვევისას,
- var menuID = "მენიუ-ზედა-თითქმის-ფიქსირდა";
- - დასამაგრებელი ჰორიზონტალური მენიუს ID,
- var menuOpacityOnChange = „0.7“; - მენიუს გამჭვირვალობა გადახვევისას:
- 1 - გაუმჭვირვალე
0.5 - გამჭვირვალე
0.0 - სრულიად გამჭვირვალე
ამ ვერსიაში ჩვენ ოდნავ „დავასწორეთ“ ჩვენი მენიუ და გადახვევისას მას გამჭვირვალობას ვამატებთ. უფრო კლასიკური ვარიანტი მაშინვე გვთავაზობს თავს, როდესაც ჩვენ არ ვცვლით მენიუს გამჭვირვალობას, არამედ უბრალოდ ვაკეთებთ მენიუს ფონს ფონის სახით მენიუს ფერით და ქვედა გამჭვირვალე საზღვრით (რომელშიც გრადიენტი შეუფერხებლად გადადის. ”გაუმჭვირვალე ფერიდან გამჭვირვალეზე):
მოდით შევცვალოთ პატარა CSS განლაგება ჩვენი ჰორიზონტალური ფიქსირებული მენიუსთვის:
Javascript:
#menu-top-almost-fixed(პოზიცია: დაფიქსირებულია; ზღვარი: 0; მარცხნივ: 0; ზედა: 150 პიქსელი; სიმაღლე: 30 პიქსელი; ფონი: url(./images/white-gradient-l.png) ქვედა მარცხენა გამეორება-x )< m1) { s.style.top = (m1-top) + "px"; } else { s.style.top = m2 + "px"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }
ახლა წარმოგიდგენთ შეცვლილ ჯავასკრიპტის კოდს, რომელსაც განვათავსებთ შორის და:
- var m1 = 150;
- var m1 = 150; /* სათაურის სიმაღლე პიქსელებში */ var m2 = 0; /* ჩაღრმავება, როდესაც სათაური აღარ ჩანს გადახვევის დროს */ var menuID = "menu-top-atly-fixed"; /* ფუნქცია ჯვარედინი ბრაუზერით განსაზღვრავს შეწევას დოკუმენტის ზემოდან გადახვევის გადახვევის ამჟამინდელ პოზიციამდე */ ფუნქცია getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "რიცხვი" სხვა if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) (//IE6 Strict scrOfY = document.documentElement.scrollTop; ) დააბრუნებს scrOfY ) /* ფუნქცია, რომელიც ადგენს ზედა floating padding-ს " " ფიქსირებული ჰორიზონტალური მენიუ გადახვევის პოზიციისა და ხილვადობის სათაურების მიხედვით */ ფუნქციის marginMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "გაუზუსტებელი" && s)( თუ (ზედა+მ2
var m2 = 0;
ფუნქცია setMenuPosition())( if(typeof window.addEventListener != "undefined")( window.addEventListener("scroll", marginMenuTop, false); ) else if(typeof window.attachEvent != "undefined")( window. attachEvent ( "onscroll", marginMenuTop);
შემდეგ კოდზე:
ფუნქცია setMenuPosition())( if(typeof window.addEventListener != "undefined")( window.addEventListener("scroll", marginMenuTop, false); ) else if(typeof window.attachEvent != "undefined")( window. attachEvent ("onscroll", marginMenuTop());
გვერდის ჩატვირთვის შემდეგ ჩვენ დაუყოვნებლივ ვუწოდებთ ჩვენს marginMenuTop ფუნქციას, რომელიც შეამოწმებს მენიუს პოზიციას გვერდზე და გამოიყენებს სასურველ სტილს.
ნაწილობრივ ფიქსირებული მენიუს დანერგვა Afixx jQuery მოდულის გამოყენებით Twitter Bootstrap-დანამ თემის გაგრძელებაში თქვენთვის დაიწერა სტატია თითქმის ფიქსირებული მენიუს დანერგვის შესახებ jQuery Affix მოდულის გამოყენებით Twitter Bootstrap ჩარჩოდან.
რომლებიც სულ უფრო ხშირად გვხვდება ბლოგებისა და სხვა რესურსების გვერდებზე. ასეთი სანავიგაციო ზოლების გამოყენება საკმაოდ გამართლებულია. jQuery-ის ამ დანამატების აქტიური გამოყენების ერთ-ერთი მთავარი მიზეზი ის არის, რომ მენიუ ყოველთვის ვიზიტორთა ხელთაა, თუნდაც ის გვერდის ბოლოში იყოს. გარდა ამისა, ფიქსირებული მენიუ იკავებს მცირე ადგილს და არ აშორებს ყურადღებას ძირითადი შინაარსისგან. ზოგადად, ფიქსირებული მენიუ აუმჯობესებს საიტის გამოყენებადობას.
მე შევკრიბე საუკეთესო, ჩემი აზრით, უფასო jQuery დანამატების კოლექცია ფიქსირებული მენიუს განსახორციელებლად. მე ვცდილობდი დავრწმუნებულიყავი, რომ თითოეული დანამატი გარკვეულწილად უნიკალური იყო, რათა შერჩეულიდან ნებისმიერი დანამატი გამოყენებული იქნას კონკრეტულად თქვენს პროექტში. კოლექციაში შეგიძლიათ იპოვოთ როგორც მარტივი, ასევე უფრო რთული დანამატები ანიმაციით და ა.შ.
თუ გჭირდებათ ძალიან მარტივი ფიქსირებული მენიუ, როგორიც არის, როგორ დავაყენეთ წებოვანი პანელი სოციალური ღილაკებით, შეგიძლიათ გააკეთოთ jQuery დანამატების გარეშე, რადგან სკრიპტებით გვერდის ჩატვირთვა არც თუ ისე კარგია, მაგრამ ამაზე ვისაუბრებთ შემდეგ სტატიებში. გამოიწერეთ ჩვენი არხი ან გვერდები, რათა არ გამოტოვოთ საინტერესო მასალები.
ასე რომ. აქ არის 6 jQuery დანამატი ფიქსირებული მენიუს შესაქმნელად.
ბოლო დროს მოდური გახდა ტენდენცია: ფიქსირებული მენიუ გვერდის გადახვევისას. ჩვეულებრივ, ეს არის ჰორიზონტალური მენიუ Landing Page საიტებზე.
როგორ მუშაობს ეს არის ის, რომ როდესაც გვერდი იტვირთება, მენიუ მდებარეობს გვერდის გარკვეულ ადგილას (მაგალითად, "სათაურის" ქვეშ), ხოლო გვერდის გადახვევისას ის ფიქსირდება ბრაუზერის ფანჯრის ზედა ნაწილში და არ გადახვევს სხვა შინაარსის მსგავსად.
თუ სტუმარი გადახვევს გვერდს და მიაღწევს გვერდის საწყისს, მენიუ უბრუნდება თავის ადგილს. ამრიგად, ვიზიტორს, მყოფი გვერდის ნებისმიერ ადგილას, შეუძლია გამოიყენოს იგი და გადავიდეს საიტის სხვა გვერდებზე. ეს არის ძალიან მოსახერხებელი და შეესაბამება გამოყენების პრინციპებს.
ახლა მე გეტყვით, თუ როგორ უნდა განახორციელოთ ასეთი მენიუ თქვენი დროის მინიმალური დახარჯვით და პროფესიონალების დახმარების გარეშე.
პირველ რიგში, ჩვენ უნდა დავაკავშიროთ jQuery ბიბლიოთეკა საიტისთვის
< script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" >
შეგიძლიათ დაუკავშირდეთ ადგილობრივად ან გუგლის საშუალებით.
ადგილობრივად დასაკავშირებლად, თქვენ უნდა ჩამოტვირთოთ jQuery ფაილი ოფიციალური ვებსაიტიდან http://jquery.com/
CSS
JavaScript
სკრიპტში ჩვენ ვქმნით 2 ცვლადს, რომელშიც ვინახავთ სათაურის სიმაღლის მნიშვნელობებს და ბლოკის ჩაღრმავებას მენიუს ზედა ნაწილში. შეიძლება არ იყოს ჩაღრმავება (როგორც ამ შემთხვევაში). შემდეგ ვწერთ დამმუშავებელს ფანჯრის ობიექტის onScroll მოვლენისთვის. მასში, scrollTop() მეთოდის გამოყენებით, ჩვენ ვიანგარიშებთ მანძილს გვერდის ზემოდან scroll scroller-ის მიმდინარე პოზიციამდე. გაანგარიშებიდან გამომდინარე, ჩვენ განვათავსებთ ბლოკს მენიუსთან ერთად.
ეს ყველაფერია, მარტივი გადაწყვეტილებების წყალობით შეგიძლიათ მიაღწიოთ ლამაზ ფიქსირებულ მენიუს, რომელიც არ გადახვევს საიტის ძირითადი ნაწილის გადახვევისას
პირველი, რასაც ჩვენ გავაკეთებთ, არის ჩასვით ჩვენი HTML კოდი თქვენს საიტზე, სადაც გსურთ მენიუს ნახვა.
- მთავარი
- WordPress
- HTML5 & CSS3
- PHP
მენიუს ენიჭება ნაგულისხმევი კლასი, რომლის წყალობითაც ჩვენს jquery-ს შეუძლია დაადგინოს, რომ ეს კონკრეტული ბლოკი შემდეგ უნდა იყოს ჩამაგრებული ზევით.
2. jQuery კოდისათაურში, დახურვის თავამდე, ჩადეთ კოდი. როგორც ზემოთ დავწერე, ის განსაზღვრავს ბლოკს კლასის ნაგულისხმევად და გადახვევის შემდეგ ანიჭებს მას class fixed . საჭიროების შემთხვევაში შეგიძლიათ შეცვალოთ კლასების სახელები. მაგრამ უბრალოდ ფრთხილად იყავით და არაფერი გამოტოვოთ, წინააღმდეგ შემთხვევაში ყველაფერი უბრალოდ შეწყვეტს მუშაობას. თქვენ უნდა შეცვალოთ jQuery, HTML და CSS.
$(document).ready(function())( var $menu = $("#menu"); $(window).scroll(function())( if ($(this).scrollTop() > 100 && $ მენიუ hasClass("ნაგულისხმევი"))($menu.fadeOut("სწრაფი",ფუნქცია())($(this).removeClass("ნაგულისხმევი") .addClass("ფიქსირებული transbg") .fadeIn("სწრაფი") ;)) ) else if($(this).scrollTop() $(window).height())($("nav").css("სიმაღლე": $("nav").სიმაღლე() "width ": $("nav").width())).addClass("ფიქსირდა")else($("nav").removeClass("ფიქსირებული"); ) ));
ანუ, გვერდის გადახვევისას ვამოწმებთ „უფრო მეტია თუ არა გვერდის გადახვევის რაოდენობა ფანჯრის სიმაღლეზე“ და თუ მეტია, ჩვენ მენიუში ვამატებთ ფიქსირებულ კლასს (და მივუთითებთ სიმაღლეს და სიგანეს, რადგან პოზიციის გამოყენებისას: დაფიქსირდა, ბლოკის ზომები დაკარგულია), წინააღმდეგ შემთხვევაში, წაშალეთ ეს კლასი.
ფიქსირდება (პოზიცია: ფიქსირებული; ზედა: 0; მარცხნივ: 0; )
ანუ, თუ ასეთი კლასი არსებობს, ობიექტი ფიქსირებული გახდება.
მზადაა. მენიუ დარჩება მხოლოდ მაშინ, როდესაც მომხმარებელი გადაახვევს გვერდს ეკრანის ზომაზე მეტად. რა თქმა უნდა, თქვენ შეგიძლიათ დააფიქსიროთ მენიუ მას შემდეგ, რაც მომხმარებელი გადაახვევს გვერდს თავად მენიუს ოდენობით ან წინასწარ განსაზღვრული მნიშვნელობით.
ჩვენ ყოველთვის ვასწორებთ მენიუს (შესწორების მეორე ვარიანტი)ამ მეთოდისთვის ჩვენ უბრალოდ გვჭირდება CSS. ჩვენ სამუდამოდ დავაფიქსირებთ მენიუს და სურვილის შემთხვევაში გავაკეთებთ ზედა ჩაღრმავებას ტანზე ისე, რომ ნულზე გადასვლისას მენიუ არ გადაფარავს დანარჩენ შინაარსს.
