The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make side menu?

View previous topic View next topic Go down

Solved How to make side menu?

Post by Perfection on December 2nd 2012, 9: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 December 5th 2012, 7:20 pm; edited 1 time in total

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 on December 3rd 2012, 8:40 pm

Bump

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 on December 3rd 2012, 8: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
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 on December 3rd 2012, 8:51 pm

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

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 on December 3rd 2012, 9: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
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 on December 3rd 2012, 9:10 pm

And can I put images instead of a text?

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 on December 3rd 2012, 9:17 pm

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

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 on December 3rd 2012, 9:18 pm

Thanks a lot, I will try it right away

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 on December 3rd 2012, 9:24 pm

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

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 on December 3rd 2012, 10: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.

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 on December 3rd 2012, 10: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
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 on December 5th 2012, 5: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:

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 on December 5th 2012, 6: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
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 on December 5th 2012, 7:19 pm

Now everything is great, thank you a lot.

Problem is solved bye

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 on December 5th 2012, 7:24 pm

Good job Perfection Smile

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 on December 5th 2012, 7:39 pm

Topic Solved & Locked


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


SLGray
Administrator
Administrator

Male Posts : 36663
Reputation : 2444
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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