[Part2] is about making spry menu.
(파트2는 spry 메뉴에 대해서)

1. Add this code after <title> and <meta >
(아래의 코드를 <title> 과 <meta > 다음에 넣는다)

1
2

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

Looks like this.
(아래처럼 보인다)
2013-10-31 AM 12-42-09

2. Add this code before </body>
(아래 코드를 </body> 이전에 넣는다)

1
2
3

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>

Looks like this.
(아래처럼)
2013-10-31 AM 12-45-12

3. Add actual menu where you want. Delete menu image and replace this code there.
(실제 메뉴를 넣는다. 메뉴 이미지는 지우고 아래 코드를 그 자리에 넣는다)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<ul id="MenuBar1" class="MenuBarHorizontal">
		<li><a href="index.html">Home</a></li>
		<li><a href="sub10.html">About</a></li>
		<li><a href="sub20.html">Services</a></li>
 
                <li><a href="sub30.html"class="MenuBarItemSubmenu">Work</a>
                  <ul>
                   <li><a href="sub31.html">Work sub1</a></li>
                   <li><a href="sub32.html">Work sub2</a></li>
                  </ul>
                </li>
 
                <li><a href="sub40" class="MenuBarItemSubmenu">Contact</a>
                  <ul>
                   <li><a href="sub41.html">Contact sub1</a></li>
                   <li><a href="sub42.html">Contact sub2</a></li>
                 </ul>
                </li>
 
                <li><a href="sub50.html">Info</a></li>
</ul>

It looks like this.
(아래처럼 된다)
2013-10-31 AM 1-00-15

4. Download this file and extract at the same folder where the index.html is.
(이 파일을 다운 받아 index.html 이 있는 곳에 압축 해제 한다.

5. Preview the index.html file. And you may find the menu need top margin.
(index.html 파일을 브라우저에서 열어본다. 상단 마진이 필요해 보인다)
2013-10-31 AM 1-06-51

6. Edit this css.
div.menu is selector which contain the menu.
(아래 css 를 수정한다. div.menu는 메뉴를 포함하고 있는 선택자이다)
2013-10-31 AM 1-08-16

7. And you can edit SpryMenuBarHorizontal.css in the SpryAssets folder, to change font size, etc.
(SpryAssets 폴더에 있는 SpryMenuBarHorizontal.css파일을 수정하여 폰트 사이즈, 색 등을 수정할 수 있다)

8. You can download the last html file at part3
(최종 세팅된 html 파일은 part3 내용 하단에서 링크 걸어 놓았다)