라바램프(Lavalamp) 메인메뉴 만들기

demun
퍼블리셔/jQuery
2012. 1. 24. 06:00

라바램프 메인메뉴는 jQuery 를 이용하는 아주 인기 있는 메인메뉴입니다.
제가 지금 현재 적용해봤는데요. 이전에 XE 로 레이아웃 스킨을 만들때 적용해봤었습니다. 이번에는 티스토리에 적용을 해봤습니다.
이걸 알려드리겠습니다.

LavaLamp => http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

이걸 좀더 업그레이드 시키고 사용하기 편하게 소개한 글이 있습니다.
아래의 사이트가 가시면 데모와 다운로드를 받을수 있습니다.
Lava Lamp 스타일을 만드는 방법 => http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-lava-lamp-style-navigation-menu/

이걸 티스토리에 적용해보겠습니다.
먼저 자바스크립트 파일을 스킨 편집에서 업로드 합니다.

jquery.spasticNav.js

다음은 html 에서 아래의 코드를 </body> 위에 적어둡니다. 치환자가 있으면 치환자 위에 적어야 합니다.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="./images/jquery.spasticNav.js"></script>
</s_t3>
</body>

다음은 티스토리의 메인메뉴 치환자가 있는 부분을 아래처럼 변경해야 합니다.

예를들어 제가 변경한 마크업을 보여드릴테니 참고하시기 바랍니다.

변경전 메인메뉴 마크업.


<div id="nav">[#\#_blog_menu_##]</div>

변경후 메인메뉴 마크업.


<ul id="nav">
	<li id="selected"><a href="[#\#_blog_link_##]">홈</a></li>
	<li><a href="[#\#_blog_link_##]notice">공지사항</a></li>
	<li><a href="[#\#_localog_link_##]">지역로그</a></li>
	<li><a href="[#\#_taglog_link_##]">태그로그</a></li>
	<li><a href="[#\#_blog_link_##]media">미디어로그</a></li> 
	<li><a href="[#\#_guestbook_link_##]">방명록</a></li>
</ul>

이부분에서 li id="selected" 라고 나오는데요. 이것은 아래처럼 맨처음 위치하는곳을 표시하기 위함입니다.

html 수정은 끝입니다. 다음은 스타일을 적당이 꾸며줍니다.


/* Lava Lamp Menu 
------------------------------------------------------ */
#blob { 
	position: absolute;
	border-right: 1px solid #FFA200;
	border-left: 1px solid #FFA200;
	z-index: 1;
	top: 0;
	background: #6B3E00; /* Old browsers */
	background: -moz-linear-gradient(top,  #fc9b00 0%, #6B3E00 10%, #844D00 90%, #fc9b00 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fc9b00), color-stop(10%,#6B3E00), color-stop(90%,#844D00), color-stop(100%,#fc9b00)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fc9b00 0%,#6B3E00 10%,#844D00 90%,#fc9b00 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fc9b00 0%,#6B3E00 10%,#844D00 90%,#fc9b00 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fc9b00 0%,#6B3E00 10%,#844D00 90%,#fc9b00 100%); /* IE10+ */
	background: linear-gradient(top,  #fc9b00 0%,#6B3E00 10%,#844D00 90%,#fc9b00 100%); /* W3C */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-box-shadow: 2px 3px 10px #3B2700;
	-webkit-box-shadow: 2px 3px 10px #3B2700;
}
#nav {
	position: relative;
	float: left;
	width:100%;
}
#nav li {
	float: left;
	list-style: none;
	border-right: 1px solid #4a4a4a;
	border-left: 1px solid black;
}
#nav li a {
	color: #e3e3e3;
	z-index: 2;
	position: relative;
	cursor: pointer;
	float: left;
	font-size: 1em;
	text-decoration: none;
	padding: 13px 30px;
	font-family:NanumGothic,"나눔고딕",NanumGothicWeb,helvetica, arial, sans-serif;
}

이걸로 모든 수정은 끝입니다.

적용해보시고 적당이 수정할것은 수정하면 됩니다.

이 방법은 IE6에서도 레이아웃이 깨지지 않고 그라데이션은 안되지만 사용하는데는 무리가 없는것이 장점입니다.
웹표준을 준수하는 기타 브라우져에서는 그라데이션 등 모든것이 지원이 되기 때문에 더 멋진 효과를 보여줍니다.

IE 의 하위 브라우져와 크롬에서 어떻게 보여지는지 동영상을 확인해 보시기 바랍니다.

개 개

demun(대문블로그)

라바램프(Lavalamp) 메인메뉴 만들기

티스토리툴바