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.

Quick Side Menu

View previous topic View next topic Go down

Solved Quick Side Menu

Post by aprilshowers0923 on October 22nd 2015, 6:41 pm

Hi, I would like to put a quick Side Menu on my forums but I cant figure out where to put the code...Nothing seems to work.

This is what it looks like...when you click on it, the menu slides to the left.



The code that I have is as follows...I would change the links though.

<div class="layer1">
<div class="mycontent">


<div id="menu">
<div id="bar"><br><br><br><br><br><br>Q<br>U<br>I<br>C<br>K<br><br><br>F<br>O<br>R<br>U<br>M<br><br><br>M<br>E<br>N<br>U</div>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/82">General Board</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/87">Artists Permissions </a><br>
<hr>
CHALLENGES<br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/191">Weekend Tutorial</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/185">Marie's Vector & Painting </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/69">Tutorial </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/72">Tube </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/75">Weekly Filter/Plugin </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/74">Free Scrapkit of the Week </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/209">Weekly Template </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/71">Mask of the Week </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/128">Artist of the Month </a><br>
<hr>TUTORIALS<br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/127">For Beginners</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/184">Staff and Members Tuts (PSP)</a><br>
<hr> ACTIVITIES <br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/190">Auctions-R-Us</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/188">Flea Market</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/211">Scrapkit Exchange Store</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/117">WWO Board</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/118">WWO Pick Ups</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/170">Games </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/123">Show Me</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/122">Siggie Swap </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/120">Show Off Board</a><br>

</div>


Last edited by aprilshowers0923 on November 3rd 2015, 6:26 pm; edited 1 time in total

aprilshowers0923
Forumember

Posts : 153
Reputation : 6
Language : english

http://backgroundsapril.forummotions.com/

Back to top Go down

Solved Re: Quick Side Menu

Post by Ange Tuteur on October 22nd 2015, 7:03 pm

Hi @aprilshowers0923,

Have you tried adding this HTML via widget management ? I think you might also need some CSS for the style, did you get any CSS with it ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Quick Side Menu

Post by aprilshowers0923 on October 22nd 2015, 11:23 pm

Hi Ange...If I do it through the widget management, it shows up under the widgets which I dont want ..It is a hidden menu until its clicked on and situated
on the upper hand side of the page like the image I posted. as for the CSS yes I have it.

April

aprilshowers0923
Forumember

Posts : 153
Reputation : 6
Language : english

http://backgroundsapril.forummotions.com/

Back to top Go down

Solved Re: Quick Side Menu

Post by SLGray on October 23rd 2015, 4:36 am

What happens if you add the code to an announcement which is on all pages?


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


SLGray
Administrator
Administrator

Male Posts : 35641
Reputation : 2374
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Quick Side Menu

Post by aprilshowers0923 on October 23rd 2015, 6:45 am

doesnt work.

here is the CSS for the style

#menu {
position: fixed;
top: 40px;
left: -192px;
width: 210px;
height: 630px;
font-family: Arial, Helvetica, sans-serif;
padding: 5px;
font-size: 14px;
color: #CB8D9A;
font-weight: bold;
overflow: hidden;
border: 1px solid #000000;
background: #E0E1DF;
}

#menu:hover { left: 0px; }

#menu a {
font-size: 12px;
line-height: 20px;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
text-decoration: none;
padding: 5px;
}

#menu a:hover { font-weight: bold; color: #dd0000; text-decoration: underline; }

#menu #bar {
position: absolute;
top: 0px;
right: 0px;
width: 25px;
padding: 2px;
text-align: center;
height: 636px;
font-weight: bold;
font-size: 14px;
background: #3A3A3A;
}

#menu hr {
border: 0px none;
color: #000000;
height: 1px;
text-align: center;
width: 100%;
background: #000000;
}

aprilshowers0923
Forumember

Posts : 153
Reputation : 6
Language : english

http://backgroundsapril.forummotions.com/

Back to top Go down

Solved Re: Quick Side Menu

Post by aprilshowers0923 on October 23rd 2015, 6:48 am

I closed the group at yuku but if you go there you will see it on the upper left and it shows in all the pages/forums

http://pspshowdown.yuku.com/

aprilshowers0923
Forumember

Posts : 153
Reputation : 6
Language : english

http://backgroundsapril.forummotions.com/

Back to top Go down

Solved Re: Quick Side Menu

Post by SLGray on October 23rd 2015, 8:34 am

I do not see a menu at the top left.


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


SLGray
Administrator
Administrator

Male Posts : 35641
Reputation : 2374
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Quick Side Menu

Post by aprilshowers0923 on October 23rd 2015, 4:40 pm

This is an image of what it looks like. I dont know why you cant see it.

http://pspshowdown.yuku.com/


aprilshowers0923
Forumember

Posts : 153
Reputation : 6
Language : english

http://backgroundsapril.forummotions.com/

Back to top Go down

Solved Re: Quick Side Menu

Post by Ange Tuteur on October 23rd 2015, 4:52 pm

I'm assuming he cannot see it due to being asked to log in with an account.

Another way would be to add it via the templates. Go to Admin Panel > Display > Templates > General and open the overall_header template.

Then just add your code before the end of the body tag :
Code:
</body>

and the CSS in your stylesheet of course. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Quick Side Menu

Post by aprilshowers0923 on October 23rd 2015, 9:03 pm

Okay thank you Ange. Let me try that.

April

aprilshowers0923
Forumember

Posts : 153
Reputation : 6
Language : english

http://backgroundsapril.forummotions.com/

Back to top Go down

Solved Re: Quick Side Menu

Post by aprilshowers0923 on October 24th 2015, 1:02 am

Okay that didn't work. when you say css stylesheet I hope you mean display/pictures and colours/colours/css stylesheet??????????????

the other thing I was thinking about the code I have for the stylesheet I used in a group I had at yuku.com so I was wondering maybe the parameter that I have for the CSS code needs to be altered for forumotion????? what do you think lol?

aprilshowers0923
Forumember

Posts : 153
Reputation : 6
Language : english

http://backgroundsapril.forummotions.com/

Back to top Go down

Solved Re: Quick Side Menu

Post by Ange Tuteur on October 24th 2015, 1:21 am

Hmm.. actually why don't we combine both the CSS and HTML into a single set of code. Try adding the following to either a widget OR the spot I suggested prior to this post. Smile

Code:
<style type="text/css">#menu {
position: fixed;
top: 40px;
left: -192px;
width: 210px;
height: 630px;
font-family: Arial, Helvetica, sans-serif;
padding: 5px;
font-size: 14px;
color: #CB8D9A;
font-weight: bold;
overflow: hidden;
border: 1px solid #000000;
background: #E0E1DF;
}

#menu:hover { left: 0px; }

#menu a {
font-size: 12px;
line-height: 20px;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
text-decoration: none;
padding: 5px;
}

#menu a:hover { font-weight: bold; color: #dd0000; text-decoration: underline; }

#menu #bar {
position: absolute;
top: 0px;
right: 0px;
width: 25px;
padding: 2px;
text-align: center;
height: 636px;
font-weight: bold;
font-size: 14px;
background: #3A3A3A;
}

#menu hr {
border: 0px none;
color: #000000;
height: 1px;
text-align: center;
width: 100%;
background: #000000;
}</style>

<div id="menu">
<div id="bar"><br><br><br><br><br><br>Q<br>U<br>I<br>C<br>K<br><br><br>F<br>O<br>R<br>U<br>M<br><br><br>M<br>E<br>N<br>U</div>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/82">General Board</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/87">Artists Permissions </a><br>
<hr>
CHALLENGES<br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/191">Weekend Tutorial</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/185">Marie's Vector & Painting </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/69">Tutorial </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/72">Tube </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/75">Weekly Filter/Plugin </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/74">Free Scrapkit of the Week </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/209">Weekly Template </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/71">Mask of the Week </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/128">Artist of the Month </a><br>
<hr>TUTORIALS<br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/127">For Beginners</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/184">Staff and Members Tuts (PSP)</a><br>
<hr> ACTIVITIES <br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/190">Auctions-R-Us</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/188">Flea Market</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/211">Scrapkit Exchange Store</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/117">WWO Board</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/118">WWO Pick Ups</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/170">Games </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/123">Show Me</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/122">Siggie Swap </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/120">Show Off Board</a><br>

</div>

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Quick Side Menu

Post by aprilshowers0923 on October 24th 2015, 5:11 am

Sad It didn't work

aprilshowers0923
Forumember

Posts : 153
Reputation : 6
Language : english

http://backgroundsapril.forummotions.com/

Back to top Go down

Solved Re: Quick Side Menu

Post by aprilshowers0923 on October 24th 2015, 6:36 pm

Ange it didn't work Sad

April

aprilshowers0923
Forumember

Posts : 153
Reputation : 6
Language : english

http://backgroundsapril.forummotions.com/

Back to top Go down

Solved Re: Quick Side Menu

Post by Ange Tuteur on October 24th 2015, 6:48 pm

Very weird. blackeye

I have a last resort which is JavaScript. Go to Modules > JavaScript codes management make sure JS codes management is enabled and then Create a new script

Placement : In all the pages
Code:
document.write('<style type="text/css">#menu,#menu a{font-family:Arial,Helvetica,sans-serif;padding:5px;font-weight:700}#menu,#menu #bar,#menu a,#menu a:hover{font-weight:700}#menu{position:fixed;top:40px;left:-192px;width:210px;height:630px;font-size:14px;color:#CB8D9A;overflow:hidden;border:1px solid #000;background:#E0E1DF}#menu:hover{left:0}#menu a{font-size:12px;line-height:20px;color:#000;font-style:normal;text-decoration:none}#menu a:hover{color:#d00;text-decoration:underline}#menu #bar{position:absolute;top:0;right:0;width:25px;padding:2px;text-align:center;height:636px;font-size:14px;background:#3A3A3A}#menu hr{border:0;color:#000;height:1px;text-align:center;width:100%;background:#000}</style>');
$(function() {
  document.body.insertAdjacentHTML('beforeEnd', '<div id="menu">
<div id="bar"><br><br><br><br><br><br>Q<br>U<br>I<br>C<br>K<br><br><br>F<br>O<br>R<br>U<br>M<br><br><br>M<br>E<br>N<br>U</div>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/82">General Board</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/87">Artists Permissions </a><br>
<hr>
CHALLENGES<br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/191">Weekend Tutorial</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/185">Marie\'s Vector & Painting </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/69">Tutorial </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/72">Tube </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/75">Weekly Filter/Plugin </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/74">Free Scrapkit of the Week </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/209">Weekly Template </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/71">Mask of the Week </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/128">Artist of the Month </a><br>
<hr>TUTORIALS<br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/127">For Beginners</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/184">Staff and Members Tuts (PSP)</a><br>
<hr> ACTIVITIES <br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/190">Auctions-R-Us</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/188">Flea Market</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/211">Scrapkit Exchange Store</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/117">WWO Board</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/118">WWO Pick Ups</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/170">Games </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/123">Show Me</a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/122">Siggie Swap </a><br>
<a rel="nofollow" href="http://pspshowdown.yuku.com/forums/120">Show Off Board</a><br>

</div>');
});

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Quick Side Menu

Post by aprilshowers0923 on October 25th 2015, 1:36 pm

It workedddddddddddddddddddddd...I am so happy!!!!!!!!!

Thank you so much Ange for your hard work, it really is much appreciated...thanks again

April


aprilshowers0923
Forumember

Posts : 153
Reputation : 6
Language : english

http://backgroundsapril.forummotions.com/

Back to top Go down

Solved Re: Quick Side Menu

Post by brandon_g on October 25th 2015, 2:31 pm

Is this solved?

-Brandon


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5140
Reputation : 478
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

Solved Re: Quick Side Menu

Post by brandon_g on November 3rd 2015, 9:53 pm

Topic solved and archived ~ brandon_g


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5140
Reputation : 478
Language : English
Location : USA

http://broadcastingduo.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