The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How to make side menu?

3 posters

Go down

Solved How to make side menu?

Post by Perfection Sun Dec 02, 2012 8:22 pm

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.


Last edited by Perfection on Wed Dec 05, 2012 6:20 pm; edited 1 time in total
avatar
Perfection
New Member

Female Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make side menu?

Post by Perfection Mon Dec 03, 2012 7:40 pm

Bump
avatar
Perfection
New Member

Female Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make side menu?

Post by nextlevelgaming Mon Dec 03, 2012 7:43 pm

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.

nextlevelgaming
nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Solved Re: How to make side menu?

Post by Perfection Mon Dec 03, 2012 7:51 pm

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

Female Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make side menu?

Post by nextlevelgaming Mon Dec 03, 2012 8:04 pm

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 Edit 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 Smile

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
nextlevelgaming
nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Solved Re: How to make side menu?

Post by Perfection Mon Dec 03, 2012 8:10 pm

And can I put images instead of a text?
avatar
Perfection
New Member

Female Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make side menu?

Post by nextlevelgaming Mon Dec 03, 2012 8:17 pm

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

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Solved Re: How to make side menu?

Post by Perfection Mon Dec 03, 2012 8:18 pm

Thanks a lot, I will try it right away ùù
avatar
Perfection
New Member

Female Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make side menu?

Post by nextlevelgaming Mon Dec 03, 2012 8:24 pm

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

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Solved Re: How to make side menu?

Post by Perfection Mon Dec 03, 2012 9:18 pm

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.
avatar
Perfection
New Member

Female Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make side menu?

Post by nextlevelgaming Mon Dec 03, 2012 9:55 pm

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
nextlevelgaming
nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Solved Re: How to make side menu?

Post by Perfection Wed Dec 05, 2012 4:19 pm

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:
avatar
Perfection
New Member

Female Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make side menu?

Post by nextlevelgaming Wed Dec 05, 2012 5:53 pm

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
nextlevelgaming
nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Solved Re: How to make side menu?

Post by Perfection Wed Dec 05, 2012 6:19 pm

Now everything is great, thank you a lot.

Problem is solved bye
avatar
Perfection
New Member

Female Posts : 14
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to make side menu?

Post by nextlevelgaming Wed Dec 05, 2012 6:24 pm

Good job Perfection Smile
nextlevelgaming
nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Solved Re: How to make side menu?

Post by SLGray Wed Dec 05, 2012 6:39 pm

Topic Solved & Locked


How to make side menu? Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51555
Reputation : 3524
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum