TAB 메뉴 반응형 CSS

TAB 메뉴 반응형 CSS

---

아래는 반응형일때 탭메뉴가 셀렉트박스로 전환

<script type="text/javascript" src="/js/jquery.TabMenuSelectTransform-0.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.wolfharu_tabmenu_select_transform').TabMenuSelectTransform();
});
</script>

 

.tabWrap {max-width:930px;	padding:0px 30px;}
.wolfharu_tabmenu_menu { }
.wolfharu_tabmenu_menu:before, .wolfharu_tabmenu_menu:after { content:""; display:table; }
.wolfharu_tabmenu_menu:after {clear:both;}
* html .wolfharu_tabmenu_menu {zoom:1;}
.wolfharu_tabmenu_menu {zoom:1;}
.wolfharu_tabmenu_menu select {
	width:100%; padding:8px 45px 8px 16px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; margin-bottom:15px;
	color:#777;
	border:1px solid #cecece;
	-webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;
	-webkit-appearance:none; -moz-appearance:none; appearance:normal;
	-webkit-tab-highright-color:transparent;
	background:url(<?php echo G5_THEME_URL ?>/img/mo_icon_tabmenu01.gif) no-repeat right center, #eeeeee;
	background:url(<?php echo G5_THEME_URL ?>/img/mo_icon_tabmenu01.gif) no-repeat right center, -moz-linear-gradient(top,  #eeeeee 0%, #f9f9f9 10%, #ffffff 20%, #ffffff 100%);
	background:url(<?php echo G5_THEME_URL ?>/img/mo_icon_tabmenu01.gif) no-repeat right center, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(10%,#f9f9f9), color-stop(20%,#ffffff), color-stop(100%,#ffffff));
	background:url(<?php echo G5_THEME_URL ?>/img/mo_icon_tabmenu01.gif) no-repeat right center, -webkit-linear-gradient(top,  #eeeeee 0%,#f9f9f9 10%,#ffffff 20%,#ffffff 100%);
	background:url(<?php echo G5_THEME_URL ?>/img/mo_icon_tabmenu01.gif) no-repeat right center, -o-linear-gradient(top,  #eeeeee 0%,#f9f9f9 10%,#ffffff 20%,#ffffff 100%);
	background:url(<?php echo G5_THEME_URL ?>/img/mo_icon_tabmenu01.gif) no-repeat right center, -ms-linear-gradient(top,  #eeeeee 0%,#f9f9f9 10%,#ffffff 20%,#ffffff 100%);
	background:url(<?php echo G5_THEME_URL ?>/img/mo_icon_tabmenu01.gif) no-repeat right center, linear-gradient(top,  #eeeeee 0%,#f9f9f9 10%,#ffffff 20%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
}
.wolfharu_tabmenu_menu select { display:none; }
.wolfharu_tabmenu_menu ul {  
    margin: 0;
    padding: 0 0 0 0px;
    list-style: none;
    -webkit-padding-start: 0px;
}
.wolfharu_tabmenu_menu ul li {
	float:left; position:relative; margin:0 -1px -1px 0;
}
.wolfharu_tabmenu_menu ul li a {
	margin-top:4px; 
	padding:8px 16px 8px 16px;
	border:1px solid #cecece;
	-webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px;
	-moz-border-radius-topleft:6px; -moz-border-radius-topright:6px;
	border-top-left-radius:6px; border-top-right-radius:6px;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* IE10+ */
	background: linear-gradient(top,  #ffffff 0%,#f2f2f2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
	display:inline-block;
}
.wolfharu_tabmenu_menu ul li a { color:#777; text-decoration:none; }
	
.wolfharu_tabmenu_menu ul li a.current {
	margin-top:0; padding-top:10px; padding-bottom:10px; border-bottom:0 none;
	border-top:2px solid #2e9cdf;
	background: #f2f2f2; /* Old browsers */
	background: -moz-linear-gradient(top,  #f2f2f2 1%, #ffffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f2f2f2), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f2f2f2 1%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f2f2f2 1%,#ffffff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f2f2f2 1%,#ffffff 100%); /* IE10+ */
	background: linear-gradient(top,  #f2f2f2 1%,#ffffff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.wolfharu_tabmenu_menu ul li a.current { font-weight:bold; color:#0084b4; text-shadow:1px 1px 2px rgba(0,132,080,0.1);  }
	
.wolfharu_tabmenu_menu ul li a span { }

.wolfharu_tabmenu_content {
	width:100%;
	padding:30px 0px 15px 0px;
	border-top:1px solid #cecece;
	-webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px;
	-moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:6px;
	border-bottom-left-radius:6px; border-bottom-right-radius:6px;
}

.wolfharu_tabmenu_content h2 { font-weight:bold; }

@media all and (max-width:760px){
	html, body { font-size:0.95em; -webkit-text-size-adjust: none; }
	.wrap { width:auto; margin:0 10px; }
	.wolfharu_tabmenu_menu ul { display:none; }
	.wolfharu_tabmenu_menu select { font-size:1em; display:block; }
	.wolfharu_tabmenu_content { -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; }
}


.hr-sect {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	color: #000;
	font-size: 16px;
	font-weight:500;
	margin: 30px 0px;
}
.hr-sect span{
	color: #216684;
	font-size: 16px;
}
.hr-sect::before,
.hr-sect::after {
	content: "";
	flex-grow: 1;
	background: #bbb;
	height: 1px;
	font-size: 0px;
	line-height: 0px;
	margin: 0px 0px;
}

 

<div class="tabWrap">
	<div class="wolfharu_tabmenu_select_transform">
		<div class="wolfharu_tabmenu_menu">
			<ul>
				<li><a href="#wolfharu_tabmenu_content_item_1"><span>한방송과 파트너</span></a></li>
				<li><a href="#wolfharu_tabmenu_content_item_2"><span>방송강좌 업로드 안내</span></a></li>
				<li><a href="#wolfharu_tabmenu_content_item_3"><span>한-Tube 업로드 안내</span></a></li>
			</ul>
		</div>
		<div class="wolfharu_tabmenu_content">
			<div class="wolfharu_tabmenu_content_item" id="wolfharu_tabmenu_content_item_1">
				<div class="sub_img">
					<img src="<?php echo g5_theme_url ?>/images/han_01.png">
				</div>
				<div class="hr-sect">
					&nbsp;강사가 <span>&nbsp;한방송과 파트너&nbsp;</span> 되면서 얻는 장점&nbsp;
				</div>
			</div>
			<div class="wolfharu_tabmenu_content_item" id="wolfharu_tabmenu_content_item_2">
				<h2>내용2</h2>
				<br/><br/>
			</div>
			<div class="wolfharu_tabmenu_content_item" id="wolfharu_tabmenu_content_item_3">
				<h2>내용3</h2>
				<br/><br/>
			</div>
		</div>
	</div>
</div>

 

TabMenuSelectTransform.zip

0.04MB