프로그램/html,css2009. 7. 25. 17:52

CSS 네비게이션 메뉴 만들기(세로형)

[css-tip]CSS 네비게이션 메뉴 만들기(세로형)


3개의 메뉴로 구성되어 있는 세로형 메뉴를 만들어 보자.
메뉸는 아래처럼 보여지게 된다.




[nav.htm]

<html>
<head>
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>

<body>

<ul id="nav">
 <li><a href="http://okkks.tistory.com" target="_blank">여기는</a></li>
 <li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>
 <li><a href="http://okkks.tistory.com" target="_blank">입니다.</a></li>
</ul>

</body>
</html>

메뉴에 주로 사용하는 ul, li 태그의 조합으로 구성을 한다.



[nav.css]
#nav
{
 list-style-type:none;
}

#nav li
{
 background:url(images/page_btn_next.gif) no-repeat 0 50%;
 padding-left:25px;
}
 
#nav a
{
 font-weight:bold;
 font-size:12px;
 text-decoration:none;
 color:#7878E1;
}

#nav a.active, #nav a:hover
{
 color:#00008C;
}



#nav 설명
list-style-type:none; => 블릿을 없앤다.


#nav li 설명
background:url(이미지 지정) no-repeat 0 50%;
=> 블롯을 대체할 다른 이미지 지정
no-repeat => 배경 이미지를 한 번만 출력하고 반복하지 않게 지정
0 50% => 왼쪽에서 0, 위에서부터 50%에 이미지를 위치 시킨다.(즉, 세로 중간에 위치)

보다 쉬운 방법으로 list-style-image:url(이미지 지정); 속성을 사용해 기본 불릿 이미지를 다른 이미지로 지정할 수 있다.
예>
ul
{
 list-style-image:url(이미지 지정);
}
하지만, 각종 브라우저와 버전에 따라 기본 이미지 위치가 다르기 때문에 <li>엘리먼트 배경이미지로 같은 효과를 줬다.

 
#nav a 설명
font-weight:bold; => 굵은 글자
font-size:12px; => 글자 크기
text-decoration:none; => 글자의 꾸미기를 보통 모양으로 지정.(밑줄을 없앤다.)
color:#7878E1; => 글자 색상


#nav a.active, #nav a:hover 설명
color:#00008C; => 글자 색상

a.active
=> <a>엘리먼트(a 태그)에 class="active" 형태로 사용한다.
메뉴를 선택하면 해당 메뉴를 선택했다는 효과를 주기위해 class에서 사용할 수 있게 active 라는 이름을 직접 만들었다. 선택한 메뉴는 class="active" 를 사용하고 그렇지 않은 메뉴들은 class="" 를 사용한다.
예:선택 안한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="">여기는</a></li>
예:선택한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>

a:hover
=> 마우스 오버시 글자 색상

이처럼 같은 속성을 여러군데에서 사용하려면 "," 를 이용해서 설정할 수 있다.

Posted by 은둔고수
프로그램/html,css2009. 7. 23. 22:16

CSS 네비게이션 메뉴 만들기(가로형)


[css-tip]CSS 네비게이션 메뉴 만들기(가로형)


3개의 메뉴로 구성되어 있는 가로형 메뉴를 만들어 보자.
메뉸는 아래처럼 보여지게 된다.





[nav.htm]

<html>
<head>
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>

<body>

<ul id="nav">
 <li><a href="http://okkks.tistory.com" target="_blank">여기는</a></li>
 <li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>
 <li><a href="http://okkks.tistory.com" target="_blank">입니다.</a></li>
</ul>

</body>
</html>

메뉴에 주로 사용하는 ul, li 태그의 조합으로 구성을 한다.



[nav.css]
#nav
{
 margin:0;
 padding:0;
}

#nav li
{
 margin:0;
 padding:0;
 list-style-type:none;
 display:inline;
 float:left;
}
 
#nav a
{
 line-height:14px;
 font-weight:bold;
 margin:0 10px 4px 10px;
 text-decoration:none;
 font-size:12px;
 color:#9c9;
}

#nav a.active, #nav a:hover
{
 color:#363;
}


#nav 설명
magin, padding => 여백을 없앤다.


#nav li 설명
margin:0;
padding:0;
=> 여백 및 들여쓰기 없앤다.
list-style-type:none =>블릿을 없앤다.
display:inline; => 리스트를 같은 줄에 표시하한다. 
float:left; => 리스트를 왼쪽으로 붙여서 표시


#nav a 설명
line-height:14px; => 줄 간격 지정
font-weight:bold; => 굵은 글자
margin:0 10px 4px 10px; => 여백 간격을 조정한다.(순서대로 위,오른쪽,아래,왼쪽=시계방향)
text-decoration:none; => 글자의 꾸미기를 보통 모양으로 지정
font-size:12px; => 글자 크기
color:#9c9; => 글자 색상


#nav a.active, #nav a:hover 설명
color:#363; => 글자 색상

a.active
=> <a>엘리먼트(a 태그)에 class="active" 형태로 사용한다.
메뉴를 선택하면 해당 메뉴를 선택했다는 효과를 주기위해 class에서 사용할 수 있게 active 라는 이름을 직접 만들었다. 선택한 메뉴는 class="active" 를 사용하고 그렇지 않은 메뉴들은 class="" 를 사용한다.
예:선택 안한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="">여기는</a></li>
예:선택한 메뉴 효과>
<li><a href="http://okkks.tistory.com" target="_blank" class="active">http://okkks.tistory.com</a></li>

a:hover
=> 마우스 오버시 글자 색상

이처럼 같은 속성을 여러군데에서 사용하려면 "," 를 이용해서 설정할 수 있다.

Posted by 은둔고수
프로그램/jquery, javascript2009. 7. 15. 22:34

메뉴 슬라이딩 효과


[javascript-tip]메뉴 슬라이딩 효과

 

 

<html>
<head>
<title>[javascript-tip]메뉴 슬라이딩 효과</title>

<style type="text/css">
<!--
BODY { font-size:9pt; }
.menu {
    border:1px solid #CCCCCC;
    background-color:#DEDEDE;
    padding:3px 1px 1px 5px;

    width:150px;
    cursor:hand;
}

.submenu {
    width:150px;
    padding-left:10px;
    display:none;
    cursor:hand;
}
-->
</style>
<script language="javascript">
<!--
function slide(Id, interval, to)
{
    var obj = document.getElementById(Id);
    var H, step = 5;

    if (obj == null) return;
    if (to == undefined) { // user clicking
        if (obj._slideStart == true) return;
        if (obj._expand == true) {
            to = 0;
            obj.style.overflow = "hidden";
        } else {
            slide.addId(Id);
            for(var i=0; i < slide.objects.length; i++) {
                if (slide.objects[i].id != Id && slide.objects[i]._expand == true) {
                    slide(slide.objects[i].id);
                }
            }

            obj.style.height = "";
            obj.style.overflow = "";
            obj.style.display = "block";
            to = obj.offsetHeight;
            obj.style.overflow = "hidden";
            obj.style.height = "1px";
        }
        obj._slideStart = true;
    }
  
    step            = ((to > 0) ? 1:-1) * step;
    interval        = ((interval==undefined)?1:interval);
    obj.style.height = (H=((H=(isNaN(H=parseInt(obj.style.height))?0:H))+step<0)?0:H+step)+"px";
  
    if (H <= 0) {
        obj.style.display = "none";
        obj.style.overflow = "hidden";
        obj._expand = false;
        obj._slideStart = false;
    } else if (to > 0 && H >= to) {
        obj.style.display = "block";
        obj.style.overflow = "visible";
        obj.style.height = H + "px";
        obj._expand = true;
        obj._slideStart = false;
    } else {
        setTimeout("slide('"+Id+"' , "+interval+", "+to+");", interval);
    }
}
slide.objects = new Array();
slide.addId = function(Id)
{
    for (var i=0; i < slide.objects.length; i++) {
        if (slide.objects[i].id == Id) return true;
    }
    slide.objects[slide.objects.length] = document.getElementById(Id);
}
//-->
</script>
</head>
<body>
<h1>[javascript-tip]메뉴 슬라딩 효과</h1>

<div class="menu" onClick="slide('sub1');">Tree1</div>
<div id="sub1" class="submenu">
    <div>  + SubTree1-1</div>
    <div>  + SubTree1-2</div>
    <div>  + SubTree1-3</div>
    <div>  + SubTree1-4</div>
    <div>  + SubTree1-5</div>
</div>
<div class="menu" onClick="slide('sub2');">Tree2</div>
<div id="sub2" class="submenu">
    <div>  + SubTree2-1</div>
    <div>  + SubTree2-2</div>
    <div>  + SubTree2-3</div>
    <div>  + SubTree2-4</div>
</div>
<div class="menu" onClick="slide('sub3');">Tree3</div>
<div id="sub3" class="submenu">
    <div>  + SubTree3-1</div>
    <div>  + SubTree3-2</div>
    <div>  + SubTree3-3</div>
</div>
<div class="menu">이건 다른 메뉴</div>
</body>
</html>

Posted by 은둔고수

티스토리툴바