Здравейте, днес ще говорим с вас за това как да създадете своя собствена навигационна лента за сайта. Използва се на почти всеки интернет ресурс, така че всеки разработчик трябва да може да създаде този елемент.

Пояснения към статията:

1. "Sidebar / странична лента" - лента за навигация на сайта.
2. „Позиция“ е свойство в CSS.
3. „Отгоре“, „вляво“, „вдясно“, „отдолу“ са свойства на CSS движение.
4. WordPress е система за управление на съдържанието на уебсайтове/CMS.
5. Webix - UI библиотека. Позволява ви да създавате елементи на таблица.
6. View е функция на JavaScript.

Тази статия ще покаже различни начинисъздаване на навигационни панели, както ръчно, така и с помощта на специални конструктори на сайтове. Нашият пример използва WordPress.

Как да направите странична лента ръчно? CSS и HTML

Сега ще покажем традиционния начин на разработка, а именно писане на код текстов редактор. За да направите това, трябва да отворите HTML и CSS документите в редактор на кодове.

Създаване на странична лента от дясната страна. HTML и CSS

Най-често лентата за навигация се намира или в заглавката на сайта, или от дясната му страна. Във втория случай обикновено се използва оформление с 2 колони.

Добре е предварително да имате готово оформление, тъй като знаете ширината навигационен блок. Ако оформлението липсва, това няма да попречи на развитието.

внимание! Когато създавате странични ленти и други елементи на сайта, подгответе предварително готово оформление. Фокусирайки се върху него, ще опростите процеса на разработка.

Навигационната лента може да бъде създадена с помощта на списъци и обикновени блокове. Ако използвате списъци, деактивирайте свойството "text-decoration" за тях.

В нашия пример се използва блокова конструкция div.

Като начало създаваме общ div блок, в който ще бъдат разположени колоните. Нека създадем някакъв клас за него, в нашия пример се използва класът на оформлението, но това не засяга особено процеса на разработка.

Основният блок ще се използва за създаване на позициониране, както и за оразмеряване.

Да започнем с позиционирането. За общия контейнер задаваме относителното позициониране - свойство (позиция: относителна). За колони се задава свойството (позиция: абсолютно).

Когато използвате този тип, ще ви бъде по-лесно да позиционирате колони вътре в блока. За да направим това, ще използваме свойствата на изместване: , , и .

В нашия пример кодът изглежда така:

HTML

копие

css

оформление (

позиция: роднина;

фон: rgba(119, 115, 115, 0.58);

}

Странична лента, .content (позиция: абсолютна;)

странична лента(

фон: #C6DD7D;

съдържание(

фон: #F4ECCE;

копие

внимание! Не забравяйте да посочите ширина за всеки отделен навигационен елемент. Въпросът е, че имат абсолютно позициониране, което означава, че тяхната ширина ще бъде равна на ширината на вътрешното съдържание.

Също така искаме да отбележим, че в първата колона е поставена втората, а след това първата. Използвайки този методняма значение, тъй като колоните могат лесно да се сменят.

Можете също да използвате свойството float за това. Този метод е много по-прост, тъй като разчита на обвиване на елементи. Благодарение на него нашият страничен прилеп ще бъде разположен от дясната страна.

Създаване на лента за навигация от дясната страна. HTML и CSS

За да създадете такъв панел, можете да използвате същата маркировка, както в първия пример. CSS кодът също не трябва да се променя много.

Трябва да направите малки корекции на вашия CSS код. Това е необходимо, така че менюто да се намира от дясната страна. Ние не променяме свойствата на ширината и позицията!

Как да създадете странична лента в WordPress?

Сега нека разгледаме метод, който е много различен от предишния. Разликата е, че можете да създадете по-добра навигация с малко или никакъв CSS или HTML код.

Няма да е необходимо да пишете целия код ръчно, цялата работа ще се извърши в самия конструктор.

При с помощта на WordPressще трябва да регистрирате навигационната лента и да добавите някои джаджи към нея.

За да регистрирате странична лента в WordPress, ще трябва да напишете няколко функции PHP файлове. По принцип ще ви трябват масиви от данни, които ще се отнасят до уиджетите и техните тагове div.

В нашия пример се разглежда дясната странична лента, както и страничната лента на долния колонтитул.

Няколко думи за webix

Има друга специална рамка, която ще ви позволи да създадете тази странична лента. Основното му предимство е, че ви позволява да направите добро табло само с няколко реда код.

Първо трябва да изтеглите тази рамка. След това дайте връзки към неговите стилове и скриптове във вашия HTML документ.

След това можете да започнете да създавате страничната лента. За да го поставите в рамката, има специална функция - изглед. Което ще постави място за поставяне на елементи.

Недостатъкът на тази рамка са нейните ограничения. Когато го използвате, няма да можете да създадете наистина уникално творение, тъй като панелът не е ограничен от вашето въображение, а само от няколко функции.

Заключение

В тази статия разгледахме няколко основни начина за създаване на лента за навигация, но има много повече. Можете дори да измислите свой собствен начин въз основа на нашия опит.

В тези примери е показана проста лента за навигация. Ако работите малко програмен код, тогава можете да получите истински шедьовър.

Тагове:

Какви са изискванията за оформлението?

• Гумено двуколонно оформление
• страничната лента с фиксирана ширина 300px
• съдържанието се разтяга до останалата част от ширината.
• долен колонтитул, притиснат до дъното (в този урок няма да покажа как се прави това).

Какви проблеми с Css възникват при изготвянето на такова оформление:

1 начин.

Ако плувате блокове, вие трябва да им даде фиксирана ширина(не можете да зададете 1 странична лента на 300px и съдържание на 100%). В този случай или съдържанието се плъзга надолу, или се появява 300px хоризонтално превъртане наляво. Е, основното нещо, което трябва да разберем, е, че този метод не ни подхожда.

2 начина.

Много наборчици предлагат този метод, за какво си мислят?! Същността на метода е, че можете да настроите страничната лента да плава с ширина 300, а не да плава съдържанието и да му зададете margin-left: 300px. Добър начини изглежда всичко се получава толкова добре. Честно казано, мислех, че това е най-добрият начин, но този метод има своите клопки. Причините за изоставянето на този метод са, че ако внезапно създадем в съдържанието, например, меню с плаващи li или други плаващи блокове и след това искаме да ги изчистим с clear:both, тогава долната граница на този блок се плъзга надолу до нивото на долната граница на страничната лента (Какво и не е странно, тъй като пяната е изчистена, можете да избегнете това, ако задайте плаващ блок на фиксирана височина, но изобщо не е така да зададете фиксирана височина).

3 начина.

Може да се използва за абсолютна позиция на страничната лентано само ако ти сигурни сме, че съдържанието ще бъде по-голямо от страничната лента по височинав противен случай цялото съдържание на страничната лента ще се побере в долния колонтитул (в края на краищата абсолютното позициониране излиза от общия поток).

Но за мен това също не е много добър начин!

4 начин.

„Страхотен начин, ако има недостатъци, моля, коментирайте. Но мисля, че това е най-добрият начин.“

• Предимства на този метод: първо, съдържанието на DOM ще бъде преди страничната лента, което е добре за търсачките.
• нищо няма да пасне на долния колонтитул
• всички блокове могат да бъдат изчистени и нищо няма да се плъзне към долната граница (Така че преодоляхме проблемите на втория метод).

Като цяло как работи:погледнете кода, първо идва съдържанието, последвано от страничната лента. задаваме float на тези два блока (разбира се страничната лента се плъзга надолу). след това задаваме свойството на страничната лента margin-left:-100%. страхотно, върна се на мястото си и направете отстъп на съдържанието с margin-lerft:300px.

html

css

.sidebar(
ширина:300px;
дисплей:блок;
поплавък: наляво;
марж: 0 0 0 -100%;
}
.съдържание(
min-width:723px;
дисплей:блок;
поплавък: наляво;
поле: 0 0 0 220px;
}

Най-простият пример за фиксирана плаваща странична лента в HTML+CSS+JS.

Каква е неговата особеност - при превъртане страничната лента се залепва за горната част на прозореца, но в същото време, когато страничната лента се превърта до долния колонтитул, тогава тя се отделя от горната част на екрана и се залепва за своя отдолукъм долния колонтитул, като по този начин не припокрива долния колонтитул (долният колонтитул трябва да е висок). Ако ме разбираш.

Примерът е взет от някакъв сайт и е много примитивен (и морално остарял), подходящ само за това оформление. Още универсален код можете да намерите в тази статия и вече можете да напишете свой собствен код за вашия проект.

HTML маркиране за проста страница

CSS стилове за блокове със съдържание

.header (ширина: 100%; фон: лилав; височина: 80px; ) .content (ширина: 80%; фон: син; височина: 800px; float: ляво;) .sidebar (ширина: 20%; фон: зелен; височина: 100px; float: дясно; ) .sidebar.fixed (позиция: фиксирана; дясно: 50%; margin-right: -50%; ) .footer (ширина: 100%; фон: сив; височина: 500px; ясно: и двете; )

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(event) ( $sidebar.addClass("fixed"); 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); )); ));

Плаващ блок (или както се нарича още движещ се, фиксиран, заседнал) е необходим на сайта, така че потребителят да вижда един фиксиран елемент при превъртане на страницата, в която най-често се поставя реклама (тийзъри, банери или контекст).

Уви, правилата на adsense ни забраняват това. Много собственици на сайтове обаче пренебрегват правилата на свой собствен риск. Може би дори не са наказани за това, но не бих ги посъветвал да поемат рискове.

Поставям YAN, моите тийзъри/банери в такива блокове и понякога, вместо реклама, показвам подобни публикации или някаква полезна информация за посетителя.

Нека ви кажем как можете да направите плаващ блок на вашия сайт.

Задача:направете последния блок в страничната лента (страничната лента) плаващ. Освен това, така че да се залепи само в момента, в който потребителят го достигне чрез скролиране, а не веднага след отваряне на страницата. Също така, блокът трябва да „стърчи“, достигайки долния колонтитул (т.е. да не го припокрива).

Най-работещият начин

Има много реализации на лепкавия блок, но не всички от тях работят правилно. Ще кажа от личен опит: Същият метод за инсталиране на блок може да работи на един сайт, но задръстванията се появяват на друг.

По-долу е даден пример за плаващ блок, който е работил на почти всеки сайт, на който съм го инсталирал. Кози нямаше. Двигателят също не е важен (DLE, WordPress, LiveStreet и др.).

Поставете следния HTML код в желаното място на страничната лента:

$(window).scroll(function() (
var sb_m = 20; /* горна и долна подложка */
var mb = 300; /* височина на мазето с поле */
varst = $(прозорец).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, като затворите този код между отварящия и затварящия тагове head и го опаковате в тагове на скрипт, като така:

Можете също да напишете този код в тагове на скрипт навсякъде другаде. Основното е, че се зарежда на правилните страници на блога. Например можете в footer.php преди затварящия таг body.

Сега да преминем директно към този код. Оказва се, че след 10 пиксела отгоре, относителното позициониране се заменя с фиксирано (вижте статията на линка по-горе). Ако е необходимо, в реда с else можете да изберете стойност за top, а не нула, и след това менюто, фиксирано в горната част, ще отстъпи от горния ръб на прозореца с тази стойност на пиксела (по мое мнение това е излишно).

За разлика от оригиналния код, трябваше да добавя и ширина: "100%", защото в противен случай размерът на менюто по ширина щеше да намалее, което развали цялата картина.

Вижте, за по-голяма яснота ще дам Html кода, който формира горното меню в шаблона на моя WordPress блог (живее в моя файл header.php от):

Във вашия шаблон най-вероятно изходът на елементи от менюто ще бъде зададен с помощта например на такава конструкция (функция), но това не е важното.

Функцията wp_list_pages, разбира се, е добра (тя ви позволява да персонализирате сортирането, да задавате изключения и т.н.), но е по-добре да правите всичко ръчно чрез обикновен Html, както е показано по-горе. IMHO.

Тук е важно да се разбере, че целият въпрос е завършен в контейнер divs и най-горнияима атрибут 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 )

Факт е, че когато зададете един от трите вида позициониране с помощта на позиция, този елемент престава да взаимодейства с обичайните елементи на Html кода. Но с други подобни позиционирани, той ще се състезава за позицията „отгоре или отдолу“. z-index:1000 ни позволява да поставим нашето меню очевидно над всички останали блокове. Прочетете статията по-горе за подробности.

Как да направите плаваща странична лента в WordPress без добавки

Използвайки метода, описан по-долу, можете да направите цялата странична лента или част от нея плаваща (или с други думи, да фиксирате на определено място в прозореца за изглед). Ако тази област е доста малка и се побира на един екран (дори преносимо устройство), тогава можете да я направите цялата да плава.

Но най-често това няма да е така и ще бъде възможно да принудите долната част да плава. Ако страничната лента, както в моя случай, е неделим монолит, тогава можете сами да създадете плаващ блок, като използвате принципите, заложени в темата за дизайн, която използвате, и да го поставите под основния.

Направих всичко това бързо и без много да се занимавам с излишни измислици и намиране на оптималното решение, защото от богатия си експериментален опит научих закономерността, че колкото повече възлагаш надежди на дадена идея, толкова по-малка е вероятността тя да „стреля“. Е, обратното. Като цяло нямаше смисъл да се притеснявате още, защото вероятността всичко това да се вкорени не е толкова голяма.

Така че просто взех за създаване на долния блокПреместих горната част на моята главна странична лента (в шаблона sidebar.php), след това я преместих от горния към долния блок „Използвам го за правене на пари“ и накрая залепих това, което беше краят в основния блок. Оказа се нещо подобно:

Е, сега преместих блока „Използвам за печалба“ от горния блок на страничната лента в долния. Оказа се, че не е фонтан, но за "временно" ще стане. Остава само да подредите всичко това в JS файл с код и долният блок ще започне да плава. JS кодът изглежда така:

$(document).ready(function()( var br = $.browser; $(window).scroll(function() ( var top = $(document).scrollTop(); if (top< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version >7))) ( $(".sidebar123").css((top: "52px", position: "fixed", marginLeft: "760px")); ) else if ((br.msie) && (br.version<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

Обърнете внимание, че вместо .sidebar123 трябва да замените своя клас или идентификатора на външния контейнер, в който живее долният блок на страничната лента.

Не разбирам много добре този код (не знам JS), но всичко работи. Поне отчасти. Когато зададете фиксирано позициониране, отчетът е от горната лява точка. Следователно, с marginLeft: "760px" поставям този блок точно на нивото на страничната лента (числото е получено чрез "проба и грешка").

Стойността top: "52px" задава подпълването на вече плаващия блок на страничната лента от горната граница. Стойността на върха Въпреки това имам имаше проблемв случай, че общата височина на главната странична лента е по-малка от височината на областта със съдържание. Такова нещо излезе, например, при преглед на архива на заглавията:

От гледна точка на CSS разбирам защо се случва това, но ме мързеше да мисля за поправка. Просто трябваше да откажа да покажа този плаващ блок на страничната лента на такива страници (не е необходим там).