Как сделать меню фиксированным?

Регистрация доменов
Домен RU - 99 руб
Домен РФ - 99 руб
www.

У каждого сайта есть меню и это нормально. Но ненормально, когда меню весит в шапке сайта и его код находится выше основного контента. Да и к тому же такое меню плохо привлекает внимание, так как сразу прокручивается вместе со страницей.

В этой ситуации есть отличный выход - сделать меню фиксированным! И при этом его можно поместить в подвал сайта, а всплывать оно будет при прокрутке страницы вверх и там постоянно оставаться. Да что я вам объясняю, посмотрите, как это сделал я на этом сайте.

фиксированное менюКак сделать меню фиксированным?

Как это реализовать? Очень просто. Для этого нам нужно код вывода меню заключить в этот скрипт:

<script src="//zmoe.ru/wp-content/themes/genbu/js/jquery.min.js"></script>
<script type="text/javascript"> $(window).scroll(function() {if ($(this).scrollTop()>10) $('#scrollable').css({'z-index':'100000','position':'fixed','top':'0px','background':'#ffffff'});else $('#scrollable').css({'top':'15x','position':'static'});});</script> <div id='scrollable' style="width:1920px"> <div align="center"> ТУТ КОД МЕНЮ </div></div>

Немного поясню код. Первый скрипт подгружает нужную библиотеку, без которой меню не будет скорее всего фиксироваться (по крайней мере у меня так)
Далее идет сам скрипт, который фиксирует меню, можете сами его настроить под себя, задав отступ и ширину.

Далее идет центровка меню посередине, что чаще всего тоже необходимо.

Вот и весь секрет фиксированного меню, может кому будет полезно. Если поработать немного со стилями, то можно сделать все еще симпатичней, но в моем случае и так все хорошо.

Что если у вас нет меню? Можете создать его сами, просто нужно проставить ссылки на нужные разделы в html, примерно так:

<h3><a href="https://zmoe.ru/foto/" target="_blank">Фотохостинг</a> - <a href="https://zmoe.ru/proxy/" target="_blank">Прокси</a> - <a href="https://zmoe.ru/web/" target="_blank">Заметки</a> - <a href="https://zmoe.ru/help/" target="_blank">Вопросник</a></h3>

Будут мысли - пишите, надеюсь, что кому то было полезно, лайки приветствуются 😉

Как зафиксировать меню по другому?

На этом сайте все работает пока по этой схеме, но вот на сайте про линукс у меня так не вышло - нужна была доработка и я на время забросил эту идею. Вчера же я решил все же и там сделать фиксированное верхнее меню, уж очень это удобно.

Я перерыл весь интернет, пока не нашел ПРОСТОЕ и РАБОТАЮЩЕЕ решение, которое и выглядело очень аккуратно. Естественно, я все отредактировал под себя и в результате вышло так:

как сделать фиксированное менюКак видите, меню появляется при начале прокрутке страницы, как и на этом сайте, выглядит привлекательно и заметно. Как сделать себе такое? Вот код, который я поставил себе:

<script type="text/javascript"> $(window).scroll(function() {if ($(this).scrollTop()>10) $('#scrollable').css({'z-index':'100000','position':'fixed','top':'0px'});else $('#scrollable').css({'top':'15x','position':'static'});});</script> <div id='scrollable' style="width:100%">
 <center>
 <nav id="menu" class="default">
 <ul>
 <li><a target="_blank" href="https://prostolinux.ru/links/tt/">ГАДЖДЕТЫ</a></li>
 <li><a href="https://prostolinux.ru/hardware/">ЖЕЛЕЗО</a></li>
 <li><a href="https://prostolinux.ru/os/android/">АНДРОИД</a></li>
 <li><a href="https://prostolinux.ru/os/linux/">ЛИНУКС</a></li>
 <li><a href="https://prostolinux.ru/os/win/">ВИНДОВС</a></li>
 <li><a href="https://prostolinux.ru/soft/">ПРОГРАММЫ</a></li>
 <li><a href="https://prostolinux.ru/web/">ИНТЕРНЕТ</a></li>
 <li><a target="_blank" href="https://prostolinux.ru/help/">СПРОСИТЬ</a></li>
 <li><a href="https://prostolinux.ru/avtor/">АВТОР</a></li>
 </ul>
 </nav>
 </center>
 </div>

Это код самого меню, вы вставите свои ссылки и поместите все в footer.php Так же туда нужно добавить скрипт, который будет подгружать нужную библиотеку:

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

Чтобы все это выглядело аккуратно, нужно в файл style.css добавить такой код:

nav#menu{
 text-transform:uppercase;
 text-align:center;
 line-height:50px;
 background: #333333;
padding:10px 10px 6px 10px;
 margin:0px auto 0;
 }
 nav#menu ul li{
 display:inline;
 }
 nav#menu ul li a{
 text-decoration:none;
 color:#ffffff;
 font:16px sans-serif;
 padding:15px 15px;
 transition:0.5s;
 text-shadow: 1px 1px 2px #AAA096;
 }
 nav#menu ul li a:hover{
 background: rgb(22, 22, 22);
 color: #FFF;
 transition:0.5s;
 }
 .default {
 width:100%;
 }
 .fixed {
 position:fixed;
 top:0px; left:0;
 width:100%;
 padding:10px 0;
 -moz-box-shadow: 5px 5px 20px #666;
 -webkit-box-shadow: 5px 5px 20px #666;
 box-shadow: 0px 5px 10px #666;
 border-radius:0 !important;
 transition:1s;
 background: #E6E6E6; !important;
 }

Вы можете его отредактировать под себя, это не так и сложно. Вот и все, рад был поделиться положительным опытом!


Понравилась ИГРА? Возьми КОД, поставь себе на сайт и улучши поведенческие факторы!


3 комментария
  1. Очень даже интересно! Наткнулась на ваш сайт и забросила все дела. Сижу и читаю по очереди ваши статьи. Очень хорошо пишите, доброжелательно. У меня четыре сайта, поэтому волнует вопрос и с меню. Не нравится мне мое меню на сайтах, хоть и поменяла шаблон, как-то все не очень-то это устраивает. Уже и так, и сяк в настройках меняла, пока остановилась на том, что есть. Но многое не устраивает. Поэтому ищу ответа на вопрос как выровнять рубрики, чтобы ровненько было. Да и верхнее меню не очень у меня. Буду заходить к вам. Спасибо. Очень мне понравились ваши статьи. С уважением

    • Спасибо за отзыв, очень приятно, что вам это полезно. Я этот блог не так давно веду, у меня он не первый, пришлось завести, чтобы описывать именно эти темы.

      Если говорить про меню, то по моему описанный мною вариант очень простой и оптимальный, и в плане seo очень правильный. Если будут вопросы или нужна помощь, то пишите, я добрый, помогу чем могу...

      Посмотрел ваш сайт, шрифты я бы сделал без засечек, как в рекламе adsesne, шрифт на всем сайте должен быть одинаковым и в рекламе тоже.

      В подвале в нижней полосе цвет шрифта неудачный, пестрит в глазах.

      Скажите, а эти тизерки реально много приносят, чтобы портить ими сайт?

Написать комментарий

Опубликовано © Блокнот вебмастера

СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:

1. Epayments - можно открыть счет в долларах, евро и рублях. Формально банка нет, юридический адрес в Лондоне, но можно получить реквизиты банка в Латвии.

2. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.

3. OkPay - Офшорная компания зарегистрирована на Британских Виргинских островах, можно открыть счет в долларах, евро и рублях.

4. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.

Во всех случаях можно заказать банковскую карту, которую пришлют вам по обычной почте. Активируете ее и идете снимать деньги банкомат! Тарифы смотрите на сайтах платежных систем.