이미지없는 네비게이션 메뉴를 적용해봤습니다.

demun
퍼블리셔/css
2011. 12. 2. 06:00

이전에 이미지없는 네비게이션 메뉴에 대한 글을 언급한 적이 있습니다.
CSS3로 멋지게 코딩을 해서 로딩속도 또한 빠르고, 비주얼적인면에서도 상당이 퀄리티가 있어서 소개를 했었습니다.

이동버튼에 관한 글

보시면 아시겠지만 상당이 퀄리티가 있습니다. 이것을 티스토리에는 어떻게 적용을 할까요??
적용을 하기전 먼저 생각해봐야 할것이 있습니다.
CSS3로 코딩을 했기에 이전 브라우져에서는 안보여진다는 점이죠.
멋진 IE6,7을 이야기 하는겁니다.^^;

또 한가지 염두해두어야 할점은 티스토리의 카테고리 치환자를 사용할지의 여부입니다.
즉 네비게이션에 티스토리 치환자를 사용할경우 사이드바나 다른곳에서는 사용할 수 없다는 점이죠.

크로스 브라우징이나, 본문에 한번밖에 사용하지 못하는 카테고리 치환자 때문에 네비게이션에는 치환자를 사용하지 않았습니다.
그리고 카테고리 치환자를 사용할경우는 자바스크립트가 포함되어야 합니다.
네비게이션 메뉴에는 그냥 html 로 마크업하고 사이드바에서 카테고리 치환자를 이용하는 방식을 선택했습니다.

그리고 접근성을 생각해서 li 의 제일 윗부분에는 가장 중요하다고 생각되는 메뉴를 먼저 배치해서, IE6,7에서도 하위메뉴가 안보여도 접근하는데는 무리가 없도록 하도록 했습니다.

물론 표준 브라우져나 IE8이상은 하위메뉴에 접근이 가능합니다.
우선 HTML 코드는 대략 아래와 같습니다.
생략한 부분은 .... 으로 했고 블로그주소를 blog_link 치환자로 처리하여 누구나 사용할 수 있습니다. 뒷부분의 카테고리부분만 본인의 것으로 수정하면 됩니다.

클릭해서 보세요.

HTML Code

<ul id="menu">
    <li class="tab_bloghome"><a href="[#\#_blog_link_##]">HOME</a></li>
    <li class="tab_notice"><a href="[#\#_blog_link_##]notice">NOTICE</a>
        <ul>
            <li class="tab_notice"><a href="[#\#_blog_link_##]notice/?page=1">질문하는 법</a>
            <li class="tab_notice"><a href="[#\#_blog_link_##]notice/?page=2">배포 공지사항</a></li>
            <li class="tab_notice"><a href="[#\#_blog_link_##]notice/?page=3">메뉴 사용법</a></li>
            <li class="tab_notice"><a href="[#\#_blog_link_##]notice/?page=4">대문 블로그 소개</a></li>
        </ul>
    </li>
    <li class="tab_guestbook"><a href="[#\#_guestbook_link_##]">GUESTBOOK</a>
        <ul>
            <li class="tab_localog"><a href="[#\#_localog_link_##]">LOCATION LOG</a></li>
            <li class="tab_taglog"><a href="[#\#_taglog_link_##]">TAG LOG</a></li>
            <li class="tab_media"><a href="[#\#_blog_link_##]media">MEDIA LOG</a></li>
        </ul>
    </li>
    <li class="t_category"><a href="[#\#_blog_link_##]category">CATEGPRY</a>
    ....................
    </li>

    <li class="t_menu_admin"><a href="[#\#_owner_url_##]">ADMIN</a>
        <ul>
            <li class="t_menu_write last"><a href="[#\#_owner_url_##]/entry/post">WRITE</a></li>
            <li class="t_menu_write last"><a href="[#\#_owner_url_##]/skin/edit/">SKIN</a></li>
        </ul>
    </li>
</ul>

그다음 css 편집에서 스타일 맨 아래에 아래의 코드를 추가해주면 됩니다.

코드가 길어 더보기를 사용합니다. 클릭해서 보세요.

CSS Code

#menu, #menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu {
	position:absolute;
	top:-20px;
	width: 600px;
	margin: 60px auto;
	border: 1px solid #222;
	background-color: #111;
	background-image: -moz-linear-gradient(#444, #111); 
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));	
	background-image: -webkit-linear-gradient(#444, #111);	
	background-image: -o-linear-gradient(#444, #111);
	background-image: -ms-linear-gradient(#444, #111);
	background-image: linear-gradient(#444, #111);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#menu:before,
#menu:after {
	content: "";
	display: table;
}
#menu:after {
	clear: both;
}
#menu {
	zoom:1;
}
#menu li {
	float: left;
	border-right: 1px solid #222;
	-moz-box-shadow: 1px 0 0 #444;
	-webkit-box-shadow: 1px 0 0 #444;
	box-shadow: 1px 0 0 #444;
	position: relative;
}
#menu a {
	float: left;
	padding: 12px 30px;
	color: #999;
	text-transform: uppercase;
	font: bold 12px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
	color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
	color: #fafafa;
}
#menu ul {
	margin: 20px 0 0 0;
	_margin: 0; /*IE6 only*/
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 38px;
	left: 0;
	z-index: 9999;
	background: #444;
	background: -moz-linear-gradient(#444, #111);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
	background: -webkit-linear-gradient(#444, #111);
	background: -o-linear-gradient(#444, #111);	
	background: -ms-linear-gradient(#444, #111);	
	background: linear-gradient(#444, #111);
	-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
	-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
	box-shadow: 0 -1px 0 rgba(255,255,255,.3);	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;  
}
#menu li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin: 0;
}
#menu ul ul {
	top: 0;
	left: 150px;
	margin: 0 0 0 20px;
	_margin: 0; /*IE6 only*/
	-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
	-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
	box-shadow: -1px 0 0 rgba(255,255,255,.3);		
}
#menu ul li {
	float: none;
	display: block;
	border: 0;
	_line-height: 0; /*IE6 only*/
	-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {   
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;    
}
#menu ul a {    
	padding: 10px;
	width: 130px;
	_height: 10px; /*IE6 only*/
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
}
#menu ul a:hover {
	background-color: #0186ba;
	background-image: -moz-linear-gradient(#04acec,  #0186ba);	
	background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background-image: -webkit-linear-gradient(#04acec, #0186ba);
	background-image: -o-linear-gradient(#04acec, #0186ba);
	background-image: -ms-linear-gradient(#04acec, #0186ba);
	background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
	-moz-border-radius: 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
	content: '';
	position: absolute;
	left: 40px;
	top: -6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
	left: -6px;
	top: 50%;
	margin-top: -6px;
	border-left: 0;	
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
	border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
	border-bottom-color: #04acec; 
}
#menu ul ul li:first-child a:hover:after {
	border-right-color: #0299d3; 
	border-bottom-color: transparent; 	
}
#menu ul li:last-child > a {
	-moz-border-radius: 0 0 3px 3px;
	-webkit-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
}

CSS3 로 코딩된 제 블로그의 메뉴가 어떻게 보이는지 캡쳐했는데 보여줄려고 업로드했는데 인코딩하는데 시간이 엄청 걸리는군요...포기했습니다.ㅎㅎ

개 개

demun(대문블로그)

이미지없는 네비게이션 메뉴를 적용해봤습니다.

티스토리툴바