'Menu'에 해당되는 글 1건
홈페이지에 있어서 메뉴는 과거에서 현재까지 레이아웃을 구성하는데 있어서 가장 기본적으로 생각해야 할 사항입니다.
요즘 웹표준 추세에 맞추어서 CSS의 중요성이 자리잡아가면서 기존에 단순 텍스트로는 안이쁜 메뉴들을 이미지로 만들어서 사용하는 것을 벗어나 메뉴들이 텍스트(Text)를 사용하되 CSS를 입혀서 이쁜 메뉴를 만들 수 있게 되었습니다.
간단하게 CSS의 기본기능만 가지고 메뉴를 만들 수 있지만, 약간의 이미지로 예쁜 메뉴를 만들 수 있습니다.
간단히 소개하는 CSS Tab Designer (Freeware) 는 CSS로 만들 수 있는 메뉴들의 표본(샘플)을 제공합니다.
위와 같이 CSS를 사용하여 이미지로 만든 메뉴가 부럽지 않게 이쁜 메뉴들을 만들어 낼 수 있습니다.
기본적으로 CSS메뉴는 UL(OL), LI 태그를 사용하여 메뉴를 구성하게 됩니다.
이 때, 텍스트로 만들어진 메뉴이기에 강조(Highlight)의 의미를 두기 위해 현재 메뉴에다가는 특별한 처리 - Bold, Coloring, Boxing, etc -를 해주게 됩니다.
이 때 이 특별한 처리를 쉽게 도와주는 것은 CSS의 Class Selector의 사용입니다.
하나의 예제를 보겠습니다.
▶ 예제 실행
위의 예제에서는 active라는 Class Selector 를 하나 사용함으로서 현재 위치를 알려주고 있습니다.
강조(Highlight)는 어려운 것이 아니었습니다.
#navPyra {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
#navPyra li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#navPyra a:link, #navPyra a:visited {
float: left;
font-size: 10px;
font-family:verdana,helvetica,sans-serif;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}
#navPyra a:link.active, #navPyra a:visited.active, #navPyra a:hover {
color: #000;
background: url(./pyramid.gif) no-repeat bottom center;
}
<ul id="navPyra">
<li><a id="nav_HOME" class="active" href="cssmenu1.asp">HOME</a></li>
<li><a id="nav_Myinfo" href="cssmenu1.asp?mode=myinfo">Myinfo</a></li>
<li><a id="nav_Member" href="cssmenu1.asp?mode=listmember">Member</a></li>
<li><a id="nav_FreeBoard" href="cssmenu1.asp?bid=free">FreeBoard</a></li>
<li><a id="nav_Logout" href="cssmenu1.asp?mode=logout" >Log out!</a></li>
</ul>
오래전에 메뉴의 강조 문제로 서버측 스크립트를 통해서 해결한 경험이 생각납니다.
asp나 php를 통해서 GET으로 받은 변수에 따라 각각 해당 메뉴에다 출력해주는 방식은 불편하기 짝이 없지요.
새 메뉴가 생기면 또 그에 따른 변수를 하나 만들고, 그 변수명에 따라 바뀌는 IF문을 또 넣어줘야 하니까요.
하지만 이제는 그럴 필요가 없어요. 서버측 스크립트를 사용할 필요가 없어졌거든요. DOM의 활성화와 함께 많은 서버측 할 일을 클라이언트가 할 수 있게 되었거든요.
현재 위치를 알려주는 Class Selector는 DOM을 이용하여 Javascript를 통해서 해당 탭메뉴를 클릭한 후, 클릭한 메뉴를 active시켜주는 스크립트를 짜보겠습니다.
* 여기서 DOM이란?
DOM 이란 제목에서도 보다시피 Document(문서) 내의 Tag들을 어떻게 Object(물체화) 하는가에 대한 W3C 의 표준 Model 이라 할 수 있겠습니다.
DOM 이란 제목에서도 보다시피 Document(문서) 내의 Tag들을 어떻게 Object(물체화) 하는가에 대한 W3C 의 표준 Model 이라 할 수 있겠습니다.
▶ 예제 실행
위의 예제에서는 active라는 Class Selector 를 Javascript를 이용하여 페이지가 변경될때마다 active Class Selector를 Anchor태그에 각각 적용하는 코드입니다.
// 현재 페이지 이름과 Anchor태그에 href 속성의 값이 일치할 때, Anchor 태그에 active Class Selector를 적용합니다.
function findLocation()
{
// HomeUrl 변수에 자신의 도메인 혹은 IP를 적습니다. ex) http://test.ssemi.net
// 서버측 스크립트를 이용하여 자동으로 만들 수 있습니다. <%= HTTP_HOST() %> - 아래에 별도 표기
var HomeUrl = 'http://test.ssemi.net';
var sUrl = document.location.href.replace(new RegExp(HomeUrl,'gi'),'').toString().toLowerCase();
if (document.getElementById('navPyra'))
{
var menu = document.getElementById('navPyra').getElementsByTagName("A");
var s;
for (i = 0 ; i < menu.length; i++)
{
s = menu[i].href.replace(new RegExp(HomeUrl,'gi'),'').toString().toLowerCase();
if (s.length > 2)
{
if (sUrl.indexOf(s) == 0) menu[i].className = "active";
}
}
}
}
<body onload="findLocation()">
<ul id="navPyra">
<li><a id="nav_HOME" class="active" href="cssmenu1.asp">HOME</a></li>
<li><a id="nav_Myinfo" href="cssmenu1.asp?mode=myinfo">Myinfo</a></li>
<li><a id="nav_Member" href="cssmenu1.asp?mode=listmember">Member</a></li>
<li><a id="nav_FreeBoard" href="cssmenu1.asp?bid=free">FreeBoard</a></li>
<li><a id="nav_Logout" href="cssmenu1.asp?mode=logout" >Log out!</a></li>
</ul>
</body>
Function HTTP_HOST()
Dim tmp
tmp = "http://" & Request.ServerVariables("SERVER_NAME")
IF Request.ServerVariables("SERVER_PORT") <> "80" Then
tmp = tmp & ":" & Request.ServerVariables("SERVER_PORT")
End IF
HTTP_HOST = tmp
End Function
2가지의 예제를 통해서 배울 수 있는 항목은 CSS Class Selector 와 Javascript를 이용해서 각 링크에 동적인 메뉴선택 효과를 줄 수 있다는 점입니다.
설명이 미흡할 수 있으나, 예제파일에 대하여 직접 소스를 보시면 쉽게 이해하실 수 있습니다.
이미지 메뉴를 사용하는데 있어서 가장 많이 쓰이게 되는 효과는 바로 롤오버(Roll Over)입니다.
롤오버를 사용하기 위한 방법은 자바스크립트로 효과를 주었던 방법이 있는데, 이제는 CSS만으로도 가능합니다.
복잡한 자바스크립트 코드를 사용할 필요가 없으니 시간을 번 셈이죠.
▶ 예제 실행
위의 예제에서는 CSS만으로도 이미지 롤오버(Rollover)가 되는 것을 보여주고 있습니다.
/* CSS만으로 가능합니다 */
A.rollover img { border-width:0px; display:inline; }
A.rollover img.over { display:none; }
A.rollover:hover { border:0px }
A.rollover:hover img { display:none; }
A.rollover:hover img.over { display:inline; }
CSS Rollover에 대하여 좀 더 다양한 정보를 얻고 싶으시다면 http://pmob.co.uk/을 방문해주세요
2006. 8. 15. 09:40
Recent comment