FrmMenu (메뉴컨트롤)
.NET프로그래밍/ASP.NET 3.5 SP1 2009. 10. 15. 09:50 |
- 웹 컨트롤 잘 만든 참고사이트 - www.componentart.com / www.componentone.com
"새 웹 사이트 만들기"로 파일을 저장할 위치에 "WebNavigationControl"프로젝트(폴더)를 생성한 후에, "새 항목 추가"로 "웹 폼(Web Form)"형식의 "FrmMenu.aspx"파일을 만들고 [FrmMenu.aspx 디자인]모드에서 아래 그림과 과정을 실행한 후 아래와 같이 [FrmMenu.aspx] 코드를 작성한다.
--> [FrmMenu.aspx 디자인]모드에서 [도구상자 - 탐색 - "Menu"컨트롤을 [FrmMenu.aspx]의 "div"태그안에 마우스로 "드래그&드롭"한다.
--> "div"태그안에 추가된 "Menu"컨트롤
--> "div"태그안에 "Menu"컨트롤을 떨어뜨린 후 "Menu"컨트롤의 속성 창에서 "Orientation(배열형식)"속성을 "Horizontal"로 설정한다.
--> "Menu"컨트롤의 속성에서 "Orientation(배열형식)"속성을 "Vertical"에서 "Horizontal"로 설정한 후 화면.
--> 그다음 "Menu"컨트롤의 "스마트 버튼"에서 아래그림에 보이는 "메뉴 항목 편집"을 클릭한다.
--> "메뉴 항목 편집기"창이 열리면 아래그림과 같이 "루트 항목 추가"로 필요한 항목을 추가하고 이름을 지정한다.(여기서는 "HOME"으로 이름을 지정하였다.)
--> "HOME"이라는 이름으로 루트항목을 하나 생성한 후 필요하면 "HOME"루트항목의 자식항목을 아래 그림과 같이 추가할 수도 있다.
--> "HOME"루트항목외에도 '공지사항', '장바구니', '고객센터'루트항목을 추가하였고, "HOME"루트항목의 자식항목으로 "사이트소개"라는 이름의 '자식항목'도 하나 추가하였다.
--> 아래그림과 같이 "Menu"컨트롤의 "스마트 버튼"에서 "자동 서식"을 클릭하여 "Menu"컨트롤의 디자인을 바꿀 수도 있다.
--> 아래그림과 같이 "Menu"컨트롤의 "스마트 버튼"에서 "자동 서식"을 클릭하여 "Menu"컨트롤의 디자인을 바꿔보았다.
==> [FrmMenu.aspx] 소스 및 디자인
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmMenu.aspx.cs" Inherits="FrmMenu" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" BackColor="#B5C7DE"
DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#284E98" Orientation="Horizontal" StaticSubMenuIndent="10px">
<StaticSelectedStyle BackColor="#507CD1" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#284E98" ForeColor="White" />
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="HOME" Value="HOME">
<asp:MenuItem Text="사이트소개" Value="사이트소개"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="공지사항" Value="공지사항"></asp:MenuItem>
<asp:MenuItem Text="장바구니" Value="장바구니"></asp:MenuItem>
<asp:MenuItem Text="고객센터" Value="고객센터"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
-------------------------------------------------------------------------------------
[실행결과]
--> 실행 된 웹 페이지에서 "Menu"컨트롤의 "HOME"루트항목에 마우스를 올리면(= MouseOver), 자식항목인 "사이트소개"가 나타난다.
'.NET프로그래밍 > ASP.NET 3.5 SP1' 카테고리의 다른 글
| Web.sitemap (사이트맵패스 컨트롤) - 빵 조각(Bread Crumb) (0) | 2009.10.15 |
|---|---|
| FrmTreeView (트리뷰) (0) | 2009.10.15 |
| 테마(Theme)와 스킨(Skin) (0) | 2009.10.14 |
| 마스터페이지(*.master) (0) | 2009.10.14 |
| WebUserControl (웹 사용자 정의 컨트롤(=부분 페이지)) (0) | 2009.10.14 |