Меню которое всегда сверху.


Меню всегда сверху

Горизонтальное плавающее меню приклеившиеся к верхней части экрана и не меняющее своего положение при прокрутке страницы.Плюсы такого вида меню навигации несомненны,да и установка кода проста и не сложна.Тем более,что отсутствие скриптов нагружающих страницу блога благоприятно скажется на загрузке страниц,что немаловажно для поисковой оптимизации.


Установка кода плавающего меню.



Меню такого вида подойдёт,как для Блогспот,так и для других видов GSM.Установка кода состоит из двух частей.Первая это GSS отвечающий непосредственно за внешний вид и вторая HTML-часть которая и является тем самым меню,которое мы хотим установить.

Куда это всё вставить решать вам в зависимости от ваших познаний.Если ваши познания близки к нулю или вам недосуг вникать во все тонкости,то можно просто скопировать весь код целиком,заменив выделенное красным на свои значения и вставить в гаджет  HTML и ява-скрипт и панель меню сама найдёт своё место.

Если ваши познания позволяют вам безопасное ковыряние в шаблоне,то можно добавить код GSS в шаблон перед закрывающим тегом боди,а HTML всё же я рекомендовал бы вставить в гаджет,чтобы добавить возможность быстрого доступа к правке или добавлению других пунктов меню навигации со временем по своему желанию.


<style>@keyframes slide{
    0%{top:-50px; opacity:0;}
    100%{top:0; opacity:1.0;}
}
@-moz-keyframes slide{
    0%{top:-50px; opacity:0;}
    100%{top:0; opacity:1.0;}
}
@-webkit-keyframes slide{
    0%{top:-50px; opacity:0;}
    100%{top:0; opacity:1.0;}
}

@keyframes word{
    0%{top:20px; opacity:0.5;}
    80%{top:55px;}
    100%{top:50px; opacity:1.0;}
}
@-moz-keyframes word{
    0%{top:20px; opacity:0.5;}
    80%{top:55px;}
    100%{top:50px; opacity:1.0;}
}
@-webkit-keyframes word{
    0%{top:20px; opacity:0.5;}
    80%{top:55px;}
    100%{top:50px; opacity:1.0;}
}   #toolbar{
            background-color:#000; /*Fallback background color for IE since it doesn't render rgba*/
            background-color:#279;rgba(0, 0, 0, 0.85);/*цвет фона меню*/
            color:#FFF;/*цвет фона при наведении*/
            font-family:sans-serif;
            clear:both;
            position:fixed;
            z-index:99;
            top:0;
            width:720px;/*ширина меню*/
            margin-left:-400px;/*позиционирование меню*/
            left:50%;
            border-bottom:1px solid #000;
            box-shadow:0 0 5px #000, 0 0 5px #000;
            text-shadow:-1px -1px 0 #000;
            font-weight:bold;
     
            -moz-animation-name: slide;
            -moz-animation-timing-function: ease-in;
            -moz-animation-iteration-count: 1;
            -moz-animation-duration: 1s;
         
            -webkit-animation-name: slide;
            -webkit-animation-timing-function: ease-in;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-duration: 1s;
             
            animation-name: slide;
            animation-timing-function: ease-in;
            animation-iteration-count: 1;
            animation-duration: 1s;
        }#toolbar ul{list-style-type:none; margin:0; padding:0;}
#toolbar li{display:inline;}
#toolbar li a{color:#FFF; text-decoration:none; position:relative; border-left:1px solid #578; border-right:1px solid #578; padding:10px; margin:0; display:inline-block;float:center10px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
#toolbar li a:hover{background:#CCC; color:#000; text-shadow:1px 1px 0 #FFF;}
#toolbar li span{display:none;}
#toolbar li:hover > span{display:block; position:absolute; top:50px; left:0; float:left; width:100%; text-align:center; text-shadow:none; color:#050;
    -moz-animation-name: word;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: 1;
    -moz-animation-duration: 0.5s;

    -webkit-animation-name: word;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.5s;
   
    animation-name: word;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-duration: 0.5s;
}</style>

<div id="toolbar">

<ul>
<li><a href="http://www.v-gol.ru/">Главная</a></li>
<li><a href="http://www.v-gol.ru/search/label/Blogspot"> Контакты</a></li>
<li><a href="http://www.v-gol.ru/search/label/%D0%AD%D1%84%D1%84%D0%B5%D0%BA%D1%82%D1%8B%20GSS">Правила</a></li>
<li><a href="http://www.v-gol.ru/p/blog-page_21.html">карта блога</a></li>
<li><a href="http://maxato.com/?pid=98"></a></li>
</ul>
</div>

Смотреть ещё

Оформление блоков для кодаСлайдер- ротатор для блога
Ротатор для баннеров
Эффекты для фото на CSS.
Как добавить форум на блог

Настройки плавающего меню навигации.


К настройкам плавающего меню навигации можно отнести цвет фона,ширину,высоту,позиционирование относительно центра страницы.Все эти параметры подписаны непосредственно в коде и выделены зелёным,так что разобраться,что почём я думаю не составит труда.Подпунктов меню может быть сколько угодно.Просто нужно добавить столько секций сколько вам необходимо.Сам код секции выглядит таким образом.(<li><a href="ссылка"></a> <span> гаджеты</span></li>)



Отправить комментарий