И снова поговорим о меню для сайта или блога на Css и jQuery. Планировал сегодня сменить тему статей, но случайно забрёл на интересный, с точки зрения вебдизайнера, сайтик и понял, что это меню я неприменно угоню :).
Эта разработка напоминает чем-то графический эквалайзер (если быстро водить курсором вдоль строки). Меню предназначается для верхней части шаблона, но можно поставить и вниз (в футер).
Смотрим демку:
Сразу озвучу джентельменский набор для тех, кто "сидит на блоггере":
-- Как подключить jQuery к blogger/blogspot
-- Специфика установки скриптов и стилей в Blogger
Для остальных движков установка меню происходит в соответствии с требованиями вашей cms.
Я слегка модернизировал js под нужды блоггера и избавился (в целях упрощения) от активного выделения.
Установка.
Javascript файл качаете отсюда, кладёте на свой хостинг и вставляете ссылку на него:
<script type="text/javascript" src="http://трололо-мой-хостинг-ру/hover_effects.js"> </script>в "башку" шаблона (в <head></head> к другим скриптам).
Есть, как всегда, нюанс: внутри скрипта заложен важный параметр для стилей (background: "#dbdbdb") - это фон выделенного элемента в меню. Если цвет не устраивает, меняете на свой. Можно поэскпериментировать с анимацией и поиграть с цифрами.
Css:
<style>
/***** MENU *****/
#header ul{ margin:22px 0 0 42px; width:600px; height:22px; font-size:14px; font-weight:bold; line-height:22px;
float:left; display:inline; font-family:Verdana, Geneva, sans-serif; position:relative; }
#header ul li{ margin:0; padding:5px 5px 0 2px; height:22px; float:left; display:inline; position:relative; }
#header ul li a{ color:#595959; text-decoration:none; display:block; padding:2px 8px; margin-top:-4px;}
/* JAVASCRIPT HANDLES THIS
#header ul li a:hover, #header ul li a:active{ background-color:#525252; }
*/
</style>Самая ценная часть в этих стилях, это блок #header ul, в котором параметры: width - регулирует ширину строки менюheight - высота меню
font-size - размер шрифта
font-weight - стиль шрифта (стоит жирный)
В блоке header ul li a, помимо отступов, задаётся цвет шрифта в color.
Ставить стили рекомендую прямо в html виджет блоггера, рядом с этим кодом ↓
Html:
<div id="header"> <ul> <li><a href="http://#">Домой</a></li> <li><a href="http://#">Галерея</a></li> <li><a href="http://#">Скачать</a></li> <li><a href="http://#">Форум</a></li> <li><a href="#">Контакт</a></li> <li><a href="#">Об авторе</a></li> </ul> </div>Здесь ничего примечательного для пояснения нет. Просто меняете текст, добавляете или убираете новые пункты (по аналогии с другими) и изменяете решётку # на нужную вам ссылку.
Выкрал отсюда.
Похожие статьи:
Меню по-корейски
Эта менюшка у меня установилась спокойно. Корейская тоже работает.
ОтветитьУдалитьНо вот другие выпадающие много уровневые нет, не идут, а имено, те части что выпают их подрезает как.. Попробую объяснить, есть шапка блога допустим там где нам дают возможность поставить изображение, надпись и т.д., вот после нее допустим идет полоса для меню, а ниже это большой блок он как будто не пускает раскрватся меню, и та часть что выпадает заходит за его фон, туда сзади. Видимо есть какой то параметр что его держит.
Еще вопрос как указаное здесь меню можно закрепить выше шапки блога, допустим к навибару или вообще в самый верх.
От навибара надо избавляться :). Зачем он нужен?
ОтветитьУдалитьА меню можно засунуть вверх, если в шаблоне вот этот html код <div id='header'>
<ul>
<li><a href='http://#'>Домой</a></li>
<li><a href='http://#'>Галерея</a></li>
<li><a href='http://#'>Скачать</a></li>
<li><a href='http://#'>Форум</a></li>
<li><a href='#'>Контакт</a></li>
<li><a href='#'>Об авторе</a></li>
</ul>
</div>
поставить где-нибудь перед <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Тестовый блог2 (заголовок)' type='Header'>
<b:includable id='title'>
Соответственно, css от меню нужно скопировать в css шаблона, а скрипты к скриптам.
После этого уже будет тонкая настройка при помощи margin и padding, чтобы это меню и название блога друг другу не мешали.
div id='header'>
ОтветитьУдалитьul
li>Домой/li
li>Галерея/li
li>Скачать/li
li>ФорумКонтактОб авторе
chrome
Что бы смог правильно понять вот это указаное
выше нужно поместить до закрытого руфв в шаблон?
chrome
Или же поставить ниже указанного кода? и после этого уже виджет не нужен будет, можно его будет удалить, мы же в шаблом ставит аналогичное?
Можете указать место куда нужно ставить стили и скрипты? допустим до какого места можно указать код. Спасибо.
Вы не могли вы посмореть как загружаются страницы у моего блога, у меня такое впечаление что, он какой то "тяжелый" или это предубеждение от массы времени которое я провожу там?
Как правильно постить коды, не пропускает ((
Если хотите вставить код в комменты, конвертируйте его с помощью http://htmlconvert.com и полученную абракадабру из символов вставляйте в поле сообщения, блоггер сам перекодирует в читаемый текст эту кашу.
ОтветитьУдалитьВставляйте полный контейнер от <div id='header'> до </div>.
после этого уже виджет не нужен будет...
Не нужен конечно.
Можете указать место куда нужно ставить стили и скрипты
Ссылки на скрипты перед </head>, стили перед ]]>
</b:template-skin> к остальным стилям блога.
Вы не могли вы посмореть как загружаются страницы у моего блога, у меня такое впечаление что, он какой то "тяжелый"
ОтветитьУдалитьВот поэтому я столько ломал голову и шаблон, чтобы ускорить загрузку блога.
Скрипты, картинки, любой статический контент сильно утяжеляют страницу.
Посмотрел (http://kaushka.blogspot.com).
У меня больше тормозят зарубежные адреса: dropbox и facebook.
Страница реально тяжёлая, потому что на главной море текста, фото и видеоролик даже.
Как видите, я у себя оставляю только микро-анонсы. Всё остальное прячу на внутренних страницах.
Те слова что находятся в Description.
ОтветитьУдалитьДа интересно, сейчас думаю, а ведь правда, у меня получается в каждой теме дублирование заголовка. Читая ваши советы начинаю понимать то что возможно происходит сейчас между блогом и поисковиком. У меня там было около двух сот тем которые я там постил туда, без особой старотельности, как придется без выделения без нормальных заголовков, даже тэги во многих случаях не ставил. Сейчас же в протную начал редактирование и улучшением всего, возможно поисковик будет выдавать это все потом, как в вашем случае. Ключевые слова я выделяю во всем тексте, не только в самом начале, как вы считаете это правильно?
Вот мой блог http://kaushka.blogspot.com чтобы посмотреть синий фон активной ссылки, как загружается страница достаточно быстро?
Провожу тесты с данной менюшкой, на тестовом блоге http://testkaushka.blogspot.com Навибар убрал, но менюшка не встала н а его место, парочка сантиметров (незнаю сколько в px) оно не доходит до верха, да и в право не могу сдвинуть уже менял, менял показатели
ОтветитьУдалитьно видимо надо точно знать какая цифра за что отвечает
header ul{ margin:20px 0 0 22px; -- отвечает за само меню?
header ul li{ margin:0;padding:20px 0px 0 0px отвечает за расположение ЗАГОЛОВКА?
Какие именно цифры надо изменить чтобы сдвинуть меню
отступ от левой строны -00
верх
низ
правая сторона
Спасибо.
Если набрать в Яндексе запрос site:kaushka.blogspot.com, то можно увидеть список проиндексированных ссылок. В описаниях к каждой ссылке часто встречается текст из статьи, а в некоторых Яндекс неправильно отпределил важность текста и поставил вот такую фигню: Автор: kaushka на 11:19. Отправить по электронной почтеНаписать об этом в блогеОпубликовать в TwitterОпубликовать в Facebook.
ОтветитьУдалитьВсе это лучше убрать вообще, а то что нужно, закрыть от индексации тегами <noindex></noindex> (действует только для Яндекса).
Гугл у вас насобирал архивные страницы. А их лучше закрыть от индексации:
<b:if cond='data:blog.pageType == "item"'>
<meta content='index,follow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<meta content='index,follow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<meta content='index,follow' name='robots'/>
<b:else/>
<meta content='noindex,follow' name='robots'/>
</b:if></b:if></b:if>
Если вы конечно их не успели закрыть самостоятельно.
Интересно, что в Гугле все ссылки именуются как "Всегда самые свежие медиа новости из...". Но некоторые имеют уже правильные названия - названия статей. Видимо надо ждать, когда поисковый кеш полностью обновится.
синий фон
Инспектирование показывает, что отвечает за это код:
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background-color: rgb(51, 170, 255);
color: rgb(0, 0, 0);
text-decoration: none;
}
А именно строчка:
background-color: rgb(51, 170, 255);
В которую нужно подставить номер своего цвета (в шаблоне она может быть hex вида, а не rgb).
Попробуйте поискать в шаблоне такой блок css.
background-color: можно в шаблоне найти много таких строк но как только начинаю вводить RGB точно так как вы указали показывают ноль, видимо Опера трансформировала код.
ОтветитьУдалитьВот что он находит
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
Блок кода для робота вы мне давали раньше(?!), я его поставил уже около недели назад, благодарю вас, но куда именно мне поставить тэги
noindex></noindex ?
И вы говорите что в них лучше заключить те слова что выдал яндекс
-- твитер, фейсбук и т.д?
Вот что он находит...
ОтветитьУдалитьЗначит надо проследить выше до параметра tabs.selected.text.color и посмотреть, что там вписано.
Или вписать свои значения, типа:
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background-color: #f3f3f3);
color: gary;
text-decoration: none;
}
Не забудьте до редактирования сделать резервную копию шаблона.
Блок кода для робота вы мне давали раньше...
На всякий случай дал, т.к. архивы ещё не ушли из индекса, мало ли забыли поставить.
но куда именно мне поставить тэги
noindex...
Легче всего отказаться от этих блоггеровских "фейсбуков", кнопки мыла и даже даты (вообще мусор, поисковик сам знает, когда написан пост), и самостоятельно ставить кнопки соц сетей. Тогда просто их содержимое включаете между тегами noindex, как я.
background-color: $(tabs.selected.background.color);
ОтветитьУдалитьПопробовал в этой строчке вместо $ поставить #000000 или любой другой цвет, просто убрало фон, но кпочка уже не была как другие она была как яснее, меня бы уже удовлетворил такой результат, менял разные показатели, пока что не додумался поставить в скобки код rgb а перед скобкой само слово RGB,
background-color: rgb(220, 220, 220); в итоге все получилось спасибо, я слегка заменил фон как у всего блога, но он уже не синий как был там, который не подоходил по моему мнению. Спасибо за полезную информацию!!!
А как ставят градиенты на кнопках?
Не понял куда именно ставить эти тэги noindex>Автор: kaushka на 11:19. Отправить по электронной почтеНаписать об этом в блогеОпубликовать в TwitterОпубликовать в Facebook.</noindex
ОтветитьУдалитьНо куда это ставить, после такого именно тэга в шаблоне?
Ужас! Я гонял эту менюшку по всему верху, но либо картинка-шапка уползает в другие сторону, либо название. Так до сих пор и не понял относительно чего идет привязка, если смещаются два объекта.
ОтветитьУдалитьЯ смотрю, вы уже загнали её наверх.
ОтветитьУдалитьВот так всё и делается - экспериментальным методом научного тыка. Можно меню заключить в контейнер и повесить отступы:
#menu ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 20px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
}
Ах, да..
ОтветитьУдалитьГрадиенты на кнопках, через CSS.
Это делается с помощью генератора css, например, http://css3generator.com
Там выбираете Gradients и получаете результат.
Попробовал заключить меню, этот код поставил сразу после кода меню в шаблон, изображение встало на свое место, но этот код вылез чуть выше изображения. Думаю что его надо постаить куда то в другое место, куда именно, до или после чего?
ОтветитьУдалитьhttp://css3generator.com/
ОтветитьУдалитьу меня превью не показывает, в слепую не хочется пробовать
Почему не хочет? Вот, пожалуйста:
ОтветитьУдалитьhttp://www.colorzilla.com/gradient-editor/
Все видно.
Встаёт на место шапка, надо к этой картинке в ширине указать auto и убить пару элементов.
ОтветитьУдалить"Проинспектируйте" в опере. Всё делается на лету, сразу виден результат.
Затрудняюсь сказать, что я делал, поскольку шаги не запомнил =)
Картинка:
тестовый блог
#menu ul {
ОтветитьУдалитьlist-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 20px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
}
куда именно этот код ставить?
@aldousизображение идет через виджет и где она в шаблоне находится?
ОтветитьУдалитьЭто я от фонаря запостил, что можно отдельно id для меню повесить. Это не выход, а лишь список примерных отступов, просто так вставлять нельзя.
ОтветитьУдалитьИзображение можно найти по его названию через поиск браузера.
Говорю же вам, попробуйте Оперу -> инспектирование файла. Там на лету меняются настройки css, все сразу видно, что и куда надо подвинуть :).