Привет друзья,сегодня я вам решил показать новую менюшку. Меню это состоит из CSS спрайта- а спрайт это вывод на экран одного изображения, то есть меню состоит из 5 кнопок, а сам файл изображения всего один. Из-за этого снижается нагружка при загрузке вашей странички блога, к тому же уменьшается количество запросов на страничку, к изображениям.Это дает нам очень легкое меню, и в плане оптимизации это хорошо, потому что все работает очень быстро.Ну а теперь немного про само меню, оно очень красочное, и легкое имеет как вы видели выше 5 кнопок установка быстрая. А сейчас я вам расскажу как установить себе такое меню.Опять же тут несколько способов установки, Cпособ первый идем в свой блог, далее шаблон, Изменить HTML,зажимаем CTRL+F ищем тег ]]></b:skin> вставляем одну часть кода перед тегом ]]></b:skin> , без тегов <style> стиля что я пометил красным маркером. Если вдруг у вас не заработает меню то вставляем код что ниже перед тегом
</body> с тегами стиля <style><style>
/* --------------------Menu style #4-------------------- */
.navi4 {
width: 525px;
position: relative;
display: block;
margin:0 auto;
height: 72px;
}
.navi4 ul {
float: none;
list-style-image: none;
list-style-type: none;
margin: 3px 0;
}
.navi4 ul li {
height: 72px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQzTbyQjio6qbfQ5v6lzwWCde4J5oswjwDfZOqY3ZrfhLUD7IgCRoXDZJU6EyVsCebjfjecmQPY_GV0pT8fujRju_93qvdYJmsTao0Ux9T4P6oIbiGs9aKuUzIu2WTiQVVZCsK1ULkpk4/s1600/tab-4.png);
background-repeat: no-repeat;
float: left;
margin: 0px;
position: absolute;
padding-top: 5px;
}
.navi4 ul li a{
width: 100%;
height: 100%;
display: block;
}
.navi4 ul li.sm1 {
background-position: 0px 0px;
width: 125px;
left: 0px;
}
.navi4 ul li.sm2 {
background-position: -125px 0px;
width: 124px;
left: 100px;
}
.navi4 ul li.sm3 {
background-position: -249px 0px;
width: 124px;
left: 200px;
}
.navi4 ul li.sm4 {
background-position: -373px 0px;
width: 125px;
left: 300px;
}
.navi4 ul li.sm5 {
background-position: -498px 0px;
width: 126px;
left: 400px;
}
.navi4 ul li:hover{
z-index: 1000;
}
.navi4 ul li.sm1:hover {
background-position: 0px -5px;
}
.navi4 ul li.sm2:hover {
background-position: -125px -5px;
}
.navi4 ul li.sm3:hover {
background-position: -249px -5px;
}
.navi4 ul li.sm4:hover {
background-position: -373px -5px;
}
.navi4 ul li.sm5:hover {
background-position: -498px -5px;
}
</style>
Далее код что будет ниже что бы вставить нам потребуется пройти в меню Дизайн,добавить гаджет, найти в списке HTMLjawascript вставляем в него и сохраняем. Либо идем снова в меню шаблон ИзменитьHTML зажимаем CTRL+F ищем тег
<body> и вставляем наш скрпт ниже тега <body>
<div class="navi4">
<ul>
<li class="sm1"><a href="#"></a></li>
<li class="sm2"><a href="#"></a></li>
<li class="sm3"><a href="#"></a></li>
<li class="sm4"><a href="#"></a></li>
<li class="sm5"><a href="http://www.compare-price.ru/juices/Santal/1/"></a></li>
</ul>
</div>
0 коммент. :