How to Make a Side Bar in HTML

Save

When creating a website, you typically have a couple of options for the placement of a navigation menu. In some cases, this menu is located on the top of the page, and sometimes it is included as a sidebar that runs vertically down the side of a page. When you make a sidebar in HTML, you must insert the sidebar as two sections in the HTML page. One section is the CSS code that makes the sidebar functional and the other is the HTML that gives the sidebar its structure.

  • Log in to your Web server and open the HTML page on which you want to make a sidebar.

  • Click on the screen in between the <body> and </body> tags and insert the following code:

    <div id="navigation">

    <h2>Contents</h2>

    <ul>

    <li><a href="Introduction&lt;/a>&lt;/li">http://www.webpage1.com">Introduction&lt;/a>&lt;/li>

    <li><a href="Blog&lt;/a>&lt;/li">http://www.webpage2.com">Blog&lt;/a>&lt;/li>

    <li><a href="About">http://www.webpage3.com">About Us</a></li>

    <li><a href="News&lt;/a>&lt;/li">http://www.webpage4.com">News&lt;/a>&lt;/li>

    <li><a href="Contact">http://www.webpage5.com">Contact Us</a></li>

    </ul>

    </div>

  • Replace the sample URLs and the text that appear on each link with the URLs and text that you want to use on your page.

  • Click just after the <head> tag at the top of your page and insert the following code:

    <title></title>

    <style type="css">

    navigation {

    width: 150px;

    background-color: #000FFF;

    color: #FFFFFF;

    float: left;

    margin-left: 7px;

    margin-right: 6px;

    }

    navigation h2, #navigation hr {

    display: block

    padding: 10px 5px;

    border-bottom-width: 1px;

    border-bottom-style: solid;

    border-bottom-color: #000FFF;

    }

    navigation ul {

    margin: 0px;

    padding: 0px;

    list-style: none;

    }

    navigation ul li {

    border-bottom-width: 1px;

    border-bottom-style: solid;

    border-bottom-color: #000FFF;

    }

    navigation ul li a {

    padding: 8px;

    display: block;

    background-color: #000FFF;

    color: #FFFFFF;

    text-decoration: none;

    border-bottom-width: 1px;

    border-bottom-style: solid;

    border-bottom-color: #000FFF;

    }

    navigation ul li a:hover {

    background-color: #6495ED;

    }

    </style>

  • Replace the color codes if you want to customize the page (see Resources).

  • Publish the page.

References

Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!