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.

Side Menu

View previous topic View next topic Go down

Side Menu

Post by Devan on July 29th 2012, 5:11 am


Devan
Forumember

Male Posts : 282
Reputation : 7
Language : English
Location : New Jersey

http://yugioh-universe.findforum.net/

Back to top Go down

Re: Side Menu

Post by DeadlyDuckling on July 29th 2012, 4:23 pm

i would like to know also thats pretty cool

DeadlyDuckling
New Member

Male Posts : 10
Reputation : 1
Language : english

Back to top Go down

Re: Side Menu

Post by Devan on July 31st 2012, 7:08 am

Bumb >.>

Devan
Forumember

Male Posts : 282
Reputation : 7
Language : English
Location : New Jersey

http://yugioh-universe.findforum.net/

Back to top Go down

Re: Side Menu

Post by Sir Chivas™ on July 31st 2012, 8:44 am

Hi, Hello

I don't know the exact coding for that. But you can try this:

CSS
Code:
<style>

ul.svertical{
width: 200px; /* width of menu */
overflow: auto;
background: black; /* background of menu */
margin: 0;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
}

ul.svertical li{
text-align: right; /* right align menu links */
}

ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68); /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* spacing between links */
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

ul.svertical li a:hover{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
color: black;
background: rgb(153,249,75);
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}

ul.svertical li a:before{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */

}

</style>

HTML
Code:
<ul class="svertical">
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/">Coding Forums</a></li>      
</ul>

Edit the links, images, colors.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Re: Side Menu

Post by Devan on July 31st 2012, 9:56 am

Where does the html go though
also i dont want it lik a widget i want it where that site got it

Devan
Forumember

Male Posts : 282
Reputation : 7
Language : English
Location : New Jersey

http://yugioh-universe.findforum.net/

Back to top Go down

Re: Side Menu

Post by kirk on July 31st 2012, 3:52 pm

You can try it in your over all header template.

the css part will go in the <head> section. and the html in the <body> section.
But i am not sure if it's floating menu or not, o will have to test it on my test forum first and see.

Topic has been moved from other problems to scripts and coding section .
Deven has been pm the link to the new thread location.


Info added
Actually i am not sure if i would set that up in the template? there are a few different ways to do it.
If you going to use that script, i would set all the css you want then try adding the code in a few different places.

But it will still have to be in head and body tags, Me if i was using this, i would just have it in a widget.

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Re: Side Menu

Post by Sanket on July 31st 2012, 9:12 pm


Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

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