첨부파일 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 5 / 11 pages
번호 제목 제목 날짜날짜
공지 이온디에서 제작 배포 중인 레이아웃 2013/03/13
현재글 [레이아웃제작기] [해피타운] 현재위치출력 및 셀렉트태그 바로가기 기능#2 파일 2018/08/10
103 [레이아웃제작기] [해피타운] 현재위치출력 및 셀렉트태그 바로가기 기능 파일 2018/08/10
102 [카페24제작기] 카페24 스킨에 서브메뉴 추가하기 파일 2018/08/10
101 [레이아웃제작기] 해피타운 현재위치 출력 소스 파일 2018/08/09
100 [레이아웃제작기] 해피타운 파일 2018/08/05
99 [기획제작기] 커뮤니티형 레이아웃 2016/06/14
98 [기획제작기] 영남실버케어 참조 사이트 2016/02/29
97 [기획제작기] 걸그룹 레이아웃 참조사이트 2016/02/27
96 [기획제작기] 이온디 모바일 레이아웃 참조 사이트 2016/02/27
95 [기획제작기] 지역기반 사이트 참조 레이아웃 2016/02/26
94 [기획제작기] 복지 관련 사이트 참조 사이트 2016/02/25
93 [기획제작기] 이온디 마켓 참조 사이트 2016/02/24
92 [위젯 스킨] 이온디 온 Content 위젯 기본 스킨 2016/02/13
91 [XE기타] 갤러리 위젯 2015/09/26
90 [XE기타] 텀블러 위젯 2015/09/24

해시태그 디렉터리