/** HTML5/CSS3, EDGE/CHROME                              *** MenuLeader.css ***

 ******************************************************************************
 * ittve.me             Стилизовать панель меню управления в подвале страницы *
 ******************************************************************************

                                                     Автор:       Труфанов В.Е.
                                                     Дата создания:  07.01.2019
 Copyright © 2019 tve                                Посл.изменение: 22.10.2022
**/

/**
 Исходные ориентиры:
 - меню состоит из "n" элементов, содержащих иконки шрифта (например, Awesome);
 - несколько элементов одинаковых размеров занимают полосу меню

 Определяем размеры панели конфигурационного меню, пунктов меню в "состоянии 
 ожидания" и позиций для значков, шрифты значков и пунктов меню,
 а также их цвета и размеры

 color: #ab4a16;  приятный коричневый цвет 
*/
.navset 
{
   height:100%;
}
.navset .link 
{
   width:25%;     /* "1/n" часть ширины полоски меню */
   height:100%;   /* всю высоту родителя .navset */
}
.navset .link .prev 
{
   font-family:fontawesome;
}
.navset .link .small 
{
   width:100%;    
   height:100%;   
   font-family:fontawesome;
}
.navset .link .full .k1, .navset .link .full .k2
{
   white-space:nowrap; 
}
/** 
  Определяем общее позиционирование панели конфигурационного меню
  
  Замечание: Обычно translateZ(0) прописывают для того, чтобы отрисовать 
  элементы в GPU еще до того, как анимация началась, чтобы анимация была 
  плавной, без дерганий. tranform не перерисовывает объект, он работают 
  напрямую с GPU памятью, которая использует аппаратное ускорение
 
  overflow: hidden - текст и значок пункта меню отображаем только внутри дива, 
  остальное скрываем
  
  transition: .5s width - разворачиваем пункт меню по ширине за пол-секунды
  (обычно transition устанавливает эффект перехода между двумя состояниями 
  элемента, которые могут быть определены с помощью псевдоклассов :hover 
  или :active)
**/
li, .navset 
{
   color:#aaa;    /* обычный серый цвет элементов панели меню */
   background:#fff;
   transform:translateZ(0);
   font-size:1.3rem;
   font-weight:600; 
}
.navset .link 
{
   position:relative;
   float:left;
   transition:.5s width;
   overflow:hidden;    /* закрыли текст вне пункта меню */
}
.navset .link 
{
   border-right:1px dashed #ddd;
}
.navset .link:last-child 
{
   border-right:0;
}
/**
  Позиционируем элементы внутри пункта меню
**/
.navset .link .prev, .navset .link .small, .navset .link .full
{
   position:absolute;
   top:0.2rem;
   left:0;
}
/**
  Определяем размеры пунктов меню при "наезде мышкой" (в том числе и пункта
  меню, который станет активным), а затем переопределяем размер и цвет 
  активного пункта меню
**/
.navset:hover .link 
{
   width:5%;
}
.navset .link:hover 
{
   width:80%;
}
.navset .link:active 
{
   color: #ab4a16;  /* Приятный коричневый цвет */ 
}
/** 
  Форматируем начальное состояние пунктов меню: для маленьких иконок, больших и
  текстов в полных изображениях пунктов
**/
.navset .link .prev 
{
   padding-top:0.4rem; 
   padding-left:0.2rem;
   transition:.5s opacity;
   opacity:0;     /* скрыли маленькие иконки в начальных условиях */
} 
.navset .link .small 
{
   padding-left:0;
   text-align:center; 
} 
.navset .link .small:hover 
{
   color: #ab4a16;  /* Приятный коричневый цвет */ 
} 
.navset .link .full 
{
   padding-top:0.2rem; 
   transition:.5s opacity;
   opacity:0;     /* скрыли тексты пунктов меню в начальных условиях */
} 
/** 
  Зажигаем маленькие иконки, гасим большие и тексты меню, 
  когда наезжаем на панель меню  
**/
.navset:hover .prev 
{
   opacity:1;
}
.navset:hover .small, .navset .link:hover .full 
{
   opacity:0;
}
/** 
  Гасим маленькую иконку, зажигаем большую и пункт меню, когда наезжаем на них  
**/
.navset .link:hover .prev 
{
   opacity:0;
}
.navset .link:hover .small, .navset .link:hover .full 
{
   opacity:1;
   text-align:left; 
}
/** 
  Показываем наезд на большую кнопку перед нажатием на неё
  изменением курсора и положения
**/
.navset .link:hover .small 
{
   padding-left:0.4rem;
   cursor:pointer;
}
/** 
  Отодвигаем тексты меню и открываем большую кнопку для того,
  чтобы можно было нажать на неё
**/
.navset .link:hover .full 
{
   margin-left:4.4rem;
   cursor:pointer;
}
/*
 *********************************************************** MenuLeader.css ***
*/