Милкимаус

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

Уроки HTML

Скрипты для сайтов — эффекты CSS — меню книжная полка

ОтМилкимаус

02.11.2026 #css, #html,#js
Скрипты для сайтовСкрипты для сайтов

Скрипты для сайтов — эффекты CSS — меню книжная полка.

Скрипты для сайтов — эффекты CSS — меню книжная полка

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

Образец выполнения кода:



















Листинг кода:

<style>
ul.topUL {padding:0; margin:30px; list-style:none; width:250px; margin:30px auto; position:relative; z-index:100; font-family:verdana, arial, sans-serif;}
ul.topUL > li {float:left; margin-right:1px; position:relative; z-index:10;}
ul.topUL > li a.p1 {display:block; width:43px; border:2px solid #333; border-width:1px 3px; height:248px; color:#fff; top:0; left:0; text-decoration:none; position:relative;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}
ul.topUL > li > a span {display:block; width:43px; white-space:nowrap; position:absolute; left:0px; top:200px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
ul.topUL > li.b1 > a {background:#562; border-color:#340;
background: -moz-linear-gradient(0, #562, #784 50%, #562 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#562), color-stop(50%, #784), color-stop(100%, #562));
}
ul.topUL > li.b2 > a {background:#366; border-color:#144;
background: -moz-linear-gradient(0, #366, #688 50%, #366 100%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#366), color-stop(50%, #688), color-stop(100%, #366));
}
ul.topUL > li.b3 > a {background:#246; border-color:#024;
background: -moz-linear-gradient(0, #246, #579 50%, #246 100%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#246), color-stop(50%, #579), color-stop(100%, #246));
}
ul.topUL > li.b4 > a {background:#741; border-color:#520;
background: -moz-linear-gradient(0, #741, #a74 50%, #741 100%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#741), color-stop(50%, #a74), color-stop(100%, #741));
}
ul.topUL > li.b5 > a {background:#623; border-color:#401;
background: -moz-linear-gradient(0, #623, #956 50%, #623 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#623), color-stop(50%, #956), color-stop(100%, #623));
}
ul.topUL ul.sub {padding:0; list-style:none; position:absolute; left:-51px; top:230px; width:0; overflow:hidden; height:250px; margin:0 0 20px 0;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
transition: 0s;
transition-delay:0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
ul.topUL > li.b1 > ul {background:#784;}
ul.topUL > li.b2 > ul {background:#688;}
ul.topUL > li.b3 > ul {background:#579;}
ul.topUL > li.b4 > ul {background:#a74;}
ul.topUL > li.b5 > ul {background:#956;}
ul ul li.content {width:0; height:190px; position:absolute; left:0; top:10px; background:#eee; padding:40px 0 0 0; text-indent:20px; font-size:11px; color:#444; overflow:hidden;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-transition: 0s;
-moz-transition: 0s;
-o-transition: 0s;
transition: 0s;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
ul ul li b {display:block;}
ul ul li a {text-decoration:none; color:#444; padding-left:20px; line-height:20px;}
ul ul li a:hover {color:#000; text-decoration:underline;}
ul ul li.cover {width:0; height:220px; position:absolute; padding-top:30px; text-indent:10px; font-size:14px font-weight:bold; color:#fff; left:0; top:0; z-index:100; overflow:hidden; white-space:nowrap;}
ul ul li.cover i {font-weight:normal; font-style:normal; font-size:10px; line-height:40px; padding-left:10px;}
ul ul li.cover em {display:block; font-weight:normal; font-style:normal; margin-top:120px; font-size:10px; line-height:40px;}
ul.topUL > li.b1 li.cover {background:#562;
background: -moz-linear-gradient(0, #562, #784 100%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#562),color-stop(100%, #784));
}
ul.topUL > li.b2 li.cover {background:#366;
background: -moz-linear-gradient(0, #366, #688 100%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#366),color-stop(100%, #688));
}
ul.topUL > li.b3 li.cover {background:#246;background: -moz-linear-gradient(0, #246, #579 100%);  background: -webkit-gradient(linear, 0 0, 100% 0, from(#246),color-stop(100%, #579));
}
ul.topUL > li.b4 li.cover {background:#741;
background: -moz-linear-gradient(0, #741, #a74 100%);
background: -webkit-gradient(linear, 0 0, 100% 0, from(#741),color-stop(100%, #a74));
}
ul.topUL > li.b5 li.cover {background:#623;
background: -moz-linear-gradient(0, #623, #956 100%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#623),color-stop(100%, #956));
}
ul.topUL > li:hover {direction:ltr; z-index:100;}
ul.topUL > li:hover a.p1 {top:230px;left:-100px;
-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
ul.topUL li:hover ul {width:200px;
-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
transition-delay: 0.5s;
-o-transition-delay: .5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
ul.topUL li:hover ul li.cover {width:200px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}
ul.topUL li:hover ul li.content {width:190px;
background: -moz-linear-gradient(0, #ddd, #fff 50%);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#ddd), color-stop(50%, #fff));
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
ul.topUL li:hover ul:hover {overflow:visible;}
ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;}
ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;}
ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;}
ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;}
ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;}
ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;}
ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;}
ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;}
ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;}
ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;}
ul.topUL li:hover ul:hover li.cover {left:-2px; width:1px; height:235px; top:-15px; padding-top:45px;
-o-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}
.shelf {clear:left; width:350px; height:25px; background:#620; margin:0 auto;
background: -moz-linear-gradient(90deg, #620, #950 20%, #620 30%);
  background: -webkit-gradient(linear, 0 100%, 0 0 , from(#620), color-stop(20%, #950), color-stop(30%, #620));
-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
}
</style>
<ul class="topUL">
<li class="b1"><a class="p1" href="#"><span>Библиотека CSS</span></a>
<ul class="sub">
<li class="cover">Библиотека CSS<br /><i>Делай сайт</i><em>Подробнее</em></li>
<li class="content">
<b>Категории</b><br />
<a href="#">1. Типы значений</a><br />
<a href="#">2. Псевдоклассы</a><br />
<a href="#">3. Псевдоэлементы</a><br />
<a href="#">4. Позиционирование</a><br />
<a href="#">5. Свойства анимации</a><br />
<a href="#">6. Свойства границ</a><br />
</li>
</ul>
</li>
<li class="b2"><a class="p1" href="#"><span>Библиотека HTML</span></a>
<ul class="sub">
<li class="cover">Библиотека HTML<br /><i>Делай сайт</i><em>Подробнее</em></li>
<li class="content">
<b>Категории</b><br />
<a href="#">1. Объекты</a><br />
<a href="#">2. Таблицы</a><br />
<a href="#">3. Символы</a><br />
<a href="#">4. Звук</a><br />
<a href="#">5. Списки</a><br />
<a href="#">6. Фреймы</a><br />
</li>
</ul>
</li>
<li class="b3"><a class="p1" href="#"><span>Скрипты для uCoz</span></a>
<ul class="sub">
<li class="cover">Скрипты для uCoz<br /><i>Делай сайт</i><em>Подробнее</em></li>
<li class="content">
<b>Категории</b><br />
<a href="#">1. Аудиоплееры</a><br />
<a href="#">2. Видеоплееры</a><br />
<a href="#">3. Менюшки</a><br />
<a href="#">4. Генераторы</a><br />
<a href="#">5. Галереи</a><br />
<a href="#">6. Часы</a><br />
</li>
</ul>
</li>
<li class="b4"><a class="p1" href="#"><span>Фоны для сайта</span></a>
<ul class="sub">
<li class="cover">Фоны для сайта<br /><i>Делай сайт</i><em>Подробнее</em></li>
<li class="content">
<b>Категории</b><br />
<a href="#">1. Абстрактный фон</a><br />
<a href="#">2. Блестящий фон</a><br />
<a href="#">3. Фэнтези фон</a><br />
<a href="#">4. Автомобили фон</a><br />
<a href="#">5. Цветной фон</a><br />
</li>
</ul>
</li>
<li class="b5"><a class="p1" href="#"><span>Полезные ресурсы</span></a>
<ul class="sub">
<li class="cover">Полезные ресурсы<br /><i>Делай сайт</i><em>Подробнее</em></li>
<li class="content">
<b>Категории</b><br />
<a href="#">1. Генераторы изображений</a><br />
<a href="#">2. Генераторы цвета</a><br />
<a href="#">3. Генераторы CSS & HTML</a><br />
<a href="#">4. Белые каталоги сайтов</a><br />
<a href="#">5. Хранилища файлов</a><br />
</li>
</ul>
</li>
</ul>

Обмен визитами — бесплатная раскрутка сайта.

Самый простой способ, это по старинке, обмен визитами через ввод адреса сайта в форму:



Ссылка не должна превышать 200 символов и должна обязательно являться URL адресом. Без пробелов.

***

Трейн-чекс Уроки WEB программирования.

  1. ПОДДЕРЖАТЬ ПРОЕКТ на WebMoney
  2. WEST-HOSTER
  3. ПОРТАЛ СООБЩЕСТВА 🕶️
  4. HTML JS CSS РЕДАКТОР
  5. ШРИФТЫ ДЛЯ САЙТОВ
  6. ПРОМПТЫ ДЛЯ ШЕДЕВРУМА
  7. Символ неразрывного пробела
  8. Скрипт считывания клавиш
  9. Файлы куки
  10. AJAX счётчик кликов
  11. Запрет кэширования JS и PHP
  12. Координаты курсора JS
  13. Числа от 1 до 10 на JS
  14. Перевести двоичный код в кратный на JS
  15. CSS на JavaScript
  16. Новые теги HTML
  17. Может ли HTML 6 заменить JavaScript
  18. HTML форма без перезагрузки страницы
  19. Смайлы эмоджи — ГЕНЕРАТОР
  20. Форматы изображений
  21. Скрипт AJAX лайков и дизлайков
  22. Горячие клавиши
  23. Скачать изображение в CANVAS
  24. Какими будут сайты будущего?
  25. Что делает администратор сайта
  26. Девушка фурри Милка Маус
  27. CMS движки для сайтов

  28. Мануалы PHP

  29. Мануалы PHP — Фильтры
  30. Мануалы PHP — Узнать IP адрес
  31. Мануалы PHP — Файлы папки директории
  32. Мануалы PHP — Вывод файлов scandir()
  33. Мануалы PHP — Отправка данных из формы
  34. Мануалы PHP — Запись данных в файл
  35. Мануалы PHP — Запрет повторной отправки формы
  36. Мануалы PHP — Дата и время
  37. Мануалы PHP — Отправка E-mail
  38. Мануалы PHP — Работа с изображениями
  39. Мануалы PHP — Вход по паролю
  40. Отправка формы AJAX
  41. Геолокация на PHP, узнать город
  42. Выполнение PHP скрипта по клику
  43. Маскировка ссылок
  44. Таблица умножения

  45. Анимация JS

  46. Шифровка текста на JS
  47. Безумный текст
  48. Компрессор кода
  49. Уведомления на рабочий стол
  50. Перезагрузка на JS и PHP
  51. Рейтинг на JS и PHP
  52. Виджет комментариев на PHP
  53. Рекламный баннер на CSS
  54. Запрет копирования
  55. Узнать код клавиш
  56. Скрипт кода клавиш
  57. Конвертер кода в спецсимволы
  58. Бесконечный алерт
  59. Вывод случайных фраз
  60. Откуда пришёл посетитель на JS
  61. CSS type radio checkbox
  62. Эффекты с текстом
  63. Посетители онлайн на PHP
  64. Cookie счётчик посещений
  65. Анимация текста
  66. Type — range
  67. Лабиринт на JS
  68. Дата и время на JS
  69. CSS меню блокнот
  70. CSS меню книжная полка
  71. CSS вращающийся баннер
  72. JavaScript азбука морзе
  73. JavaScript копирайт
  74. JavaScript анимация текста
  75. JavaScript звуки
  76. Кнопка вверх
  77. Подсчёт символов на JavaScript
  78. Работа с куками на PHP

  79. AXAJ -JS

  80. AJAX счётчик кликов
  81. Генератор случайных чисел
  82. PHP счётчик страниц
  83. PHP запись файлов
  84. Дата посещения страницы на PHP
  85. Счётчик лайков на PHP
  86. Дата изменения страницы
  87. Игра JS — угадай число
  88. Круговое меню для сайта
  89. Навигатор
  90. Запрет копирования
  91. Вычислить дату на JS
  92. Кнопка на CSS
  93. view-source: исходный код
  94. Анимация JS
  95. Время проведённое на сайте
  96. Календарь JS
  97. Снег для сайта
  98. Анимация волны
  99. Добавить в избранное
  100. Срок жизни сайта
  101. Таймер на JS
  102. Блокировка мыши и клавиатуры
  103. Приветствие по времени суток
  104. JS время
  105. Яндекс поиск

От Милкимаус

Философ после третьего тоста. Слегка адекватен. Автор сборника песен MILKIMAUS. Приглашаю всех регистрируйтесь в сообществе, будем дружить

Похожая запись

Уроки HTML

Скрипты для сайтов — скрипт поиска на сайт

04.11.2026 Милкимаус
Уроки HTML

Скрипты для сайтов — дата и время на JavaScript — работа с датами на JS

04.11.2026 Милкимаус
Уроки HTML

Скрипты для сайта — приветствие по времени суток

04.11.2026 Милкимаус

Добавить комментарий

You missed

Авторские стихи

Стихи о женской доле.

05.11.2026 Милкимаус
Уроки HTML

Скрипты для сайтов — скрипт поиска на сайт

04.11.2026 Милкимаус
Уроки HTML

Скрипты для сайтов — дата и время на JavaScript — работа с датами на JS

04.11.2026 Милкимаус
Уроки HTML

Скрипты для сайта — приветствие по времени суток

04.11.2026 Милкимаус