Шаблоны и скрипты для меню, навигации и ссылок (JS, CSS)

Страница: 1 2 »

Ответить

Сообщений 1 страница 10 из 16

Поделиться103.02.23 18:26

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

Условия использования:
Вы можете использовать все материалы, соблюдая условия использования бесплатного контента.

Навигация

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 1

Поделиться203.02.23 20:02

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

Форма выпадающих ссылок для перехода (HTML)

Код:

Вместо красного текста ставим адреса ссылок
Вместо синего - название ссылок

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 2

Поделиться303.02.23 20:05

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

Оформление списка ссылок (CSS)

Демо:
[html]<div class="tvm-bg">
<a href="#" class="tvm" target="">каждый </a>
<a href="#" class="tvm" target="">охотник</a>
<a href="#" class="tvm" target="">желает</a>
<a href="#" class="tvm" target="">знать</a>
<a href="#" class="tvm" target="">где </a>
<a href="#" class="tvm" target="">сидит</a>
<a href="#" class="tvm" target="">фазан</a>
</div>
<style>
.tvm-bg {background: #ccc; padding: 10px;}
a.tvm, a.tvm:active, a.tvm:link, a.tvm:visited {
font-family: tahoma;
font-size: 11px;
background-color:#FFFFFF;
color: black;
font-weight: normal;
text-align:center;
display: block;
margin: 1px;
text-decoration: none;
border-left-style: solid;
border-left-color: black;
border-left-width: 5px;
width:200px;
}

a.tvm:hover {
font-family: tahoma;
font-size: 11px;
color: #FFFFFF;
background-color: #644364;
display: block;
font-weight: bold;
text-align:center;
cursor:crosshair;
text-decoration: none;
border-left-style: solid;
border-left-color: #FFFFFF;
border-left-width: 5px;
width:200px;
}
</style>[/html]
HTML-список:

CSS-стили:

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 3

Поделиться403.02.23 20:30

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

Горизонтальное ниспадающее многоуровневое меню (CSS, HTML)

Автор: @Gerda

Демо:
[html] <div>
<ul id='nav'>
<li class='top'><a href='Ваша ссылка' id='' class='top_link'><span class='down'><strong>Меню. Кнопка 1</strong></span></a>
<ul class='sub'>
<li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 1</strong></a>
<ul>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>
</ul>
</li>
<li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 2</strong></a>
<ul>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>
</ul>
</li>
<li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 3</strong></a>
<ul>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>
</ul>
</li>
</ul>
</li>
<li class='top'><a href='Ваша ссылка' id='' class='top_link'><span class='down'><strong>Меню. Кнопка 2</strong></span></a>
<ul class='sub'>
<li><a href='Ваша ссылка' ><strong>Меню первого уровня. 1</strong></a></li>
<li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 2</strong></a>
<ul>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
<li><a href='Ваша ссылка' class='fly'><strong>Меню второго уровня. 3</strong></a>
<ul>
<li><a href='Ваша ссылка'><strong>Меню третьего уровня. 1</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню третьего уровня. 2</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню третьего уровня. 3</strong></a></li>
</ul>
</li>
<li><a href='Ваша ссылка' class='fly'><strong>Меню второго уровня. 4</strong></a>
<ul>
<li><a href='Ваша ссылка' class='fly'><strong>Меню третьего уровня. 1</strong></a>
<ul>
<li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 1</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 2</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 3</strong></a></li>
</ul>
</li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='Ваша ссылка' ><strong>Меню первого уровня. 3</strong></a></li>
</ul>
</li>
<li class='top'><a href='Ваша ссылка' id='' class='top_link'><span><strong>Меню. Кнопка 2</strong></span></a></li>
</ul>
</div>
<style type="text/css">
/*------------------------------- Меню ------------------------------------*/
#nav {width: 100%; top:0; left:0; padding:0; margin: 0; list-style:none; height:35px; background:transparent url(http://s2.uploads.ru/Vgpzo.png) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#D1EEEE; text-decoration:none; font-size:18px; font-weight:normal; padding: 0 0 0 4px; cursor:pointer; background: url(http://s2.uploads.ru/Vgpzo.png); width:auto;}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://s2.uploads.ru/Vgpzo.png) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://s2.uploads.ru/vObBI.png) no-repeat right top;}

#nav li:hover a.top_link,
#nav li.iehover a.top_link {color:#fff; background: url(http://s3.uploads.ru/JvITO.png) no-repeat; cursor:pointer;}
#nav li:hover a.top_link span,
#nav li.iehover a.top_link span {background: url(http://s3.uploads.ru/JvITO.png) no-repeat right top; cursor:pointer;}
#nav li:hover a.top_link span.down,
#nav li.iehover a.top_link span.down {background: url(http://s2.uploads.ru/qQOKD.png) no-repeat right top; cursor:pointer;}

/* Моделирование списка по умолчанию */

#nav li:hover {position:relative; z-index:200; cursor:pointer;}

#nav li:hover ul.sub
{left:1px; top:35px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; height:auto; z-index:300; cursor:pointer;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:245px; font-weight:normal; cursor:pointer;}
#nav li:hover ul.sub li a
{display:block; font-size:12px; height:18px; width:242px; line-height:18px; text-indent:5px; color:#ccc; text-decoration:none; border:1px solid #1F242B; cursor:pointer;}
#nav li ul.sub li a.fly
{background:#1F242B url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; cursor:pointer;}
#nav li:hover ul.sub li a:hover
{background:#607B8B; color:#000; border-color:#fff; cursor:pointer;}
#nav li:hover ul.sub li a.fly:hover
{background:#68838B url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#fff; cursor:pointer; left:1px;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:245px; top:-4px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#607B8B url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#000; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#1F242B url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; color:#ccc; border-color:#fff; border:1px;}
</style>[/html]

Преимущества этого меню:
1. Оно горизонтальное. (в тырнете очень много подобных вертикальных, но они не всем подходят)
2. Оно настраиваемое стилистически (чего нет во многих навигаторах)
3. Оно при отсутствии криворукости админа может содержать в себе великое разнообразие пунктов и вкладок.
4. Оно подойдет для любого сайта или форума, не конфликтует с премудростями движков

Недостатки:
1. новичкам в администрировании сложно настроить
2. оно разработано в первую очередь как именно МЕНЮ (то бишь удобный разворачивающийся список ссылок), а не сборник контейнеров для информации, поэтому тем, кто хочет засунуть туда баннеры, тексты, картинки придется поморочиться.

Код демо-примера меню:

Гайд по настройке

Шаг 1. Составляем список ссылок.

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

(например: "на главную", "FAQ", "важная информация" и т.п.)
<ul>
<li><a href="ссылка">Пункт 1</a></li>
<li><a href="ссылка">Пункт 2</a></li>
<li><a href="ссылка">Пункт 3</a></li>
<li><a href="ссылка">Пункт 4</a></li>
...и т.п.
</ul>
Затем создаем вертикальные ниспадающие списки под основными пунктами.
(например: "Важная информация" >> "Правила", "Навигация", "Партнерство" и т.п.)
<ul>
<li><a href="ссылка">Пункт 1</a>
<ul>
<li><a href="ссылка">Пункт 1.1</a></li>
<li><a href="ссылка">Пункт 1.2</a></li>
<li><a href="ссылка">Пункт 1.3</a></li>
...и т.п.
</ul>
</li>
<li><a href="ссылка">Пункт 2</a></li>
<li><a href="ссылка">Пункт 3</a></li>
<li><a href="ссылка">Пункт 4</a></li>
...и т.п.
</ul>
Далее можно создать дополнительные всплывающие списки, которые будут открываться справа при наведении на пункт меню.
(например: "Важная информация" >> "Правила" >> "правила регистрации", "правила общения", "правила заказов" и т.п.)
<ul>
<li><a href="ссылка">Пункт 1</a>
<ul>
<li><a href="ссылка">Пункт 1.1</a></li>
<li><a href="ссылка">Пункт 1.2</a></li>
<li><a href="ссылка">Пункт 1.3</a>
<ul>
<li><a href="ссылка">Пункт 1.3.1</a></li>
<li><a href="ссылка">Пункт 1.3.2</a></li>
<li><a href="ссылка">Пункт 1.3.3</a></li>
<li><a href="ссылка">Пункт 1.3.4</a></li>
...и т.п.
</ul>
</li>
</ul>
</li>
<li><a href="ссылка">Пункт 2</a></li>
<li><a href="ссылка">Пункт 3</a></li>
<li><a href="ссылка">Пункт 4</a></li>
...и т.п.
</ul>
Подпунктов и вкладок может быть бесконечное множество. Главное - не запутаться и не забывать замыкать теги.
Советую всем составлять список в MS Word, выделяя цветами различные списки, как продемонстрировано здесь.

Шаг 2. Идентификация списков.

Теперь необходимо расставить в меню классы и id, чтобы потом использовать их в css для настройки разного стиля для различных списков (вкладок меню).

Для главного списка, расположенного горизонтально:
<ul id="nav">...</ul>
Для пунктов главного списка, расположенных горизонтально:
<li class="top"><a href="ссылка" class="top_link">...</a></li>
Для пунктов главного списка, в которых присутствуют ниспадающие списки:
<li class="top"><a href="ссылка" class="top_link"><span class="down">...</span></a></li>
Для ниспадающих списков из главных пунктов:
<ul class="sub">...</ul>
Для пунктов всех списков, у которых есть дополнительные подпункты (открывающиеся справа)
<li><a href="ссылка" class="fly">...</a></li>

Шаг 3. Стилизация меню.

Теперь необходимо сделать список горизонтальным и настроить дизайн для различных типов списков.

Для главного списка, расположенного горизонтально:
#nav {...}
Для главного списка, расположенного горизонтально при наведении курсора:
#nav li:hover {...}
Для пунктов главного списка, расположенных горизонтально:
#nav li.top {...}
#nav li a.top_link {...}
#nav li a.top_link span {...}
Для пунктов главного списка, в которых присутствуют ниспадающие списки:
#nav li a.top_link span.down {...}
Для пунктов главного списка, расположенных горизонтально при наведении курсора:
#nav li:hover a.top_link,
#nav li.iehover a.top_link {....}
#nav li:hover a.top_link span,
#nav li.iehover a.top_link span {....}
Для пунктов главного списка, в которых присутствуют ниспадающие списки при наведении курсора:
#nav li:hover a.top_link span.down,
#nav li.iehover a.top_link span.down {....}
Для ниспадающих списков из главных пунктов:
#nav li:hover ul.sub
{....}
Для ПУНКТОВ ниспадающих списков из главных пунктов:
#nav li:hover ul.sub li
{...}
#nav li:hover ul.sub li a
{...}
Для ниспадающих списков из главных пунктов при наведении курсора:
#nav li:hover ul.sub li a:hover
{....}
Для пунктов всех списков, у которых есть дополнительные подпункты (открывающиеся справа):
#nav li ul.sub li a.fly
{...}
и т.п.

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 4

Поделиться503.02.23 20:33

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

Древовидное вертикальное меню (JS, CSS, HTML)

Автор: devote
Демо: http://hostjs-mybb2011.narod.ru/tree-switch.htm

В HTML верх

Само Меню и скрипт:

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 5

Поделиться603.02.23 21:32

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

Выезжающее меню с помощью jQuery
Красивое горизонтальное меню с выезжающими описаниями разделов.

источник
Демо:

[html]
<br /><br />
<div class="con_2">
<div class="con_1">
<ul id="menu">
<li> <a href="https://forumd.ru/viewtopic.php?id=1790"> <em class="icon_about"></em> <span class="title">О нас</span> <span class="description"> История проекта и принципы нашей работы </span> </a> </li>
<li> <a href="https://forumd.ru/viewforum.php?id=27"> <em class="icon_work"></em> <span class="title">Работы</span> <span class="description"> Наше портфолио - лучшие работы дизайнеров </span> </a> </li>
<li> <a href="https://forumd.ru/viewforum.php?id=75"> <em class="icon_help"></em> <span class="title">Помощь</span> <span class="description"> Задайте здесь свой вопрос </span> </a> </li>
</ul>
</div>
</div>

<style></style>
</p>

<p>
<script type="text/javascript" src="http://sadhaka.moy.su/ForumDesign/jquery-1.4.2.min.js"></script>
<script type="text/javascript"></script>
[/html]

Код и инструкции

Разметка
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
красное - ссылка на страницу
синее - заголовок пункта
зеленое - описание пункта

для добавления еще одного пункта, необходимо копировать следующее:
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
Красным отмечен класс иконки. Он должен быть уникальным, отличающимся от других пунктов. Подойдет любое буквосочетание на английском языке: например, icon_1, icon_search, moya_ikonka и т.п.
Затем, мы перейдем к css и загрузим в стиль иконки, которые будут соответствовать этим классам.

Классы "title" и "description" (отмечено синим) оставьте одинаковыми для всех пунктов. Они будут отвечать за то, чтобы заголовки и описания (соответственно) имели одинаковый стиль.

CSS
Контейнер
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
красное - фон контейнера.
синее - границы контейнера, где "3px" - это ширина границы, "solid" - это ее стиль (а можно сделать другого, например: dotted - точечками, dashed - пунктиром, double - двойной рамкой и т.п.), "#FFFFFF" - это ее цвет.
зеленое - это высота контейнера в пикселях (учитывайте, что сверху должно оставаться место для выезжающих описаний)
розовое - это ширина контейнера в пикселях
салатовое - это закругление контейнера и тень

Меню
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
красное - цвет шрифта
синее - семейство шрифта. (то бишь сам шрифт. идет в виде перечисления шрифтов в порядке приоритета: если у пользователя не установлен первый шрифт, то он увидит второй, если нет второго - третий и т.п.)
зеленое - размер шрифта
розовое - делает текст жирным
бордовое - отступ слева
салатовое- отступ букв друг от друга

Иконки
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
Сначала идет перечисление классов иконок с целью задать для них общие свойства:
Красное - ширина и высота (width - ширина, height - высота)
Синее - отступ влево
Зеленое - отступ сверху

Затем, идут индивидуальные свойства каждой иконки, а именно - картинки (отмечено розовым). Указываем ссылки на наши иконки в соответствии с их классами.

Если вы добавляли свои пункты меню, то не забудьте дописать дополнительную иконку в стиль:
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
Заголовки
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
красное - цвет текста заголовков
синее - высота заголовков
зеленое - задает отступ слева
розовое - тень заголовков

Текст заголовков
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
красное - выравнивание (left - слева, right- справа, center - по центру)
синее - отступы

Ссылки
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
Описание
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
красное - цвет фона
синее - границы (рамка)
зеленое - цвет текста
розовое - размер шрифта
бордовое - расстояние, на которое будет "торчать" выезжающий контейнер с описанием
темко-красное - высота и ширина
салатовое - закругление границ и тень

Изменения при наведении курсора
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
красное - цвет фона описания
синее - цвет текста заголовка

вы можете придумать что-нибудь свое. достаточно просто дописать селектор (класс) в код:
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
или можно задать свой стиль для предложенных селекторов: "span.description" - это описание, "span.title" - это заголовок

Javascript
Скрипт, который осуществляет "выезд" элемента ссылки и иконки при наведении мышки:
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
ставить в html-низ

и подключаем jQuery (html-верх)
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 6

Поделиться703.02.23 21:37

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

Меню с эффектом "лава-лампа" Сердечки (CSS, HTML)

Источник: ruseller.com
Демо:
[html]<link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css">
<div class="ph-heart-nav nav">
<a href="#">Главная</a>
<a href="#">О нас</a>
<a href="#">Галерея</a>
<a href="#">Контакт</a>
<a href="#">Карта</a>
<div class="effect"></div>
</div>
<style>
.nav {
overflow: hidden;
position: relative;
width: 900px;
font-family: "Kelly Slab";
font-size: 1.5em;
text-shadow: 0 1px 0 white;
text-align: center;}
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 20%;
text-decoration: none;
color: #393939;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: -10%;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 10%; /* середина первого <a> */}
.nav a:nth-child(2):hover ~ .effect {
left: 30%; /* середина второго <a> */ }
.nav a:nth-child(3):hover ~ .effect {
left: 50%; /* середина третьего <a> */}
.nav a:nth-child(4):hover ~ .effect {
left: 70%; /* середина четвертого <a> */}
.nav a:nth-child(5):hover ~ .effect {
left: 90%; /* середина пятого<a> */}
.ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before {
background: url('https://forumstatic.ru/files/0012/6c/79/15795.png') no-repeat; }

.ph-heart-nav .effect {
position: absolute;
bottom: 26px;
background-position: 0 0;
height: 8px;
width: 62px;
margin-left:-32px; }

.ph-heart-nav a:before, .ph-heart-nav a:after {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: 20px;
background-position: -62px 0;
height: 20px;
width: 26px;
margin-left: -13px; }

.ph-heart-nav a:after {
z-index: 1;
background-position: -62px 0; }
</style>
[/html]

код и инструкции

1. HTML код, располагается в нужном вам месте.
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
ваши вебадреса- это то куда пункт менюшечки будет вести
названия пункта менюшечки

В первой строке кода, осуществляется подгрузка шрифта Kelly Slab, а затем - меню.
В примере меню из пяти позиций, если будете менять количество, придется в кодах всё математически перепросчитать.
Например, в исходной статье вариант меню с 4 позициями.

2. CSS код, располагается в окне стиля или вместе с html, но в этом случае, ниже расположенный код обертывается тегами <style></style>
скопировать код CSS
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
Если вы ничего не меняете, то краткий курс математики вам не нужен.
Математические расчеты:
размер блока меню 100%, а ширину вы задаете сами (в коде он стоит 900px). Поставили и забыли, далее мы работаем с процентами.
Теперь, если вы определились с количеством пунктов меню, то самое время (в примере у нас 5 штучек)
100% / 5 = 20%
В этом куске кода
.effect {
position: absolute;
left: -10%;
transition: 0.7s ease-in-out; }
-10% получается от сдвига в левую сторону на половину определенного нами значения (т.е. 20/2=10)
.nav a:nth-child(1):hover ~ .effect {
left: 10%; /* середина первого <a> */}
тут все просто, та же половинка, но с плюсом
.nav a:nth-child(2):hover ~ .effect {
left: 30%; /* середина второго <a> */ }
прошлое значение (10%) + 20% (те что мы получили при делении 100 на количество пунктов меню)
Далее код повторяется
a:nth-child - значение в скобках увеличиваем на 1-цу, а проценты на 20% (напоминаю это те,которые мы получили при делении 100 на количество пунктов меню)
Таким образом:
a:nth-child - значение в скобках окончится на цифре, равной количеству пунктов меню,
а значение left, для него будет ровняться 100% за минусом половины ширины пункта менюшки.
Запутались?
вот расчеты для меню из 8 пунктов
100/8=12,5%
12,5%/2=6,25%
и вот так будет выглядеть часть кода
.effect {
position: absolute;
left: -6,25%;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 6,25%; }
.nav a:nth-child(2):hover ~ .effect {
left: 18,75%; /* 6,25%+12,5% */ }
.nav a:nth-child(3):hover ~ .effect {
left: 31,25%; /* 18,75%+12,5% */}
.nav a:nth-child(4):hover ~ .effect {
left: 43,75%; /* 31,25%+12,5% */}
.nav a:nth-child(5):hover ~ .effect {
left: 56,25%; /* 43,75%+12,5%<a> */}
.nav a:nth-child(6):hover ~ .effect {
left: 68,75%; /* 56,25%+12,5%<a> */}
.nav a:nth-child(7):hover ~ .effect {
left: 81,25%; /* 68,75%+12,5%<a> */}
.nav a:nth-child(8):hover ~ .effect {
left: 93,75%; /* 81,25%+12,5%<a> */}

Велика вероятность, что может поехать оформление, местоположение сердечек или стрелок, для этого нужно будет чуток поиграть с их положениями.
Если возникнут трудности обращайтесь.

в коде CSS используется эта картинка (цельная)

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 7

Поделиться803.02.23 21:48

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

Интерактивное меню плиткой со всплывающим контентом (JS, CSS)

Источник
Скачать исходники
Демо:

коды

HTML код
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
Название кнопки вставляется в тег span
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
Всплывающий текст вставляется в div
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.
CSS

Вставляется в шаблон стиля или в head (для mybb форума - html верх) с тегами style
Настройки стиля подписаны в комментариях (между звездочками - /* комментарий*/ )
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Скрипт:
Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 8

Поделиться903.02.23 21:50

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

Вертикальное меню-панелька
Реализовано с использованием иконочного шрифта, адаптировано для мобильных.

Автор: @Will O The Wisp

CSS

Ксс-код ставим в Свой стиль, в хтмл-верх в тегах <style>:
Код:
<style>
тут коды
<style>
Или отдельным файлом:
Код:
     
<link rel="stylesheet" type="text/css" href="https://ссылка на файл с ксс-кодом.css" />

Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.

HTML

Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 9

Поделиться1003.02.23 22:14

Автор: Gerda
крашеный некротехнофил
Последний визит:
03.12.24 00:27
Уважение: +10111

Меню Интерактивная галерея

Автор: @Will O The Wisp

CSS

Код:
<style>
тут коды
<style>
Или отдельным файлом:
Код:

<link rel="stylesheet" type="text/css" href="https://ссылка на файл с ксс-кодом.css" />

Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.

HTML

Скрытый текст:
Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Подпись автора: Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833
Цитировать Сообщение 10

Ответить

Страница: 1 2 »

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»

Имя

font_download format_size format_bold format_italic format_underlined strikethrough_s format_paint color_lens

format_align_left format_align_center format_align_right list table_view

link add_photo_alternate ondemand_video mood mic

content_cut lock_open format_quote code

horizontal_rule anchor live_help emoji_symbols library_add

ТочкамиDots

КружочкамиCircles

КвадратамиSquares

ЦифрамиNumbers

Римскими цифрамиRoman Numerals

Без обозначенийNo Markers

Многострочный пункт спискаMultiline List Item

ТекстText

HTML

Javascript

Bebas Neue Arial Georgia Microsoft Sans Serif Tahoma Verdana Century Gothic Palatino Linotype Times New Roman Franklin Gothic Medium Impact Arial Black Courier New Lucida Console Comic Sans Ms

10px 12px 14px 16px 18px 20px 22px

ЗаголовокTitle Автосжатие больших картинокAuto-resize large images Скрыть от гостейHide from guests Ссылка «скачать» Download link Имя читателяReader's name Добавлено спустя…Added after... Надстрочный текстSuperscript text Подстрочный текстSubscript text БлокBlock HTML иконка

Скрыть инструментарий Показать инструментарий

Теги оформления специальных постов

Сделать пост специальным[block="portfoliopost"]portfoliopost[/block],

Светлый фон[block="makeportfoliolight"]makeportfoliolight[/block],

Красный пост[block="saledpost"]saledpost[/block],

Синий пост[block="forsalepost"]forsalepost[/block],

Зеленый пост[block="freepost"]freepost[/block],

Пост без профиля[block="no-prof"]no-prof[/block],

Теги оформления картинок

Обложки: Для одной картинки по центру в рамке, автоматически уменьшается до ширины 480px

Обложка[block="cover"][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Закрыто[block="cover"][block="icon material-icons"]lock[/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Продажа[block="cover"][block="icon fa-solid fa-sack-dollar"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Подарок[block="cover"][block="icon fa-solid fa-gift"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Превью: Для любого количества картинок по центру в рамке, автоматически уменьшается до ширины или высоты 300px

Блок для превью[block="morepics"],[/block]

Разноцветные картинки-ссылки: Для любого количества картинок по центру в разноцветных рамках с заголовком, автоматически уменьшается до ширины 350px, минимальная высота 230px (если высота больше, картинка "обрезается" снизу, но не сжимается)

Блок для картинок-ссылок[block="port-block"],[/block]

Красный[block="p-out saled"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Синий[block="p-out forsale"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Зеленый[block="p-out free"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Желтый[block="p-out yellow"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Теги оформления контента

Обведенный текст[block="details"] [block="det"],[/block] [/block]

Добавить еще блок[block="det"],[/block]

Блок с кнопками[block="links"] [block="demo"][url=ссылка]синяя кнопка,[/url][/block] [block="store"][url=ссылка]оранжевая кнопка[/url][/block] [/block]

Синяя кнопка[block="demo"][url=ссылка]текст,[/url][/block]

Оранжевая кнопка[block="store"][url=ссылка]текст,[/url][/block]

добавить работу [block="wow bounceIn p-out,"] иконка [block="p-descr"][url=https://forumd.ru/viewtopic.php?id=]описание[/url][/block] [block="p-inner"][url=https://forumd.ru/viewtopic.php?id=][img]картинка[/img][/url][/block] [/block]

Иконки:

lock[block="icon material-icons"]lock,[/block]

[block="icon fa-solid fa-sack-dollar"],[/block]

[block="icon fa-solid fa-gift"],[/block]

ТЕГИ (вставить в p-out через пробел)

Тип работы:

под заказ saled,

на продажу forsale,

бесплатно free,

Основная категория:

Вебдизайн dis,

(для всего связанного с работой на сайтах/форумах, кроме готовых скриптов и мелкой графики)

Графика graf,

(для графона, НЕ включающего кодинг/скрипты)

Скрипты/коды code,

(для готовых разработок и работы по верстке/кодингу)
Мини-фильтры дизайнов:

адаптивные mob,

ролевые игры frpg,

компьютерные игры game,

нейтральные flat,

Подкатегории:

Дизайн форумов/сайтов fulldis,

(для полных работ по дизайну)

Макеты layout,

(для дизайнов, где только макет без кода, или работ по созданию макетов чего-либо)

Верстка dis-code,

(для работ по верстке чужих дизайнов или отдельных штук)

Соц-сети/стримы graf-s,

(графон для оформления соцсетей/стримов)

Ролевая графика/арт art,

(для мелкой графики)

Javascript/CSS js,

(для скриптов или выложенных цсс кодов)

Бесплатный диз от FD [block="p-out free fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Платный диз от FD [block="p-out forsale fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Дизайн от юзеров [block="p-out yellow"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

ТЕГИ (вставить в p-out через пробел)

Платформа:

MyBB.ru mybb-ru,

Макет (любая платформа) any,

Параметры:

+ PSD psd-in,

(в наличии макет помимо кодов)

+ адаптивка mob,

(есть версия для мобилок)

Тематика:

нейтральные flat,

ролевые игры frpg,

компьютерные игры game,

фентези fant,

аниме anime,

кино/сериалы kino,

стимпанк/киберпанк cyb,

мультфильмы kids,

животные cats,

Цвета:

тёмные darkst,

светлые light,

яркие bright,

добавить скрипт/код [block="SCRBLOCK"] [block="stforlink"] иконка, [block="link"][url=https://forumd.ru/viewtopic.php?id=]название[/url][/block] [/block] [block="sttags"] теги [/block] [/block]

Иконки:

[block="icon fa-brands fa-js"],[/block]

[block="icon fa-brands fa-css3-alt"],[/block]

[block="icon fa-regular fa-file-lines"],[/block]

[block="icon fa-solid fa-file-code"],[/block]

[block="icon fa-solid fa-file-invoice-dollar"],[/block]

ТЕГИ (*значение в скобках вставить в SCRBLOCK через пробел)

Тип кода:

скрипт (js)[block="js"]скрипт, js[/block]

css код (css)[block="css"]css код, css[/block]

HTML/CSS шаблоны (shab)[block="shab"]HTML/CSS шаблоны, shab[/block]

Модули/Расширения (global)[block="global"]Модули/Расширения, global[/block]

Платформа:

MyBB.ru (mybb-ru)[block="mybb-ru"]MyBB.ru, mybb-ru[/block]

Любой движок (any)[block="any"]Любой движок, any[/block]

Тип для форума:

Пользователи (users)[block="users"]Пользователи, users[/block]

Профиль (userprof)[block="userprof"]Профиль, userprof[/block]

Доп. поля профиля (adfield)[block="adfield"]Доп. поля профиля, adfield[/block]

Аватары (avatars)[block="avatars"]Аватары, avatars[/block]

Репутация (repa)[block="repa"]Репутация, repa[/block]

Группы (groups)[block="groups"]Группы, groups[/block]

Гoсти (guest)[block="guest"]Гoсти, guest[/block]

Администраторы (admins)[block="admins"]Администраторы, admins[/block]

Модераторы (moders)[block="moders"]Модераторы, moders[/block]

Регистрация (regis)[block="regis"]Регистрация, regis[/block]

Личные сообщения (ls)[block="ls"]Личные сообщения, ls[/block]

Вход (login)[block="login"]Вход, login[/block]

Подписки (subsc)[block="subsc"]Подписки, subsc[/block]

Поиск (search)[block="search"]Поиск, search[/block]

Цитирование (quotes)[block="quotes"]Цитирование, quotes[/block]

Пагинация (pagin)[block="pagin"]Пагинация, pagin[/block]

Опросы (polls)[block="polls"]Опросы, polls[/block]

Смайлы (smiles)[block="smiles"]Смайлы, smiles[/block]

Фикс скриптов QuadroBoards (qbfix)[block="qbfix"]Фикс скриптов QuadroBoards, qbfix[/block]

Страница форума:

На всех страницах (allpages)[block="allpages"]На всех страницах, allpages[/block]

Страницы (созд. в админке) (fpages)[block="fpages"]Страницы (соз. в админке), fpages[/block]

Главная страница (mainpage)[block="mainpage"]Главная страница, mainpage[/block]

Объявление (announ)[block="announ"]Объявление, announ[/block]

Категории (categ)[block="categ"]Категории, categ[/block]

Форумы (forums)[block="forums"]Форумы, forums[/block]

Статистика (stats)[block="stats"]Статистика, stats[/block]

Список тем (topiclist)[block="topiclist"]Список тем, topiclist[/block]

Страница профиля (profpage)[block="profpage"]Страница профиля, profpage[/block]

Тема (topics)[block="topics"]Тема, topics[/block]

Сообщения (posts)[block="posts"]Сообщения, posts[/block]

Контент сообщений (p-content)[block="p-content"]Контент сообщений, p-content[/block]

Рейтинг постов (p-repa)[block="p-repa"]Рейтинг постов, p-repa[/block]

Профиль автора поста (p-prof)[block="p-prof"]Профиль автора поста, p-prof[/block]

Форма ответа (fo)[block="fo"]Форма ответа, fo[/block]

Модификация ФО (fomod)[block="fomod"]Модификация ФО, fomod[/block]

Новые BB-теги (newbb)[block="newbb"]Новые BB-теги, newbb[/block]

Инструментарий спец тем/постов (spesh)[block="spesh"]Инструментарий спец тем/постов, spesh[/block]

Универсальные теги:

Дизайн/стиль (dis)[block="dis"]Дизайн/стиль, dis[/block]

Замена элементов/атрибутов (chan)[block="chan"]Замена элементов/атрибутов, chan[/block]

Загрузка (load)[block="load"]Загрузка, load[/block]

Переадресация (redir)[block="redir"]Переадресация, redir[/block]

Скроллинг (scroll)[block="scroll"]Скроллинг, scroll[/block]

Виджеты (vidjet)[block="vidjet"]Виджеты, vidjet[/block]

Меню (menu)[block="menu"]Меню, menu[/block]

Вкладки (ttabs)[block="ttabs"]Вкладки, ttabs[/block]

Галереи (gall)[block="gall"]Галереи, gall[/block]

Слайдеры (sliders)[block="sliders"]Слайдеры, sliders[/block]

Ротаторы (rotat)[block="rotat"]Ротаторы, rotat[/block]

Таймеры/даты (timers)[block="timers"]Таймеры/даты, timers[/block]

Спойлеры (spoilers)[block="spoilers"]Спойлеры, spoilers[/block]

Реклама (adv)[block="adv"]Реклама, adv[/block]

Изображения (pics)[block="pics"]Изображения, pics[/block]

Медиа (media)[block="media"]Медиа, media[/block]

Ролевые игры (frpg)[block="frpg"]Ролевые игры, frpg[/block]

Hover-эффекты (hover)[block="hover"]Hover-эффекты, hover[/block]

Анимация (anim)[block="anim"]Анимация, anim[/block]

Украшения (decor)[block="decor"]Украшения, decor[/block]

Праздники (seleb)[block="seleb"]Праздники, seleb[/block]

Ограничения/запреты (stops)[block="stops"]Ограничения/запреты, stops[/block]

Антикопирование (nocopy)[block="nocopy"]Антикопирование, nocopy[/block]

Уведомления (notif)[block="notif"]Уведомления, notif[/block]

ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Меню навигации

Пользовательские ссылки

Объявление

🎧 Подкаст «НЕТЕРОЛЕВЫЕ»

🍁 Что такое осень? Конкурс осенних дизайнов!

🔥 Акция! Осенние скидки на Мгновенные уведомления

❤️ Поддержи проект! Стань модератором!

💌 Акция! Подписка, лайк, коммент, репост!

🌟 SPECIAL OFFER: We distribute designs for free

❤️ Support the project

Информация о пользователе