[Из песочницы] [Select-Form]: Пишем свой select-список, используя jQuery и CSS13.10.2016 12:03

    
 

       
      
      
      
Месяц
        
       

         
Январь
         
Февраль
         
Март
         
Апрель
         
Май
         
Июнь
         
Июль
         
Август
         
Сентябрь
         
Октябрь
         
Ноябрь
         
Декабрь
       
    
 
  

div#selectBox {
	width: 250px;
	position: relative;
	height: 50px;
	border-radius: 3px;
	border: solid 1px lightgrey;
	background-color: #fff;
	color: #333;
	cursor: pointer;
	overflow: hidden;
	transition: .3s;
}
div#selectBox p.valueTag {
	padding: 15px;
	cursor: pointer;
	transition: .2s;
	height: 40px;
}

div#selectBox > img.arrow {
	position: absolute;
	right: 0;
	width: 50px;

	padding: 15px;
}

/*
        для пользователей Safari, Chrome и Opera приятный бонус — стилизованный скролл-бар. 
*/
::-webkit-scrollbar {
	background: transparent;
	width: 0.5em;
	position: absolute;
}
::-webkit-scrollbar-track {
	background: transparent;
	position: absolute;
	z-index: -2;
}
::-webkit-scrollbar-thumb {
	border-radius: 100px;
	background: #888;
}

ul#selectMenuBox {
 background: #fff;
 transition: .3s;
 width: 100%;
 height: 200px;
 overflow-y: auto;
 overflow-x: hidden !important;
 position: absolute;
 margin-top: 00px;
 display: block;

}
ul#selectMenuBox > li {
	display: block;
	padding: 10px;
	border-radius: 00px;
	cursor: pointer;
}
ul#selectMenuBox > li.option {
	color: gray;
	padding: 10px;

}
ul#selectMenuBox > li.option:hover {
	color: #333;
	background: #e1e1e1;
	transition: .2s;
}

(function( $ ) {
  $.fn.selectbox = function() {
    
    // начальные параметры
    // задаем стандартную высоту div'a. 
    var selectDefaultHeight = $('#selectBox').height();
    // угол поворота изображения в div'e 
    var rotateDefault = "rotate(0deg)";
   
        // после нажатия кнопки срабатывает функция, в которой 
        // вычисляется исходная высота нашего div'a. 
        // очень удобно для сравнения с входящими параметрами (то, что задается в начале скрипта) 
        $('#selectBox > p.valueTag').click(function() {
          // вычисление высоты объекта методом height() 
          var currentHeight = $('#selectBox').height();
          // проверка условия на совпадение/не совпадение с заданной высотой вначале,
          // чтобы понять. что делать дальше. 
          if (currentHeight < 100 || currentHeight == selectDefaultHeight) {
              // если высота блока не менялась и равна высоте, заданной по умолчанию,
              // тогда мы открываем список и выбираем нужный элемент.
              $('#selectBox').height("250px");  // «точка остановки анимации»
              // здесь стилизуем нашу стрелку и делаем анимацию средствами CSS3 
              $('img.arrow').css({borderRadius: "1000px", transition: ".2s", transform: "rotate(180deg)"});
          }


         // иначе если список развернут (высота больше или равна 250 пикселям), 
         // то при нажатии на абзац с классом valueTag, сворачиваем наш список и
         // и присваиваем блоку первоначальную высоту + поворот стрелки в начальное положение
          if (currentHeight >= 250) {
            $('#selectBox').height(selectDefaultHeight);
            $('img.arrow').css({transform: rotateDefault});
          }
      });

     // так же сворачиваем список при выборе нужного элемента 
     // и меняем текст абзаца на текст элемента в списке
      $('li.option').click(function() {
        $('#selectBox').height(selectDefaultHeight);
       $('img.arrow').css({transform: rotateDefault});
        $('p.valueTag').text($(this).text());
      });
  };
})( jQuery );