Introduction
This is part 6 of my series, HTML Ebook. In this part of the series we look at the hyperlinks structure and behavior in the sidebar HTML document for the HTML ebook project. The navigation links for this ebook are in the sidebar.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Behavior and Structure of Hyperlinks
When the frameset is loaded (opened) in the browser, you see a column of hyperlinks in the sidebar. This is the first level of links. Some of these links point to major pages. There are some pages related to the major pages that you can call sub pages. The sub pages have corresponding links, which you can call sub links. These sub links form the second level of links and are not shown when the frameset is initially displayed. So some links in the first column have sub links.

The major pages are the first pages of the chapters. The sub pages are the pages for the sections of the chapters. There are three chapters and each chapter has three sections meaning three sub pages. So the first part of each chapter has a major link and the sections have sub links. Each chapter in the project actually has 4 pages. The first page is an introduction or overview of what is in the whole (3 sections of the) chapter.

User Requirements
In this section I give you the user requirements of the navigation hyperlinks of the HTML document in the sidebar frame.

- Each link is preceded by a bullet.
- For the links that have sub links, when you click its bullet its sub links should appear below it, in a short column indented to the right. Under this condition, we say the link item is expanded.
- For a link item that is expanded, when you click the bullet of the link again its sub links disappear. Under this condition, we say the link item has collapsed.
- When you click a link itself, a new page appears in the content frame.

You can call the first level of links the main menu. You can then say that some main menu items have sub menus. When you click the bullet of a main menu item, you see its sub menu. Well, not all main menu items have sub menus.

Technical Requirements
- Each link is coded in an HTML LI element.
- A group of LI elements is contained in an HTML OL element.
- A menu item is an LI element having a hyperlink.
- Each sub menu is contained in an OL element.
- An OL element for a sub menu is coded just below the corresponding LI main menu item.
- There is one OL element that has all the menu items, beginning from the first level of links to the second level. This OL element has the OL elements for the sub menus.
- For any menu item that is not expandable, its bullet is a small solid square. This applies to all levels of menu.
- For a menu item that is expandable, when it is collapsed, its bullet is a small solid circle. When it is expanded, its bullet is a small opened circle.
- A sub menu consists LI elements in an OL element. When a sub menu is to be displayed, the CSS display property for the OL element is set to "block". When the sub menu is not displayed, the CSS display property is "none".

All the above rules can be extended to third and fourth level menu items. However, in our project we have only the first and second levels for menu items. In CSS a small solid square is simply called a square; a small solid circle is simply called a disc and a small opened circle is simply called a circle.

Coding
For the rest of this part of the series, I show you how to do the coding for the sidebar.htm file, which is the document for the sidebar frame. Remember, the documents for the sidebar and banner frames do not change as the links are clicked. When a link in the sidebar is clicked, it is the document of the content frame that is changed to give the one for the link clicked.

The HTML Code
This is the HTML code for the links:

    <ol>
        <li  style="list-style-type:square"><a href="cover.htm" target="content">Cover</a></li>
        <li  style="list-style-type:square"><a href="Table-of-Contents.htm" target="content">Table of Contents</a></li>
        <li  style="list-style-type:square"><a href="Forward.htm" target="content">Forward</a></li>
        <li  style="list-style-type:square"><a href="Acknowledgement.htm" target="content">Acknowledgement</a></li>

        <li style="list-style-type:disc" id="l4" onclick="expandOrCollapse('l4')"><a href="Chapter1.htm" target="content">Chapter 1</a></li>
        <ol style="display:none" id="o4">
            <li  style="list-style-type:square"><a href="Chapter1/Chapter1-Section1.htm" target="content">Chapter 1 - Section 1</a></li>
            <li  style="list-style-type:square"><a href="Chapter1/Chapter1-Section2.htm" target="content">Chapter 1 - Section 2</a></li>
            <li  style="list-style-type:square"><a href="Chapter1/Chapter1-Section3.htm" target="content">Chapter 1 - Section 3</a></li>
        </ol>
        <li  style="list-style-type:disc" id="l5"  onclick="expandOrCollapse('l5')"><a href="Chapter2.htm" target="content">Chapter 2</a></li>
        <ol style="display:none"  id="o5">
            <li  style="list-style-type:square"><a href="Chapter2/Chapter2-Section1.htm" target="content">Chapter 2 - Section 1</a></li>
            <li  style="list-style-type:square"><a href="Chapter2/Chapter2-Section2.htm" target="content">Chapter 2 - Section 2</a></li>
            <li  style="list-style-type:square"><a href="Chapter2/Chapter2-Section3.htm" target="content">Chapter 2 - Section 3</a></li>
        </ol>
        <li  style="list-style-type:disc"  id="l6"  onclick="expandOrCollapse('l6')"><a href="Chapter3.htm" target="content">Chapter 3</a></li>
        <ol  style="display:none"  id="o6">
            <li  style="list-style-type:square"><a href="Chapter3/Chapter3-Section1.htm" target="content">Chapter 3 - Section 1</a></li>
            <li  style="list-style-type:square"><a href="Chapter3/Chapter3-Section2.htm" target="content">Chapter 3 - Section 2</a></li>
            <li  style="list-style-type:square"><a href="Chapter3/Chapter3-Section3.htm" target="content">Chapter 3 - Section 3</a></li>
        </ol>

        <li  style="list-style-type:square"><a href="Index-Page.htm" target="content">Index</a></li>
    </ol>

The above code has been divided into three segments. The first segment has menu items for the pages (HTML files) that are in the head directory; these are the non-chapter files. In the second segment, some of the menu items are for the pages in the head directory and most are for pages in sub directories of the head directory; the second segment is for the chapter pages. The last segment has just one menu item; it is for the index page, which is in the head directory.

Each hyperlink has the target attribute with the name of the content frame as value. In this way, when the link is clicked, the corresponding page opens in the content frame.

Each LI element has a style attribute for its bullet. Each menu item that is expandable has an ID for its LI element. This ID begins with the letter, 'l' followed by a number. Each menu item that is expandable has an OL element coded just below the corresponding LI element. The OL element is for the sub menu and has an ID. This ID begins with the letter, 'o' followed by a number. This number is the same as the number part of the ID of the corresponding LI element, above it.

In the second segment of the above code, the menu items for the pages that begin the chapters have their pages in the head directory. These pages are the first part (introduction) of the chapters. The second segment above deals with the chapters. The rest of the menu items for this segment are for chapter sections whose pages are in sub directories of the head directory. The menu items for the chapters are expandable. The menu items for the chapter sections are in sub menus; they are not expandable as there is no third level menu in the project.

For an expandable menu item, the LI element has an onclick event, which calls a JavaScript function sending the LI ID as argument.

Note: The href values for the hyperlinks do not have the scheme (http) and the colon and two forward slashes. A hyperlink whose file is in the head directory has just the name of the file as the href value. Any sub directory for the ebook emanates from the head directory. So, the href value of any file for the ebook in any such sub directory begins with the name of the corresponding directory in the head directory.

The JavaScript
The function of the JavaScript in the sidebar.htm file is to expand the expandable menu items when their bullets are clicked and change the bullets as expected from the technical requirements. The JavaScript also collapses the main menu item when its bullet is clicked.

This is the JavaScript, which is in the sidebar.htm file:

<script type="text/javascript">

    function expandOrCollapse(ID)
        {
            if (document.getElementById(ID).style.listStyleType == "disc")
                {//expand corresponding OL element
                    //first change list style type of LI to circle
                    document.getElementById(ID).style.listStyleType = "circle";

                   //form the ID of the corresponding OL element
                   //first get the number part
                   num = ID.substr(1);
                   OLID = "o" + num;
                   
                   //expand
                   document.getElementById(OLID).style.display = "block";
                }
            else
                {//collapse corresponding OL element
                    //first change list style type of LI to disc
                    document.getElementById(ID).style.listStyleType = "disc";

                   //form the ID of the corresponding OL element
                   //first get the number part
                   num = ID.substr(1);
                   OLID = "o" + num;
                   
                   //collapse
                   document.getElementById(OLID).style.display = "none";
                }
        }

</script>

There is just one function in the JavaScript. The function is expandOrCollapse(ID). It takes the ID of the LI element clicked, as argument. Only LI elements for expandable menu items have IDs. The LI elements that do not have sub menus do not have IDs. Sub menus are continued in OL elements, and these OL elements have IDs. Remember, the number part of the ID for an OL element is the same as the number part of the corresponding LI element, coded just above it. With this ID format, JavaScript (function) would know the OL element corresponding to the LI element clicked.

In order for the JavaScript function to know whether a menu item is expandable, it verifies if the bullet of its LI element is a disc. If it is, then it expands the menu item, changing the bullet of the LI element to a circle. In order for the JavaScript to know if a menu item is expanded and needs to be collapsed when clicked, it checks if the bullet is a circle. In that case, it collapses the menu changing its bullet back into a disk. Non-expandable menu items have squares for their bullets, and are not addressed by the JavaScript (function); they do not have to be addressed.

The function has an if-statement, which has an if-part and an else-part. The condition of the if-part uses the LI ID to check if the bullet is a disc. If it is a disk, then the block of the if-part expands the menu. If it is not a disk it means it is a circle; remember only expandable menu items have IDs. If the bullet is a circle, then the else-part of the if-statement collapses the menu.

The if-block
The first statement in the if-block changes the bullet to a circle. The second statement extracts the number part from the ID of the LI element. The third statement uses this number part to form the ID of the corresponding OL element. The fourth statement displays the corresponding OL element.

The else-block
The else-block is explained similarly to the if-block, however two of its statements do the opposite of what is attained in the if-block. The other two statements form the ID of the corresponding OL element in the same way as done in the if-block.

Well, we have come to the end of this part of the series, we continue in the next one.

Chrys