Различия

Показаны различия между двумя версиями страницы.

--- software:development:demo:cms:ucms:appendix:appendix_css:nav:sidenav_icons [2026/04/15 12:24] – создано VladPolskiy
+++ software:development:demo:cms:ucms:appendix:appendix_css:nav:sidenav_icons [2026/04/15 16:02] (текущий) – VladPolskiy
@@ Строка 1: / Строка 1: @@
 ====== CSS Боковая панель с иконками ======
+<note page>
 <html>
-<head>
+<iframe height="350" style="width: 100%;" scrolling="yes" title="Untitled" src="./demo_ucms/css_sidenav_icons/index.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+</iframe>
-<!-- Загрузить библиотеку иконок -->
+</html>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</note>
-<style>
-body {font-family: "Lato", sans-serif;}
-/* Стиль боковой панели - фиксированная полная высота */
-.sidebar {
-  height: 100%;
-  width: 160px;
-  position: fixed;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  background-color: #111;
-  overflow-x: hidden;
-  padding-top: 16px;
-}
-/* Боковая панель стиль ссылки */
-.sidebar a {
-  padding: 6px 8px 6px 16px;
-  text-decoration: none;
-  font-size: 20px;
-  color: #818181;
-  display: block;
-}
-/* Стиль ссылок при наведении курсора мыши */
-.sidebar a:hover {
-  color: #f1f1f1;
-}
-/* Стиль основного содержания */
-.main {
-  margin-left: 160px; /* Same as the width of the sidenav */
-  padding: 0px 10px;
-}
-/* Добавить медиа запросы для небольших экранов (когда высота экрана меньше 450px, добавьте меньшие отступы и размер шрифта) */
-@media screen and (max-height: 450px) {
-  .sidebar {padding-top: 15px;}
-  .sidebar a {font-size: 18px;}
-}
-</style>
-</head>
-<body>
-<!-- Боковая панель -->
-<div class="sidebar">
-  <a href="tryhow_css_sidebar_icons.htm#home"><i class="fa fa-fw fa-home"></i> Главная</a>
-  <a href="tryhow_css_sidebar_icons.htm#services"><i class="fa fa-fw fa-wrench"></i> Сервисы</a>
-  <a href="tryhow_css_sidebar_icons.htm#clients"><i class="fa fa-fw fa-user"></i> Клиенты</a>
-  <a href="tryhow_css_sidebar_icons.htm#contact"><i class="fa fa-fw fa-envelope"></i> Контакт</a>
-</div>
-<div class="main">
-  <h2>Боковая панель с иконками</h2>
-  <p>Эта боковая навигация имеет полную высоту (100%) и всегда отображается.</p>
-  <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
-  <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
-</div>
-</body>
-</html>
 <code html index.html>
 <!DOCTYPE html>