
* * * * *
Джава менюшечка – выпадающие кнопки, ссылки.
Джава скрипты и их реализация на блогспоте помогают превратить простенькую платформу в приятный и функциональный ресурс, с удобным интерфейсом.
Задался целью сделать выпадающее меню из картинок на основе джава скрипт, где должны отображаться мои «веб-паспорта» (профили из соц. сетей, сайтов фриланса…).
Перерыл страницы в поиске и того что подошло бы именно мне не нашел!
Дальше попалась одна статья о том, как скрывать часть поля плагина и задать его отображение после наведения курсора (к сожалению не сохранил ссылку на автора) почитал, попробовал вставить картинку изображающую паспорт, также заменить содержимое виджета на кнопки-картинки, которые были мне нужны (мои профили на фриланс сайте и в соц. сетях). Получилась такая конструкция:
<style>#Foll {
/*фон всего гаджета*/
overflow: hidden; /*скрываем все что за элементом*/
border-radius: 5px;
box-shadow: none;
/*правила анимации*/
-webkit-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
-moz-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
-o-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
height: 60px; /*высота открытой части в режиме спокойствия*/
width: auto; /*ширина задана автоматически и займет всю область панели где размещен гаджет*/
}
/**/
#Foll:hover {
height: 800px; /*высота выпадания*/
}
}</style><div id="Foll"><center><span style="color: #3d85c6; font-family: Georgia, Times New Roman, serif; font-size: x-large;"><b><img src="http://4.bp.blogspot.com/-uJu1EB8UdjU/U2ATYtM9xFI/AAAAAAAABzM/bNVnlQae0vQ/s1600/07.png" style="border: none;" width="65" height="65" /></b></span></center><br /><div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<a href="http://freelancehunt.com/freelancer/Makstxt.html" rel="nofollow" target="_blank"><img src="http://4.bp.blogspot.com/-UqmaLEJ3NAw/U1kYeNDcP7I/AAAAAAAABqo/xvmJC7fUEfU/s1600/freelancehunt.png" style="border: none;" width="50" height="50" /></a><a href="https://vk.com/v.trofimlyuk" rel="nofollow" target="_blank"><img src="http://3.bp.blogspot.com/-p4hVSuXHpOs/U2Ad5vKejhI/AAAAAAAAB0k/U98u-D-vK5o/s1600/vkontakte.png" style="border: none;" width="50" height="50" /></a>
</div></div>
/*фон всего гаджета*/
overflow: hidden; /*скрываем все что за элементом*/
border-radius: 5px;
box-shadow: none;
/*правила анимации*/
-webkit-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
-moz-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
-o-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
height: 60px; /*высота открытой части в режиме спокойствия*/
width: auto; /*ширина задана автоматически и займет всю область панели где размещен гаджет*/
}
/**/
#Foll:hover {
height: 800px; /*высота выпадания*/
}
}</style><div id="Foll"><center><span style="color: #3d85c6; font-family: Georgia, Times New Roman, serif; font-size: x-large;"><b><img src="http://4.bp.blogspot.com/-uJu1EB8UdjU/U2ATYtM9xFI/AAAAAAAABzM/bNVnlQae0vQ/s1600/07.png" style="border: none;" width="65" height="65" /></b></span></center><br /><div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<a href="http://freelancehunt.com/freelancer/Makstxt.html" rel="nofollow" target="_blank"><img src="http://4.bp.blogspot.com/-UqmaLEJ3NAw/U1kYeNDcP7I/AAAAAAAABqo/xvmJC7fUEfU/s1600/freelancehunt.png" style="border: none;" width="50" height="50" /></a><a href="https://vk.com/v.trofimlyuk" rel="nofollow" target="_blank"><img src="http://3.bp.blogspot.com/-p4hVSuXHpOs/U2Ad5vKejhI/AAAAAAAAB0k/U98u-D-vK5o/s1600/vkontakte.png" style="border: none;" width="50" height="50" /></a>
</div></div>
Желтый – ссылка на картинку
Красный – ссылка на страницу
Зеленый – настройка размеров изображений
Монтируется просто: вкладка “Дизайн”-”Добавить гаджет”-”HTML/JavaScript” вставить код.
До использования вам придется побаловаться с размерами изображений, отступами и параметрами спрятанной части виджета. Советую сделать подгонку в онлайн HTML редакторе на моём блоге вкладка “инструменты копирайтера”-”Онлайн HTML” .
Также нашел еще одно применение данной конструкции!
Несколько раз слышал совет спрятать счетчики блога (чтоб не мозолили глаза нулевыми показателями). Как это сделать? Можно уменьшить их размер до одинокой незаметной точки через те же скрипты, но лично я не могу удержаться, чтоб посмотреть, сколько человек заходило на сайт и делаю это каждые полчасика. С помощью того же кода вместил все счетчики в контейнер и подобрал неброское изображение для картинки. Теперь они не мозолят глазки посетителя, но я могу просто ознакомиться с показателями. Пример такой фишки.
<style>#Foll {
/*фон всего гаджета*/
overflow: hidden; /*скрываем все что за элементом*/
border-radius: 5px;
box-shadow: none;
/*правила анимации*/
-webkit-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
-moz-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
-o-transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
transition: box-shadow 0.9s ease, border 0.5s ease, height 0.5s ease-in;
height: 60px; /*высота в состоянии покоя - вычислена опытным путем*/
width: auto; /*ширина*/
}
/*Стили при наведении курсора*/
#Foll:hover {
height: 430px; /*полная высота при наведении- вычислять путем проб и ошибок*/
}
}</style><div id="Foll"><center><span style="color: #3d85c6; font-family: Georgia, Times New Roman, serif; font-size: x-large;"><b><img src="http://2.bp.blogspot.com/-JjlR8K9d15o/U1V_DdeGEAI/AAAAAAAAA8E/qJJk6517I_E/s1600/Chart+Area+Up.png" style="border: none;" width="33" height="33" /></b></span></center><br /><div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">А сюда тычем все коды счетчиков которые должны быть на странице
</div></div>
Такой способ можно применить и для других гаджетов: способы подписки, поделиться в социальных сетях… Он поможет не захламлять место на блоге, оживить его динамичным эффектом и вместить больше функций.
Владимир Трофимлюк.
Ой, а что это там ниже? Ну надо же! Нажимаем!
оформите подписку на новые шпаргалки
Вика, поздравляю с гостевым постом :)
ОтветитьУдалитьУ меня вопрос. Правильно ли я поняла, что описываются менюшки в стиле "Разделы блога" у Владимира? Я хочу себе такую фишку :)))
Кстати, мне не хватает скриншотов для наглядности.
Привет Таня. Спасибо Владимиру и тебе. Ты совершенно правильно поняла. А насчёт скриншотов. думаю попросим самого автора. Следи пожалуйста.
ОтветитьУдалитьТаня к сожалению нет((( Меню в шапке моего блога тема отдельная. Его довольно сложно настроить (придется ковыряться в коде) и оно не стабильно минимальная ошибка и некорректное отображение списками на весь блог.
ОтветитьУдалитьЕсли решитесь попробовать то могу сбросить скрипт.
Но советую подождать! Я зацепился с одним ресурсом предоставляющим свою облачную платформу для создания в визуальном режиме разнообразных гаджетов для наших блогов. Технология очень проста и освоить ее пара пустяков, но на данный момент в их ассортименте нет виджетов меню однако я очень настойчиво рекомендовал им создать сервис визуальной настройки встраиваемых выпадающих меню. Если программисты отзовутся и воплотят то обязательно размещу у Вики сообщение о столь полезной новинке!
Теперь по этой менюшке:
Пример реализации левая панель моего блога картинка с паспортом или правая панель изображение счетчика. Суть в том что при наведении на изображение выпадает скрытая часть гаджета (счетчики посещаемости).
Этот комментарий был удален автором.
ОтветитьУдалитьОтписался и вот скриншот: https://lh4.googleusercontent.com/-dlJdTBScFA0/VCVH0Q_HLKI/AAAAAAAAEoQ/GQUZKJPUq8s/w752-h553-no/2014-09-26.jpg
ОтветитьУдалитьспасибо, Владимир, за подробное описание и за скриншот ;)
ОтветитьУдалитьПожалуй подожду с выпадающим меню. Ещё кучу всего нужно проделать с блогом))
В свою очередь хочу Владимир тебя поблагодарить за скрипт выпадающих счёичикоа. Давно на него запала. Сейчас вот уже думаю, куда бы его применить ещё.
ОтветитьУдалитьОбращайтесь! А выпадающие меню вообще больная тема для блогспота, изучил огромное количество вариантов и пока меня ни один не устроил (даже тот что применил сейчас)
ОтветитьУдалитьТаня, работы с блогом всегда полно. Мне иногда кажется, что и не переделаешь. И то хочется и другое. Мало того хочется, есть просто необходимые моменты. Но не надо опускать руки.
ОтветитьУдалить"Сейчас вот уже думаю, куда бы его применить ещё
ОтветитьУдалить"Вика есть идея. Можно туда втолкнуть код архива блога в применив стиль "иерархия" и режим "показывать заголовки постов". В открытом режиме такая штука занимает много места а спрятав ее в скрытую область гаджета можно сэкономить место и дать читателю прекрасную навигацию по блогу. Правда я сейчас на быструю руку не смог сделать, гаджет внутри не хочет корректно работать но возможно ты сможешь воплотить.
Возможно,ты прав. Надо подумать будет. Я счётчики подготовила уже по твоему варианту, а вот вставить всё руки не доходят.
ОтветитьУдалитьВо-первых,Вика, поздравляю с первым гостевым, к слову скажу, полезным постом. Спасибо Владимиру за тему с выпадающим меню из картинок и подробную и доходчивую инструкцию к ней. Еще импонирует то, что меню монтируется в блог через вкладку "Дизайн". Немного разгребусь с текучкой, займусь этим вопросом.
ОтветитьУдалитьПривет Сергей. Ту Владимир пообещал в недалёком будущем ещё информацию выложить. Так что время есть. Кстати, как дела у тебя.
ОтветитьУдалитьПривет,Вика. Яша индексирует посты с новым адресом, но очень медленно, терпеливо жду.
ОтветитьУдалитьСергей сейчас на почту тебе напишу.
ОтветитьУдалитьВсем привет :-) придумал новый вариант применения! Спрятал аналогичным образом часть виджета постоянные читатели на своем блоге.
ОтветитьУдалитьПошли смотреть!!!!! ;-))
Зайду посмотрю. Посмотри и мой гаджет ПЧ.. Об это я писала в этой статье.
ОтветитьУдалитьhttp://www.shpargalochki.ru/2014/09/kak-izmenit-gadzhet-postojannye.html#more
Володя, посмотрела. Здорово получилось! Аккуратно вписывается в дизайн.
ОтветитьУдалить