worldwide open-source software - software:development:demo:cms:ucms:appendix:appendix_css:nav

css_sidebar_slide_animation

anonymous@undisclosed.example.com (Anonymous) — Fri, 17 Apr 2026 05:37:11 +0000

CSS вертикальный слайдер

css_sticky_social_bar

anonymous@undisclosed.example.com (Anonymous) — Wed, 15 Apr 2026 10:31:42 +0000

CSS липкая социальная панель

<!doctype html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8">
    <!-- запрет автоперевода перевода google translate -->
    <meta name="google" content="notranslate">
	<!-- отображение файктической ширины экрана для адаптивного дизайна -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Загрузить шрифт потрясающие иконки -->
	<link rel="stylesheet" href="/demo_ucms/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/style.css">
    <title>sample.html</title>
	<!-- блок стилей css -->
	</head>
	<body>
<!-- Панель значков социальных сетей -->
<div class="icon-bar">
  <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
  <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
  <a href="#" class="google"><i class="fa fa-google"></i></a>
  <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
  <a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>
 
<div class="content">
  <h3>Классический текст Lorem Ipsum, используемый с XVI века</h3>
  <p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum."
 
Абзац 1.10.32 "de Finibus Bonorum et Malorum", написанный Цицероном в 45 году н.э.
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur 
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, 
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non 
numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat 
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis 
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel 
eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae 
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
 
</p>
 </div>
 
  </body>
</html>

style.css

/* Фиксированная/липкая панель значков (выравнивается по вертикали на 50% от верхней части экрана) */
.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
 
/* Стиль ссылок на панели значков */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}
 
/* Стиль иконки социальных медиа с цветом, если вы хотите */
.icon-bar a:hover {
  background-color: #000;
}
 
.facebook {
  background: #3B5998;
  color: white;
}
 
.twitter {
  background: #55ACEE;
  color: white;
}
 
.google {
  background: #dd4b39;
  color: white;
}
 
.linkedin {
  background: #007bb5;
  color: white;
}
 
.youtube {
  background: #bb0000;
  color: white;
}
 
.content {
  margin-left: 75px;
  font-size: 30px;
}

icon_bar_h

anonymous@undisclosed.example.com (Anonymous) — Wed, 15 Apr 2026 09:07:04 +0000

CSS Панель с иконками

Горизонтальная

index.html

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-bar {
  width: 100%; /* Полная ширина */
  background-color: #555; /* Темно-серый фон */
  overflow: auto; /* Переполнение из-за поплавка */
}
 
.icon-bar a {
  float: left; /* Поплавок одной стороны бок */
  text-align: center; /* Выравнивание текста по центру */
  width: 20%; /* Равная ширина (5 иконок с шириной 20% каждая = 100%) */
  padding: 12px 0; /* Некоторые верхние и нижние отступы */
  transition: all 0.3s ease; /* Добавить переход для эффектов наведения */
  color: white; /* Белый цвет текста */
  font-size: 36px; /* Увеличенный размер шрифта */
}
 
.icon-bar a:hover {
  background-color: #000; /* Добавить при наведении цвет */
}
 
.active {
  background-color: #4CAF50; /* Добавить активный/текущий цвет */
}
</style>
<body>
 
<!-- Добавить библиотеку иконок -->    
<div class="icon-bar">
  <a class="active" href="#"><i class="fa fa-home"></i></a> 
  <a href="#"><i class="fa fa-search"></i></a> 
  <a href="#"><i class="fa fa-envelope"></i></a> 
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a> 
</div>
 
</body>
</html>

icon_bar_v

anonymous@undisclosed.example.com (Anonymous) — Wed, 15 Apr 2026 09:05:08 +0000

CSS Панель с иконками

Вертикальная

index.html

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-bar {
  width: 90px; /* Установите определенную ширину */
  background-color: #555; /* Темно-серый фон */
}
 
.icon-bar a {
  display: block; /* Сделайте так, чтобы ссылки располагались друг под другом, а не бок о бок */
  text-align: center; /* Выравнивание текста по центру */
  padding: 16px; /* Добавить немного отступы */
  transition: all 0.3s ease; /* Добавить переход для эффектов наведения */
  color: white; /* Белый цвет текста */
  font-size: 36px; /* Увеличенный размер шрифта */
}
 
.icon-bar a:hover {
  background-color: #000; /* Добавить при наведении цвет */
}
 
.active {
  background-color: #4CAF50; /* Добавить активный/текущий цвет */
}
</style>
<body>
 
<!-- Добавить библиотеку иконок -->    
<div class="icon-bar">
  <a class="active" href="#"><i class="fa fa-home"></i></a> 
  <a href="#"><i class="fa fa-search"></i></a> 
  <a href="#"><i class="fa fa-envelope"></i></a> 
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a> 
</div>
 
</body>
</html>

responsive

anonymous@undisclosed.example.com (Anonymous) — Wed, 15 Apr 2026 09:16:05 +0000

Адаптивная верхняя навигации

Главная Новости Контакты О нас

Пример адаптивной верхней навигации

Измените размер окна браузера, чтобы увидеть, как это работает.

index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Загрузите библиотеку значков, чтобы отобразить меню гамбургера (бары) на маленьких экранах -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Добавить черный цвет фона для верхней навигации */
.topnav {
  background-color: #333;
  overflow: hidden;
}
 
/* Стиль ссылок внутри панели навигации */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
 
/* Изменение цвета ссылок при наведении курсора */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* Добавить активный класс, чтобы выделить текущую страницу */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
 
/* Скрыть ссылку, которая должна открывать и закрывать верхнюю навигационную панель на небольших экранах */
.topnav .icon {
  display: none;
}
 
/* Если ширина экрана меньше 600 пикселей, скройте все ссылки, кроме первой ("Главная"). Показать ссылку, которая содержит должен открыть и закрыть верхнюю навигационную панель topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
 
/* Класс "responsive" добавляется в верхнюю навигационную панель используя JavaScript, когда пользователь нажимает на значок. Этот класс делает topnav хорошо выглядеть на небольших экранах (отображать ссылки по вертикали, а не по горизонтали) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
</head>
<body>
 
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Главная</a>
<a href="#news">Новости</a>
<a href="#contact">Контакты</a>
<a href="#about">О нас</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
 
<div style="padding-left:16px">
<h2>Пример адаптивной верхней навигации</h2>
<p>Измените размер окна браузера, чтобы увидеть, как это работает.</p>
</div>
 
<script>
/* Переключение между добавлением и удалением класса "responsive" в topnav, когда пользователь нажимает на значок */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>
 
</body>
</html>

sidenav_buttons

anonymous@undisclosed.example.com (Anonymous) — Wed, 15 Apr 2026 09:20:38 +0000

CSS Боковые кнопки навигации

О Нас Блог Проект Контакт

Кнопки навигации при наведении

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

index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Стиль ссылки внутри sidenav */
#mySidenav a {
  position: absolute; /* Расположите их относительно окна браузера*/
  left: -90px; /* Расположите их за пределами экрана */
  transition: 0.3s; /* Добавить переход при наведении курсора */
  padding: 15px; /* 15px отступы */
  width: 100px; /* Установите определенную ширину */
  text-decoration: none; /* Удалить подчеркивание */
  font-size: 20px; /* Увеличить размер шрифта */
  color: white; /* Белый цвет текста */
  border-radius: 0 5px 5px 0; /* Закругленные углы на верхней правой и нижней правой стороне */
}
 
#mySidenav a:hover {
  left: 0; /* При наведении курсора мыши, сделать элементы отображаются так, как они должны */
}
 
/* Ссылка about: 20px сверху с зеленым фоном */
#about {
  top: 20px;
  background-color: #4CAF50;
}
 
#blog {
  top: 80px;
  background-color: #2196F3; /* Синий */
}
 
#projects {
  top: 140px;
  background-color: #f44336; /* Красный */
}
 
#contact {
  top: 200px;
  background-color: #555 /* Светло-Черный */
}
</style>
</head>
<body>
 
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" id="about">О Нас</a>
  <a href="javascript:void(0)" id="blog">Блог</a>
  <a href="javascript:void(0)" id="projects">Проект</a>
  <a href="javascript:void(0)" id="contact">Контакт</a>
</div>
 
<div style="margin-left:80px;">
  <h2>Кнопки навигации при наведении</h2>
  <p>Наведите указатель мыши на кнопки в левой части навигации, чтобы открыть их.</p>
</div>
 
</body>
</html>

sidenav_icons

anonymous@undisclosed.example.com (Anonymous) — Wed, 15 Apr 2026 13:02:01 +0000

CSS Боковая панель с иконками

index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Загрузить библиотеку иконок -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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>