첨부파일 https://eond.com/blog/406112

이전 글에서 select > option 태그로 이루어진 걸 div로 바꾸는 작업입니다. 

셀렉트 커스텀 작업은 스타일을 입히기 위해서 HTML+JS+CSS 다 짜야하는게 귀찮은 일이긴 합니다. 


기본적인 코드는 다음 링크에서 확인할 수 있습니다.

https://codepen.io/eond/pen/GBPQOb


PREVIEW

http://happytown57.cafe24.com/info02


HTML

<select name="" id="" onchange="if(this.value) location.href=(this.value);">
   <option value="{$val1['href']}" loop="$val['list']=>$key1,$val1" cond="$val1['link']" <!--@if($val1['selected'])-->selected<!--@end-->>
   {$val1['link']}
   </option>
</select>

CSS

.select-hidden {
   display: none;
   visibility: hidden;
   padding-right: 10px;
}

.select {
   cursor: pointer;
   display: inline-block;
   position: relative;
   font-size: 14px;
   color: #000;
   width: 180px;
   height: 55px;
}

.select-styled {
   text-align:left;
   text-indent:30px;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #fff;
   /*padding: 8px 15px;*/
   line-height:55px;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -webkit-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
}
.select-styled:after {
   content: "";
   width: 0;
   height: 0;
   border: 5px solid transparent;
   border-color: #000 transparent transparent transparent;
   position: absolute;
   top: 26px;
   right: 10px;
}
.select-styled:hover {
   background-color: #fff;
}
.select-styled:active, .select-styled.active {
   background-color: #fff;
}
.select-styled:active:after, .select-styled.active:after {
   top: 9px;
   border-color: transparent transparent #fff transparent;
}

.select-options {
   display: none;
   position: absolute;
   top: 100%;
   right: 0px;
   left: -3px;
   z-index: 999;
   margin: 0;
   padding: 0;
   list-style: none;
   background-color: #fff;
   border-bottom:1px solid #d9d9d9;
}
.select-options li {
   margin: 0;
   padding: 12px 0;
   text-indent: 30px;
   text-align:left !important;
   border-top: 1px solid #d9d9d9;
   border-left: 1px solid #d9d9d9;
   -moz-transition: all 0.15s ease-in;
   -o-transition: all 0.15s ease-in;
   -webkit-transition: all 0.15s ease-in;
   transition: all 0.15s ease-in;
   display:block !important;
   width:184px;
}
.select-options li:hover {
   color: #000;
   background: #fff;
}
.select-options li[rel="hide"] {
   display: none;
}

JS

(function($) {
   "user strict";
   $('select').each(function(){
      var $this = $(this), numberOfOptions = $(this).children('option').length;

      $this.addClass('select-hidden');
      $this.wrap('<div class="select"></div>');
      $this.after('<div class="select-styled"></div>');

      var $styledSelect = $this.next('div.select-styled');
      $styledSelect.text($this.children('option:selected').eq(0).text());

      var $list = $('<ul />', {
         'class': 'select-options'
      }).insertAfter($styledSelect);

      for (var i = 0; i < numberOfOptions; i++) {
         $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
         }).appendTo($list);
      }

      var $listItems = $list.children('li');

      $styledSelect.click(function(e) {
         e.stopPropagation();
         $('div.select-styled.active').not(this).each(function(){
            $(this).removeClass('active').next('ul.select-options').hide();
         });
         $(this).toggleClass('active').next('ul.select-options').toggle();
      });

      $listItems.click(function(e) {
         e.stopPropagation();
         $styledSelect.text($(this).text()).removeClass('active');
         $this.val($(this).attr('rel'));
         $list.hide();


            var url = $(this).attr('rel'); // get selected value
            if (url) { // require a URL
               window.location = url; // redirect
            }
            return false;

         //console.log($this.val());
      });

      $(document).click(function() {
         $styledSelect.removeClass('active');
         $list.hide();
      });

   });
})(jQuery);




코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 164 articles in 4 / 11 pages
번호 제목 제목 날짜날짜
공지 이온디에서 제작 배포 중인 레이아웃 2013/03/13
119 [모듈스킨작업기] 마켓플레이스 모듈 스크랩수 출력하기 파일 2018/08/24
118 [운영] 법인 범용공인인증서 발급 파일 2018/08/22
117 [SEO] 사이트의 다국어 버전 관리 파일 2018/08/22
116 [애드온작업기] XE 흑백전환 애드온 #1 2018/08/21
115 [모듈스킨작업기] 부동산모듈스킨제작기 2018/08/18
114 [기획제작기] 이로운라이프 기획서#1 파일 2018/08/18
113 [운영] 비밀글 회사를 운영하려면 최소 몇명의 인원이 필요할까? 2018/08/17
112 [서버] 비밀글 dmi \서버 세팅 변경 2018/08/15
111 [SEO] 비밀글 리치카드 작업하기 2018/08/14
110 [도메인] blog.eond.com 추가 파일 2018/08/14
109 [SEO] 비밀글 XE 검색사이트에 등록하기 2018/08/13
108 [XE기타] XE관리자 커스텀 CSS #2 파일 2018/08/13
107 [XE기타] XE관리자 커스텀 CSS 파일 2018/08/13
106 [명함제작기] 이온디 명함 파일 2018/08/11
105 [로고디자인] 이온디 로고 디자인 파일 2018/08/11

해시태그 디렉터리