Горизонтальное выпадающее меню blogger: Горизонтальное выпадающее меню СSS/HTML для blogger (blogspot)

19.08.2021 Разное

Содержание

Простое горизонтальное меню для Blogspot

Продолжаю рубрику по Blogspot. Сегодня расскажу, как сделать простое горизонтальное меню для удобной навигации по блогу. Вариант, который будет описан ниже, является самым простым внедрением горизонтального меню и может быть использовано на абсолютно любой платформе с поддержкой CSS. У платформы blogger от Гугла для этого есть гаджет “HTML/JavaScript“.

Техническая часть для blogspot:
1. Создаём в нужном нам месте шаблона гаджет HTML/JavaScript;
2. Вставляем в него следующий код:

<center>
<style>
<!–
div#menunav {
float: left;
border-top: 1px solid #bbbbbb; /* граница сверху */
border-bottom: 1px solid #bbbbbb; /* граница снизу */
font-size: 14px; /* размер шрифта */
background-color: #bbbbbb; /* цвет фона меню */
padding: 0 0 0 5px; /* левый отступ кнопок */
margin: 5px 0;
}
div#menunav ul {
margin: 0px;
padding: 0px;
}
* html div#menunav ul {
float: left;
border-left: 1px solid #bbbbbb; /* левая вертикальная черта к ul */
margin-left: 15px;
}
* html div#menunav a {
display: block;
}
div#menunav li {
float: left;
list-style-type: none; /* без маркеров списка */
background-color: #464451; /* цвет кнопки до наведения */
border-right: 1px solid #bbbbbb; /* разделительные линии между li */
}
div#menunav li:first-child {
border-left: 1px solid #bbbbbb; /* первая вертикальная линия меню */
}
div#menunav a {
text-decoration: none; /* без подчёркивания ссылок */
padding: 0px 10px; /* отступы сверху и снизу */
color: #bbbbbb; /* цвет шрифта */
}
div#menunav a:hover {
color: #ffffff;
}
div#menunav li:hover {
background-color: #45161c; /* цвет кнопки после наведения */
}
/*powered by seo-aspirant*/
–>
</style>
<div id=”menunav” style=”width: 970px;”> <!– shirina menu –>
<ul>
<li><a href=”https://seo-aspirant. ru/seo-aspirant.blogspot.com/2009/08/blog-post_19.html”>название 1 ссылки</a></li> <!– vasi ssilki –>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/09/sape-ucoz.html”>название 2 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/09/sexcash.html”>название 3 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2010/01/blog-post_13.html”>название 4 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/08/blog-post_24.html”>название 6 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/11/wtk.html”>nazvanie 6 ssilki</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/08/blog-post_5609.html”>название 7 ссылки</a></li>
<li><a href=”https://seo-aspirant. ru/seo-aspirant.blogspot.com/2010/01/blog-post_5634.html”>название 8 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2010/01/seo-aspirant.html”>название 9 ссылки</a></li>
</ul>
</div>
</center>

3. Редактируем код:
Сразу нужно сделать отступление по коду для новичков. То, что находится между /* … */ никак не будет влиять на гаджет. Это пояснения, чтобы вам было проще настроить меню.
Теги в начале и конце кода “center” сделают выравнивание вашего меню по центру страницы.
/* granica sverxy */ – первое значение “1px” показывает, сколько пикселей будет отступ, второе “#bbbbbb” – это цвет границы. Аналогично можно поменять и остальные переменные.
Не забудьте заменить в коде https://seo-aspirant.ru/seo-aspirant… на адрес своего блога. Т.к. в данном случае мы редактируем всего лишь код отдельного элемента, то шаблон блога сохранять не обязательно, ведь гаджет можно в любое время удалить.

Чтобы внести изменения нужно обладать базовыми знаниями CSS, ну или просто экспериментировать с переменными.

ПОНРАВИЛСЯ ПОСТ? ПОДЕЛИСЬ ССЫЛКОЙ С ДРУЗЬЯМИ!

СТАТЬИ ИЗ РУБРИКИ:

Тематика: Blogspot, Блогинг, Кодинг

Дата публикации: 14.07.2010

(некоторые ответы перед публикацией проверяются модератором)

Горизонтальное выпадающее меню.

.cbp-hrmenu {

width: 100%;

margin-top: 2em;

border-bottom: 4px solid #47a3da;

}

/* general ul style */

.cbp-hrmenu ul {

margin: 0;

padding: 0;

list-style-type: none;

}

/* first level ul style */

.cbp-hrmenu > ul,

.cbp-hrmenu .cbp-hrsub-inner {

width: 90%;

max-width: 70em;

margin: 0 auto;

padding: 0 1.875em;

}

.cbp-hrmenu > ul > li {

display: inline-block;

}

.cbp-hrmenu > ul > li > a {

font-weight: 700;

padding: 1em 2em;

color: #999;

display: inline-block;

}

. cbp-hrmenu > ul > li > a:hover {

color: #47a3da;

}

.cbp-hrmenu > ul > li.cbp-hropen a,

.cbp-hrmenu > ul > li.cbp-hropen > a:hover {

color: #fff;

background: #47a3da;

}

/* sub-menu */

.cbp-hrmenu .cbp-hrsub {

display: none;

position: absolute;

background: #47a3da;

width: 100%;

left: 0;

}

.cbp-hropen .cbp-hrsub {

display: block;

padding-bottom: 3em;

}

.cbp-hrmenu .cbp-hrsub-inner > div {

width: 33%;

float: left;

padding: 0 2em 0;

}

.cbp-hrmenu .cbp-hrsub-inner:before,

.cbp-hrmenu .cbp-hrsub-inner:after {

content: » «;

display: table;

}

.cbp-hrmenu .cbp-hrsub-inner:after {

clear: both;

}

.cbp-hrmenu .cbp-hrsub-inner > div a {

line-height: 2em;

}

.cbp-hrsub h5 {

color: #afdefa;

padding: 2em 0 0. 6em;

margin: 0;

font-size: 160%;

font-weight: 300;

}

/* Examples for media queries */

@media screen and (max-width: 52.75em) {

.cbp-hrmenu {

font-size: 80%;

}

@media screen and (max-width: 43em) {

.cbp-hrmenu {

font-size: 120%;

border: none;

}

.cbp-hrmenu > ul,

.cbp-hrmenu .cbp-hrsub-inner {

width: 100%;

padding: 0;

}

.cbp-hrmenu .cbp-hrsub-inner {

padding: 0 2em;

font-size: 75%;

}

.cbp-hrmenu > ul > li {

display: block;

border-bottom: 4px solid #47a3da;

}

.cbp-hrmenu > ul > li > a {

display: block;

padding: 1em 3em;

}

.cbp-hrmenu .cbp-hrsub {

position: relative;

}

.cbp-hrsub h5 {

padding-top: 0. 6em;

}

@media screen and (max-width: 36em) {

.cbp-hrmenu .cbp-hrsub-inner > div {

width: 100%;

float: none;

padding: 0 2em;

}

выпадающее » Скрипты для сайтов

31.07.2014 12 195 Скрипты / Accordion

Вертикальное accordion меню

Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке.

30.07.2014 4 408 Скрипты / Accordion

Flat accordion menu — вертикальный аккордеон

Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.

15.05.2013 6 341 Скрипты / Menu & Nav

Адаптивное многоуровневое меню

Экспериментальное меню позволяющее с экономить пространство на вашем сайте, где требуется использование много уровневого меню. «Детки» заменяют собой «родителей» не загромождая страницу. Меню можно устанавливать на страницы с адаптивным дизайном.

17.04.2013 4 857 Скрипты / Menu & Nav

Выпадающее меню на CSS3

Горизонтальное меню с выпадющими подпунктами с использованием css3.

03.01.2013 5 412 Скрипты / Menu & Nav

Дерево меню на jQuery

Древовидное меню на jQuery, как и положено с возможностью раскрытия и скрытия пунктов и подпунктов.

08.12.2012 3 854 Скрипты / Menu & Nav

Горизонтальное меню с выпадающими подпунктами

Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS. В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню.

27.11.

2012 1 910 Скрипты / Menu & Nav

Меню с эффектом подпрыгивания

Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3. В примере простое горизонтальное и горизонтальное с выпадающими под пунктами меню.

25.11.2012 4 515 Скрипты / Menu & Nav

Выпадающее адаптивное меню

Адаптивное выпадающее CSS3 меню, которое при уменьшении окна браузера превращается в меню вида аккордеон. Проверено в Chrome, Opera, FireFox, IE9, iPad, iPhone. В IE7 и IE8 работает только выпадающее подменю, адаптивность теряется.

27.09.2012 2 819 Скрипты / Menu & Nav

Многоуровневое выпадающее меню

Многоуровневое выпадающее меню на CSS2. При этом работает оно в IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) и Google Chrome.

15.08.2012 1 911 Скрипты / Menu & Nav

Многоцветное меню на CSS3

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

При этом смена цвета реализована на CSS, а не на jаvascript.

24.07.2012 2 551 Скрипты / Menu & Nav

Выпадающее CSS3 меню

Выпадающее меню на CSS3 сделанное на базе UI созданного Владимиром Кудиновым.

19.05.2012 1 674 Скрипты / Menu & Nav

Парящее навигационное меню

Реализованное только на CSS3 меню, в котором появление его подпунктов сопровождается анимацией похожей на полет.

24 меню Bootstrap

Коллекция бесплатных Меню навигации Bootstrap Примеры кода: отзывчивый, боковая панель, раскрывающийся список, фиксированный, вертикальный, горизонтальный, гамбургер и т. Д.

Меню CSS
Меню jQuery
Меню JavaScript
Меню React JS

Автор

Начальный
20 февраля 2020 г.