게시판 카테고리 활성화 표시 적용

맨위 코드는

마지막 업데이트순 last_update

조회순 readed_count

추천순 voted_count

비추천순 blamed_count

<div class="oboard-category-box">
		{@
			if($sort_index == 'regdate'): $_sort_text = $lang->date;
			elseif($sort_index == 'update_order'): $_sort_text = $lang->last_update;
			elseif($sort_index == 'readed_count'): $_sort_text = $lang->readed_count;
			elseif($sort_index == 'voted_count'): $_sort_text = $lang->voted_count;
			elseif($sort_index == 'blamed_count'): $_sort_text = $lang->blamed_count;
			else:
				foreach($list_config as $v):
					if($v->eid == $sort_index) $_sort_text = $v->name;
				endforeach;
			endif;
		}
		<ul class="oboard-category">
			<a class="oboard-category-menu-act" href="{getUrl('sort_index','','order_type','')}">
				<li>
					<div class="oboard-category-menu-box">
						<div class="oboard-category-name1<!--@if($sort_index)--> oboard-category-name2<!--@end-->">최신순</div>
						<div class="oboard-category-active-box<!--@if($sort_index)--> oboard-category-default-box<!--@end-->"></div>
					</div>
				</li>
			</a>

			<a class="oboard-category-menu-act" href="{getUrl('sort_index','readed_count','order_type',$order_type)}">
				<li>
					<div class="oboard-category-menu-box">
						<div class="oboard-category-name2<!--@if($sort_index)--> oboard-category-name3<!--@end-->">인기순</div>
						<div class="<!--@if($sort_index)-->oboard-category-active-box<!--@end-->"></div>
					</div>
				</li>
			</a>
			
			<!--@foreach($list_config as $key => $val)-->
			<li cond="$val->idx!=-1"><a href="{getUrl('sort_index', $val->eid, 'order_type', $order_type)}">{$val->name}</a></li>
			<!--@endforeach-->
		</ul>
	</div>

 

 

css

.oboard-category {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
  float: left;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
}
.oboard-category-box {
  position: relative;
  display: block;
  width: 100%;
}
.oboard-category-menu-box {
  display: flex;
  width: max-content;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: nowrap;
}
.oboard-category-menu-act {
  display: flex;
  justify-content: space-evenly;
  width: 50%;
  font-size: 14px;

  a {
    color: #333 !important;   
  }
}
.oboard-category-menu-act:hover {
  background-color: rgba(217, 217, 217, 0.6);
  cursor: pointer;
  text-decoration: none;
}
.oboard-category-menu-act-active {
  display: flex;
  justify-content: space-evenly;
  width: 50%;
  font-size: 14px;

  a {
    color: #242424;
  }
}
.oboard-category-menu-act-active:hover {
  background-color: rgba(217, 217, 217, 0.6);
  cursor: pointer;
  text-decoration: none;
}
.oboard-category-name1 {  
  height: 31px;
  padding: 15px 10px 0 10px;
  font-weight: 800;
}
.oboard-category-name2 {  
  height: 31px;
  padding: 15px 10px 0 10px;
  font-weight: 400;
}
.oboard-category-name3 {  
  height: 31px;
  padding: 15px 10px 0 10px;
  font-weight: 800;
}
.oborder-icon-line {
  width: 1px;
  color: #e0e0e0;
}
.oboard-category-default-box {
  background-color: transparent !important;
  height: 4px;
  border-radius: 15px;
}
.oboard-category-active-box {
  background: #171717;
  height: 4px;
  border-radius: 15px;
}