Хаки и Скрипты Next Generation CMS : Интерфейс, CSS, html, JS : Будем фиксировать менюшку

irbees2008 Опубликовано - 29 - июня Интерфейс

Адаптировал: irbees2008
Уровень сложности исполнения: нужны навыки css html

Все привет, и это снова я. Ну наверное многие наблюдали на современных сайтах фиксированное меню, которое постоянно на виду ,даже когда прокручиваешь страницу. Мне лично такой вариант нравится, на первом варианте этого сайта была такая плюшка, я еще и подвал (*футер нижния часть сайта) тоже тогда зафиксировал.
Ну такие менюшки бывают нескольких видов, но мы разберем четыре вида.
И так
Вид 1 .Фиксированное меню сверху (HTML + CSS) – при прокрутке страницы, меню всегда на виду и не теряет своей верхней позиции. Вот этот вариант и был на первом шаблоне этого сайта.
Вот гифка

Ну теперь сам код
В main.tpl туда где хотим видеть меню добавляем само меню:

Код:

1<div class="nav">
2<ul>
3<li><a href="">Пункт 1</a></li>
4<li><a href="#">Пункт 2</a></li>
5<li><a href="#">Пункт 3</a></li>
6<li><a href="#">Пункт 4</a></li>
7<li><a href="#">Пункт 5</a></li>
8</ul>
9</div>

И в файл стилей добавляем стили менюшки:

Код:

01.nav {
02top:0px !important;
03position: fixed;
04border: 1px solid #000;
05width: 99%;
06height: 50px;
07background-color: #ccc;
08marging:0;
09}
10li {
11list-style: none;
12float: left;
13padding-right:10px;
14}

Ну основным параметром фиксации менюшки это:

Код:

`1`	`top:0px` `!important;position:` `fixed;`

Ну с эти все понятно и просто . Дальше стилизуйте под свой шаблон

Вариант номер 2, это тоже самое меню но фиксированное снизу – при прокрутке страницы, меню всегда на виду и не теряет своей нижней позиции

Также код менюшки в main.tpl:

Код:

1<div class="nav">
2<ul>
3<li><a href="">Пункт 1</a></li>
4<li><a href="#">Пункт 2</a></li>
5<li><a href="#">Пункт 3</a></li>
6<li><a href="#">Пункт 4</a></li>
7<li><a href="#">Пункт 5</a></li>
8</ul>
9</div>

И стили в файл стилей:

Код:

01.nav {
02bottom:0px !important;
03position: fixed;
04border: 1px solid #000;
05width: 99%;
06height: 50px;
07background-color: #ccc;
08marging:0;
09}
10li {
11list-style: none;
12float: left;
13padding-right:10px;
14}

Как видите все тоже самое ,только основной параметр

Код:

`1`	`bottom:0px` `!important;position:` `fixed;`

Ну тоже ничего сложного, предыдущий пример только меню фиксировано внизу видимой части страницы

Ну и третий вариант менюшки это фиксированная менюшка под шапкой (HTML + CSS + jQuery) – такое меню разполагается под шапкой сайта, но, при прокрутке страницы, меню фиксируется вверху окна браузера, но если посетитель начнет крутить мышку назад, то меню вернется на свое прежнее место под шапку сайта.

К примеру, шапка сайта имеет высоту 150 px. И под шапкой размещено фиксированное меню.
Здесь показан код шапки и менюшки в main.tpl:

Код:

01<header>
02<h2>BlogGood.ru</h2>
03</header>
04<nav id="top_nav">
05<ul>
06<li class="first"><a href="">Пункт 1</a></li>
07<li><a href="">Пункт 2</a></li>
08<li><a href="">Пункт 3</a></li>
09<li><a href="">Пункт 4</a></li>
10<li><a href="">Пункт 5</a></li>
11</ul>
12</nav>
13<div id="content">
14куча текста
15</div>

Ну куда мы без стилей:

Код:

01body{
02font-family:Arial;
03color:#000;
04}
05 
06header{
07height:150px;
08background: #00ff00;
09position:relative;
10}
11 
12/*фиксированное плавающее меню*/
13#top_nav{
14top: 150px; /*высота шапки в пикселях*/
15position: fixed;
16z-index: 1000;
17border-bottom:1px dotted #999;
18border-top:1px dotted #999;
19width:100%;
20background:#f0f0f0;
21}
22 
23#top_nav ul li{
24float:left;
25margin-right:40px;
26list-style:none;
27padding:15px 0;
28color:#666;
29}

Теперь разбор стилей
Строка № 7 – это высота шапки, выставленная по умолчанию 150 px. Если высоту шапки нужно сделать больше, тогда не забудьте эту цифру поменять во всех местах кода, где она встречается.
Строка № 14 – высота шапки, которая задается в зависимости от ширины шапки .

Если JQuery не подключен то подключаем:

Код:

`1`	`<script` `src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>`

и скрипт обработки нашего меню

Код:

01<script>
02var h_hght = 150; // высота шапки
03var h_mrg = 0; // отступ когда шапка уже не видна
04 $(function(){
05 var elem = $('#top_nav');
06var top = $(this).scrollTop();
07 if(top > h_hght){
08elem.css('top', h_mrg);
09}
10 $(window).scroll(function(){
11top = $(this).scrollTop();
12if (top+h_mrg < h_hght) {
13elem.css('top', (h_hght-top));
14} else {
15elem.css('top', h_mrg);
16}
17});
18 });
19</script>

Немного настройки скрипта
Строка №2 – высота шапки. Если высота шапки будет больше, нужно это значение заменить.

Вариант 4 фиксированное меню внизу экрана (HTML + CSS + jQuery) – шапка сайта занимает весь экран, а меню прилепляется к низу экрана. При прокрутке страницы, меню прилепляется к верхней части экрана.
Шапка сайта занимает весь экран, а меню в это время находится внизу экрана. При прокрутке страницы, меню поднимается до тех пор, пока не достигнет верха, после чего меню фиксируется.

Итак, добавьте код менюшки в main.tpl:

Код:

01<div class="firstScreen">
02<nav id="top_nav">
03<ul>
04<li class="first"><a href="">Пункт 1</a></li>
05<li><a href="">Пункт 2</a></li>
06<li><a href="">Пункт 3</a></li>
07<li><a href="">Пункт 4</a></li>
08<li><a href="">Пункт 5</a></li>
09</ul>
10</nav>
11</div>
12<!-- дальше контент -->

Теперь в стили:

Код:

01*{margin:0; padding:0;}
02.firstScreen
03{
04height:100%;
05background:#00ff00;
06background-size: cover;
07}
08 
09#top_nav{
10bottom:0;
11position: fixed;
12z-index: 1000;
13border-bottom:1px dotted #999;
14border-top:1px dotted #999;
15background: rgba(200,200,200,0.6);
16width:100%;
17height:100px;
18}
19#top_nav ul
20{
21overflow:hidden;
22width:990px;
23margin: 25px auto 0;
24}
25#top_nav ul li
26{
27float:left;
28margin-right:40px;
29list-style:none;
30padding:15px 0;
31color:#5f0f0f;
32font-size:1.4em;
33font-weight: bold;
34}
35 
36#top_nav a
37{
38text-decoration:none;
39color:#5f0f0f;
40font-family:"Trebuchet MS";
41font-size:.9em;
42border-bottom:1px dashed #666;
43}

Если не подключен jQuery то подключаем :

Код:

`1`	`<script` `src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>`

Ну и скрипт для работы нашего меню

Код:

01<script>
02$(function(){
03// высота "шапки", px
04var h_hght = $('.firstScreen').outerHeight();
05// высота блока с меню, px
06var h_nav = $('#top_nav').outerHeight();
07var top;
08$(window).scroll(function(){
09// отступ сверху
10top = $(this).scrollTop();
11if((h_hght-top) <= h_nav){
12$('#top_nav').css('top','0');
13}
14else if(top < h_hght && top>0){
15$('#top_nav').css({'bottom' : top, 'top':''});
16}
17else if(top < h_nav){
18$('#top_nav').css({'top':'','bottom':'0'});
19}
20});
21});
22</script>

Вот и все,пользуемся,правим подсвои нужды, основные данные даны.

Можешь почитать и вот эту статейку "С Днём Победы !"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.