Best of Joomla! - Best of Resources - Sexy sliding JavaScript side bar menu using mootools

5 total

Sexy sliding JavaScript side bar menu using mootools

Posted by marktun (12) | 2007-12-03 22:03:39

Sexy sliding JavaScript side bar menu using mootools

When trying to conceive ways in which space could be saved on a web page I decided a sliding menu would work well as shown in the images below.

Source:	andrewsellick.com	Link Hits:	1510
Submited by:	marktun (12)	Favoured:	4
Added Date:	2007-12-03 22:03:39	Modify Date:
Detail View:	2354

Related Resources

Discuss (3)

Sexy sliding JavaScript side bar menu using mootools by fabs06 Dec 07 18:08

how can i get that to work properly in Joomla and use its own style sheet??
The problem is that many of the li and ul and body parameters are already existent in my current joomla template and overwrite the styles of the sidebar...

any help or hint please?

Thanks
fabs

Re:Sexy sliding JavaScript side bar menu using moo by Aliyar06 Dec 07 19:35

I checked quicly. It is nice menus. Maybe we can use it

BTW Add just this codes on your joomla css file.

Code:

#sideBar{
position: absolute;
width: auto;
height: auto;
top: 200px;
right:-7px;
background-image:url(images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}

#sideBarTab{
float:left;
height:137px;
width:28px;
}

#sideBarTab img{
border:0px solid #FFFFFF;
}

#sideBarContents{
overflow:hidden !important;
}

#sideBarContentsInner{
width:200px;
}

#sideBarContentsInner h2{
color:#FFFFFF;
font-size:90%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold;
}

#sideBarContentsInner h2 span{
font-size:105%;
font-weight:normal;
}

#sideBarContentsInner ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#sideBarContentsInner ul li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
}

#sideBarContentsInner ul li a{
width:100%;
}

#sideBarContentsInner ul li a:link,
li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:70%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}

#sideBarContentsInner ul li a:hover{
color:#FFFFFF;
text-decoration:underline;
}

I added " #sideBarContentsInner" before ul and li. joomla defaul ul's should not effect it. If it still has a problem you can play with
#sideBarContentsInner ul li 's

I hope it will help/

Re:Sexy sliding JavaScript side bar menu using moo by fabs06 Dec 07 23:31

what is controlling the background color of the slidebox i cannot get it to anything other than white...
i played around already....

thanks
fabs