CSS Tab Menu example

스타일시트와 모서리 이미지, 자바스크립트를 이용하여 작성해본 Tab Menu 예

사용된 모서리 이미지들

<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Tab Menu example</title>
<style type="text/css">

#navigation a
{
color: #000;
background: #ffa20c url(left_tab.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a span
{
background: url(right_tab.gif) right top no-repeat;
padding-right: 10px
}

#navigation a, #navigation a span
{
display: block;
float: left
}

/*
#navigation a:hover
{
color: #fff;
background: #781351 url(left_tab_hover.gif) left top no-repeat;
padding-left: 10px
}

#navigation a:hover span
{
background: url(right_tab_hover.gif) right top no-repeat;
padding-right: 10px
}
*/

#navigation li
{
list-style: none;
padding: 0;
margin: 0
float: left;
}
#submenu {height:1em; background:#781351; clear:left}

a.sub:link{
text-decoration: none;
color:yellow;
}
a.sub:hover{
text-decoration: none;
color:yellow;
}
a.sub:active{
text-decoration: none;
color:white;
}
a.sub:visited{
text-decoration: none;
color:yellow;
}
</style>

var prevMenu = null;
var prevSpan = null;

function onMenu(menu, span){
if(prevMenu!=null){
outMenu(prevMenu, prevSpan);//마우스가 내려간 메뉴는 원래상태로 복귀
}
/*새로 마우스가 올라간 메뉴는 다음과 같은 속성을 갖도록 한다, 왼쪽 이미지 대치 */
document.getElementById(menu).style.background="#781351 url(left_tab_hover.gif) left top no-repeat";
document.getElementById(menu).style.paddingLeft="10px";
document.getElementById(menu).style.color="#fff";

/*오른쪽 이미지 대치 */
document.getElementById(span).style.background="url(right_tab_hover.gif) right top no-repeat";
document.getElementById(span).style.paddingRight="10px";

prevMenu = menu;
prevSpan = span;

/* 하위 메뉴를 출력한다 */
if(menu=="menu_home"){
var home_link = "<a class='sub' href='http://naver.com'>네이버</a> | <a class='sub' href='http://google.com'>Google</a>";
document.getElementById("submenu").innerHTML = home_link;
}else if(menu=="menu_services"){
var services_link = "<a class='sub' href='http://yahoo.com'>Yahoo</a> | <a class='sub' href='http://paran.com'>Paran</a>";
document.getElementById("submenu").innerHTML = services_link;
}
}

function outMenu(prevMenu, prevSpan){
/*배경색과 왼쪽 모서리 이미지를 원래의 것으로 대치 */
document.getElementById(prevMenu).style.color = "#000";
document.getElementById(prevMenu).style.background = "#ffa20c url(left_tab.gif) left top no-repeat";
document.getElementById(prevMenu).style.textDecoration = "none";
document.getElementById(prevMenu).style.paddingLeft = "10px";

/*오른쪽 모서리 이미지를 원래의 것으로 대치 10px*/
document.getElementById(prevSpan).style.background = "url(right_tab.gif) right top no-repeat";
document.getElementById(prevSpan).style.paddingRight = "10px";
}
</script>
</head>
<body>
<ul id="navigation">
<li><a id="menu_home" href="#" onMouseOver="javascript:onMenu('menu_home', 'span_home');"><span id="span_home">Home</span></a></li>
<li><a id="menu_services" href="#" onMouseOver="javascript:onMenu('menu_services', 'span_services');"><span id="span_services">Services</span></a></li>
<li><a href="#"><span>Take a tour</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul><br/>
<div id="submenu"></div>
</body>
</html>

Programming

CSS Tab Menu example

티스토리툴바