How to make side menu?

Hello,
A few days ago I saw a side menu in one of the skins in Hitskin.

Spoiler:

I was wondering if I can something like this, but not for the menu but with other links?

I would be very pleased if you can help me.

Bump

It is done with HTML and CSS. Basically creating a div with two divs in it, then "a href" links with hover effects probably.

Code:

<div id="sideMenuWrap">
<div class="buttonM"><a href="">Link 1</a></div>
<div class="buttonC"><a href="">Link 2 </a></div>
</div>

Quick markup.

Now if you want more buttons we would then use an unordered list. Please explain exactly what you would like.

Well, I have some html pages, that I want to put like a side menu next to my logo.

ok so you would want to use an unordered list like so

Code:

<div id="sideMenu">
<ul>
<li><a href="/h1-name">Link 1</a></li>
<li><a href="/h2-name">Link 1</a></li>
<li><a href="/h3-name">Link 1</a></li>
<li><a href="/h4-name">Link 1</a></li>
</ul>
</div>

That is a quick markup again. <ul> stands for unordered list, <li> stands for list item.

<a href="/h1-name"> would be changed to the html pages you have, when you go to your html pages you should see next to each of course, well on the complete left side you can actually see the links. by making the href="/h1-name" we are stating that this is a subpage of our domain. And it will go to that link without opening a new page or anything messing up.

To style this there maybe some fun for you

Some immediate CSS lesson:

ul{list-style-type:none;} this makes it so there are no bullets.

I'd rather not just give you a code, and instead teach you thats why I am explaining this to you as I go.

to edit the the text for font size and font color and hover effects you must first add class so that no other ul li or div will be messed around with.

Code:

<div id="sideMenu">
<ul class="sidemenuUL">
<li><a href="/h1-name">Link 1</a></li>
<li><a href="/h2-name">Link 1</a></li>
<li><a href="/h3-name">Link 1</a></li>
<li><a href="/h4-name">Link 1</a></li>
</ul>
</div>

CSS quicky

Code:

#sideMenu{width:200px;height:auto; padding:2px;background-color:#000;overflow:hidden;border:2px solid #00ff00; border-radius:5px;/* You may not need this try with and without float:right; */}
.sidemenuUL{list-style-typle:none; width:200px;text-align:center;}
.sidemenuUL li a{width:200px;height:30px;font-size:14px; color:#0000ff; text-decoration:none; }
.sidemenuUL li a{color:#ff0000;background:#c3c3c3; }


That was something quick without looking at any thing. I hope you understand this all...

Also you must add this to your OVERALL_HEADER next to the logo in that template

And can I put images instead of a text?

Yes there are endless possibilities to what you can do. <a href =""><img src=""/></a>

Thanks a lot, I will try it right away

No problem I would suggest starting on an HTML page till you get it right kk

I'm sorry that I bother you again, but...I don't quite get it.
First, which part of the code to put in the template, because I put this:

Code:

    #sideMenu{width:200px;height:auto; padding:2px;background-color:#000;overflow:hidden;border:2px solid #00ff00; border-radius:5px;/* You may not need this try with and without float:right; */}
    .sidemenuUL{list-style-typle:none; width:200px;text-align:center;}
    .sidemenuUL li a{width:200px;height:30px;font-size:14px; color:#0000ff; text-decoration:none; }
    .sidemenuUL li a{color:#ff0000;background:#c3c3c3; }

And nothing happened, it just showed in the place of the logo like a code.
Probably that code it would put it next to or in the logo.

that above is CSS

You want HTML in the templates.

Like i said try it on a new html page like you are making a new page. Place the CSS inside <style></style> tags and the html under that. If you are satisfied
add the code to your CSS style sheet, without those <style> tags

save it then go to your template and add the html that is needed

Ok, I put it in the templete, but it stays strange. How to put it over the logo and to stay there like a menu?

Spoiler:

Make the main div that the menu is in position:absolute; then change left:50px; top:100px; youll,have to change the numbers till satisfaction. Let me know if it works. Did a great job so far

Now everything is great, thank you a lot.

Problem is solved

Good job Perfection