[CSS] Vertical Menu

If you want to make a simple vertical Menu with links, images, or plain text, you can do it with plain HTML code and a bit of CSS.

HTML will help us to create a "list" using <li>, and CSS will "make up" all that and place the Menu in the desired place.

I suggest you download Notepad++ to start with, where you will write Codes. You can download it from the following link http://notepad-plus-plus.org/download/v6.1.4.html

You can download the finished Code from THIS link.

<style type=“text/css“>
.test{
position:fixed; /*The menu will stay in place even when you scroll the page*/
width:36px; /*width*/
height:300px; /*length*/
bottom:0px; 
right:0px; /*will be pasted at the top of the screen*/
top:0px; /*it will be stuck to the right edge of the screen*/
}
.test ul {
margin-top:100px; /*distance from the top of the screen*/
padding:2; 
}

.test li {list-style: none;} /*drops black dots next to the text*/
</style>

<div class=’test’>
<ul>
<li>Tekst1</li>
<li>Tekst2</li>
<li>Tekst3</li>
<li>Tekst4</li>
</ul>
</div>

Instead of <li>Text</li>, you can put text, image, and link.

Save as name.html and open. If you don't like how it looks, you can change the position, size, etc. in the CSS section. More about CSS at THIS link.

You can see how this all looks on the right side of the blog. Only I inserted images instead of text and linked them.