How to make side menu?
3 posters
Page 1 of 1
How to make side menu?
Hello,
A few days ago I saw a side menu in one of the skins in Hitskin.
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.
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.
Last edited by Perfection on December 5th 2012, 7:20 pm; edited 1 time in total
Perfection- New Member
- Posts : 14
Reputation : 1
Language : English
Re: How to make side menu?
It is done with HTML and CSS. Basically creating a div with two divs in it, then "a href" links with hover effects probably.
Quick markup.
Now if you want more buttons we would then use an unordered list. Please explain exactly what you would like.
- 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.
Re: How to make side menu?
Well, I have some html pages, that I want to put like a side menu next to my logo.
Perfection- New Member
- Posts : 14
Reputation : 1
Language : English
Re: How to make side menu?
ok so you would want to use an unordered list like so
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.
CSS quicky
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
- 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
Re: How to make side menu?
And can I put images instead of a text?
Perfection- New Member
- Posts : 14
Reputation : 1
Language : English
Re: How to make side menu?
Yes there are endless possibilities to what you can do. <a href =""><img src=""/></a>
Re: How to make side menu?
Thanks a lot, I will try it right away
Perfection- New Member
- Posts : 14
Reputation : 1
Language : English
Re: How to make side menu?
No problem I would suggest starting on an HTML page till you get it right kk
Re: How to make side menu?
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:
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.
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.
Perfection- New Member
- Posts : 14
Reputation : 1
Language : English
Re: How to make side menu?
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
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
Re: How to make side menu?
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:
Perfection- New Member
- Posts : 14
Reputation : 1
Language : English
Re: How to make side menu?
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
Re: How to make side menu?
Now everything is great, thank you a lot.
Problem is solved
Problem is solved
Perfection- New Member
- Posts : 14
Reputation : 1
Language : English
Re: How to make side menu?
Topic Solved & Locked |
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum